Cara mudah membuat Tab UI Material Design Android dengan kotlin - Pembahasan kali ini saya akan coba membahas seputar android, tepatnya kotlin. Saya akan coba berbagi tentang cara membuat Tab UI Android dengan menggunakan bahasa kotlin. Caranya tidaklah terlalu sulit, cukup sederhana untuk di praktikan. Silahkan ikutin langkah-langkah di bawah ini, di akhir tulisan ini saya akan coba bagikan seluruh kodenya lewat github.
PROJEK BARU
Untuk langkah awal silahkan buat projek baru di android studio kamu, pada halaman template pilih saja "Empty Activity" kemudian klik next.
Pada halaman konfigursi projek silahkan isi nama projek sesuai keinginan kamu, bisa dilihat pada gambar dibawah ini untuk lebih jelasnya. Jika sudah langsung saja klik finish.
TAMBAHKAN DEPENDENCY
Untuk membuat Tab UI, disini kita perlu menambahkan dependency baru ke build.gradle (Module:app), silahkan salin sintak dibawah ini :
implementation 'com.google.android.material:material:1.0.0'
RES VALUES
Langkah selanjutnya atur Base Application Theme di res/values/style.xml. Pada bagian atribut "parent" atur menjadi NoActionBar, seperti ini :
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
MAIN ACTIVITY
Disini silahkan ubah MainActivity.kt menjadi seperti ini :
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
val adapter = ViewPagerAdapter(supportFragmentManager)
adapter.addFragment(OneFragment(), "ONE")
adapter.addFragment(TwoFragment(), "TWO")
adapter.addFragment(ThreeFragment(), "THREE")
viewPager.adapter = adapter
tabs.setupWithViewPager(viewPager)
}
}
Kemudian di bagagian layoutnya (res/layout/activity_main.xml) di sesuaikan juga, tambahkan sintak xml seperti ini :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintBottom_toTopOf="@+id/viewPager"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/colorPrimary"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="@android:color/white" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/appBarLayout">
</androidx.viewpager.widget.ViewPager>
</androidx.constraintlayout.widget.ConstraintLayout>
VIEW PAGER ADAPTER
Kemudian langkah berikutnya kamu buat file kotlin class baru dengan nama ViewPagerAdapter.kt. File ini nantinya berfungsi untuk mengontrol tab yang akan kamu buat, dengan ini kamu dapat dengan mudah menambah atau mengurangi jumlah tab. Selain itu file ini juga sekaligus sebagai jembatan penghubung antara activity dan fragment. Kurang lebih isinya seperti ini
class ViewPagerAdapter(supportFragmentManager: FragmentManager) : FragmentPagerAdapter(supportFragmentManager, FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
private val mFragmentList = ArrayList()
private val mFragmentTitleList = ArrayList()
override fun getItem(position: Int): Fragment {
return mFragmentList.get(position)
}
override fun getCount(): Int {
return mFragmentList.size
}
override fun getPageTitle(position: Int): CharSequence? {
return mFragmentTitleList[position]
}
fun addFragment(fragment: Fragment, title: String) {
mFragmentList.add(fragment)
mFragmentTitleList.add(title)
}
}
FRAGMENT
Jika semua sudah terbuat, untuk mengatur isi dalam tabnya kita akan menggunakan fragment. Disini kita akan membuat 3 fragment untuk 3 buat tampilan tab, isinya kurang lebih hampir sama, berikut sintaknya :
OneFragment.kt
class OneFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_one, container, false)
return view
}
}
TwoFragment.kt
class TwoFragment: Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_one, container, false)
return view
}
}
ThreeFragment.kt
class ThreeFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_one, container, false)
return view
}
}
FRAGMENT LAYOUT
yang diatas kita hanya membuat file fragment untuk kotlinnya saja, nah yang terakhir kita akan membuat file layout (res/layout) untuk masing-masing fragmentnnya. kurang lebih seperti ini sintaknya :
fragment_one.xml (res/layout/fragment_one.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THIS IS PAGE FOR TAB 1" />
</LinearLayout>
fragment_two.xml (res/layout/fragment_two.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THIS IS PAGE FOR TAB 2" />
</LinearLayout>
fragment_three.xml (res/layout/fragment_three.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="THIS IS PAGE FOR TAB 3" />
</LinearLayout>
Jika semuanya sudah selesai dibuat silahkan run projek untuk melihat hasilnya. Kurang lebih hasilnya nanti akan nampak seperti gambar yang ada di atas. Jika kamu merasa bingung dengan struktur dan penempatan file itu ada dimana saja, kamu dapat melihat sintak lengkapnya pada halaman repository kang cahya, lihat disini : https://github.com/k4ng/tab-ui-android-kotlin-example
Mungkin cukup sekian dulu untuk tulisan kali ini, semoga dapat bermanfaat dan dapat di pahami oleh kamu yang membaca, atas kurang dan kesalahannya mohon maaf, teima kasih :)
Posting Komentar