Studi Kasus Company Profile

Membuat Layout dan Background di Drawable

Bottom Navigation
Item View dan Adapter Recylerview
Flow Adapter dan Gambar dari Internet
Langkah mengerjakan project
1. Menambahkan icon home
Klik kanan drawable -> klik new -> klik vektor asset
Klik Clip Art dan cari icon home atau sejenisnya, dan pilih warna misalnya biru.
2. Menambahkan icon anggota/user
Klik kanan drawable -> klik new -> klik vektor asset
Klik Clip Art dan cari icon account atau sejenisnya, dan sesuaikan warna pada icon home
3. Membuat navigasi backgroud
Klik kanan package drawble -> klik new -> pilih Menu Resource File, tulis nama “nav_bg”
root elementnya “shape”

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#279BF8"/>
<corners android:topLeftRadius="28dp" android:topRightRadius="28dp"/>
</shape>

4. Membuat package menu pada package res

Klik kanan package res -> klik new -> pilih package/directory, tulis nama “menu”
5. Membuat item menu bottom navigation
Klik kanan package menu -> klik new -> pilih Menu Resource File, tulis nama
“menu_item_bottom_nav” root elementnya “menu”

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/home_nav"
android:icon="@drawable/ic_baseline_home_24"
android:title="Home"/>
<item
android:id="@+id/user_nav"
android:icon="@drawable/ic_baseline_account_circle_24"
android:title="User"/>
</menu>

6. Menambahkan BottomNavigation dan FrameLayout pada File activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
 <FrameLayout
android:id="@+id/fragment_container"
android:layout_above="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/nav_bg"
app:menu="@menu/menu_item_bottom_nav" />

</RelativeLayout>

7. Membuat Resource File Background Half Circle

Klik kanan drawable -> klik new -> klik Drawable Resource File
Isi namanya dengan “bg_half_circle” root elementnya “shape”

<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">

<corners android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"/>
<solid android:color="@color/design_default_color_primary"/>
</shape>

8. Menambahkan icon settings

Klik kanan drawable -> klik new -> vektor asset, pilih icon dengan cara Clilp Art, cari icon
“settings”
9. Menambahkan package ui (user interface)
Klik kanan package utama -> klik new -> klik package, isi nama package “ui”
10. Menambahkan 2 package didalam ui
Klik kanan package ui -> klik new -> klik package, tulis nama “activity”
Klik kanan package ui -> klik new -> klik package, tulis nama “fragment”
11. Membuat 2 package home dan anggota pada package fragment
Klik kanan package fragment -> klik new -> klik package, tulis nama “home”
Klik kanan package fragment -> klik new -> klik package, tulis nama “anggota”
12. Menambahkan 2 fragment
Klik kanan package home -> klik new -> pilih Fragment -> pilih BlankFragment, tulis nama
“HomeFragment”
Klik kanan package anggota -> klik new -> pilih Fragment -> pilih BlankFragment, tulis
nama “AnggotaFragment”
Pilih bahasa pemrogramannya kotlin
13. Tambahkan source code pada MainActivity.kt

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val homeFragment = HomeFragment()

val anggotaFragment = AnggotaFragment()
val bottomNavigationView =
findViewById<BottomNavigationView>(R.id.navigation)
replaceFragment(homeFragment)

bottomNavigationView.setOnItemSelectedListener {
when(it.itemId){
R.id.home_nav -> replaceFragment(homeFragment)
R.id.user_nav -> replaceFragment(anggotaFragment)
}
true
}
}
private fun replaceFragment(fragment: Fragment){
if (fragment != null){
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(R.id.fragment_container, fragment)
transaction.commit()
}
}
}

14. Jalanan programnya pastikan tidak ada yang eror

15. Membuat Theme untuk NoActionBar
Klik kanan value -> klik new -> klik Values Resource File, buat dengan nama style

<?xml version="1.0" encoding="utf-8"?>

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/design_default_color_primary</item>
<item name="colorPrimaryDark">@color/design_default_color_primary_dark</
item>
<item name="colorAccent">@color/design_default_color_secondary</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>

</resources>
16. Menonaktifkan Action Bar pada theme default.
Klik manifest -> ubah android:theme menjadi NoActionBar
 android:theme="@style/AppTheme.NoActionBar">

17. Tambahkan gambar youtube di drawable untuk menampilkan gambarnya di menu utama

18. Desain tampilan fragment_home.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ui.fragment.home.HomeFragment">

<ImageView
android:src="@drawable/bg_half_circle"
android:layout_width="match_parent"
android:layout_height="150dp"/>

<TextView
android:id="@+id/tv_welcome"
android:text="Selamat Datang"
android:layout_margin="16dp"
android:textSize="20sp"
android:textColor="#FFFFFF"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<ImageView
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:src="@drawable/ic_baseline_settings_24"
android:layout_width="20dp"
android:layout_height="20dp"/>

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_home"
android:layout_below="@+id/tv_welcome"
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<LinearLayout
 android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/rv_home"
android:layout_margin="16dp">

<TextView
android:textStyle="bold"
android:layout_width="match_parent"
android:textSize="18sp"
android:layout_height="wrap_content"
android:text="Info Company" />

<androidx.cardview.widget.CardView
android:layout_marginTop="8dp"
android:background="#FFFFFF"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
>
<ImageView
android:src="@drawable/download"
android:id="@+id/ytb"
android:layout_width="match_parent"
android:layout_height="200dp"/>

</androidx.cardview.widget.CardView>

<TextView
android:layout_marginTop="10dp"
android:textStyle="bold"
android:layout_width="match_parent"
android:textSize="18sp"
android:layout_height="wrap_content"
android:text="Sosial Media Company" />
</LinearLayout>

</RelativeLayout>

19. Jalankan programnya.

Pastikan project tidak eror.
20. Buat package model
Klik kanan package home -> klik new -> klik package, tulis namanya dengan nama “model”

21. Buat file ModelInfo

Klik kanan package model -> klik new -> klik Kotlin File/Class, tulis dengan nama
“ModelInfo”, pitilh type file Class.

class ModelInfo {
var nameInfo = ""
 var imageInfo = ""
var detailInfo = ""
}

22. Buat file DataInfo

Klik kanan package home -> klik new -> klik Kotlin File/Class, tulis dengan nama “DataInfo”,
pilih type file object.

object DataInfo {

val nameInfo = arrayOf(

"Pemrograman Mobile",
"Pemrograman Game",
"Multimedia"
)

val imageInfo = arrayOf(

"https://assets.jalantikus.com/assets/cache/500/284/userfiles/2019/02/04/
aplikasi-ojek-online-3-a8d5d.jpg",
"https://ecs7.tokopedia.net/img/cache/700/product-
1/2016/7/26/9410026/9410026_bbde85d5-694c-4a27-a3b3-db2159a48ae7.jpg",
"https://ecs7.tokopedia.net/img/cache/700/product-
1/2016/7/26/9410026/9410026_bbde85d5-694c-4a27-a3b3-db2159a48ae7.jpg"

val detailInfo = arrayOf(

"BELUM ADA DATA",
"BELUM ADA DATA",
"BELUM ADA DATA"

val listData : ArrayList<ModelInfo>

get() {
val list = ArrayList<ModelInfo>()
for (posisi in nameInfo.indices){
val modelInfo = ModelInfo()
modelInfo.nameInfo = nameInfo[posisi]
modelInfo.imageInfo = imageInfo[posisi]
modelInfo.detailInfo = detailInfo[posisi]

list.add(modelInfo)

return list

}
}
23. Membuat item_info_company
Klik kanan layout -> klik new -> klik Layout Resource File, tulis nama file
“item_info_company”

<androidx.cardview.widget.CardView
app:cardCornerRadius="10dp"
app:cardElevation="6dp"
android:layout_margin="16dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp">

<ImageView
android:id="@+id/img_info"
android:scaleType="centerCrop"
android:src="@mipmap/ic_launcher"
android:layout_width="match_parent"
android:layout_height="200dp"/>

<TextView
android:id="@+id/tv_judul_info"
android:layout_alignParentBottom="true"
android:gravity="center"
android:background="#48131010"
android:textColor="#fff"
android:text="Judul . . ."
android:textSize="18sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>

</androidx.cardview.widget.CardView>

24. Membuat file AdapterInfo

Klik kanan package home -> klik new -> Klik Kotlin File/Class, tulis namanya “AdapterInfo”

class AdapterInfo (val list : ArrayList<ModelInfo>) :

RecyclerView.Adapter<AdapterInfo.MyHolder>() {
inner class MyHolder (itemView: View) : RecyclerView.ViewHolder(itemView){
val tvJudulInfo: TextView = itemView.findViewById(R.id.tv_judul_info)
val imgInfo: ImageView = itemView.findViewById(R.id.img_info)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
AdapterInfo.MyHolder {
val view =
LayoutInflater.from(parent.context).inflate(R.layout.item_info_company,parent,
false)
 return MyHolder(view)
}

override fun getItemCount(): Int {

return list.size
}
override fun onBindViewHolder(holder: MyHolder, position: Int) {
val currentItem = list[position]
holder.tvJudulInfo.text = currentItem.nameInfo
Glide.with(holder.itemView.context)
.load(currentItem.imageInfo)
.into(holder.imgInfo)
}
}

25. Souce code FragmentHome.kt

class HomeFragment : Fragment() {

var list = ArrayList<ModelInfo>()

override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_home, container, false)
}

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

super.onViewCreated(view, savedInstanceState)
val rvHome: RecyclerView = view.findViewById(R.id.rv_home)
rvHome.layoutManager = LinearLayoutManager(activity,
LinearLayoutManager.HORIZONTAL, false)
list.addAll(DataInfo.listData)
var adapter = AdapterInfo(list)
rvHome.adapter = adapter
adapter.notifyDataSetChanged()
}
}

26. Membuat 2 package pada package activity

Klik kanan package activity -> klik new -> klik package tulis namanya “detail”
Klik kanan package activity -> klik new -> klik package tulis namanya “setting”
27. Membuat DetailActivity
Klik kanan package detail -> klik new -> klik Activity -> pilih Empty Activity, isi namanya
DetailActivity (bahasa kotlin)
28. Membuat SettingActivity
Klik kanan package setting -> klik new -> klik Activity -> pilih Empty Activity, isi namanya
SettingActivity (bahasa kotlin)

Tampilan program saat dijalankan