Cara mudah membuat Tab UI Material Design Android dengan kotlin

Cara mudah membuat Tab UI Material Design Android dengan kotlin


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.

Cara mudah membuat Tab UI Material Design Android dengan kotlin

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.

Cara mudah membuat Tab UI Material Design Android dengan kotlin

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 :)


0/Post a Comment/Comments

Previous Post Next Post