Tutorial Membuat TabLayout dan ViewPager seperti WhatsApp : Kotlin Bahasa Indonesia
Bismilllaahirrahmaanirrahiim,
Pada project kali ini kita akan belajar membuat sebuah tampilan activity yang didalam terdapat TabLayout dan menggunakan ViewPager, diantara aplikasi yang menggunakan TabLayout dan View Pager adalah Aplikasi WhatsApp.
Persiapan
Baiklah sekarang kita akan mencoba membuatnya, pertama-tama buat Project baru :
Lalu kita tambahkan 3 buah fragment untuk masing-masing viewpager
caranya klik kanan New > Fragment > BlankFragment, lalu isikan seperti berikut :
Lalu kita edit colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#9A00A3</color>
<color name="colorPrimaryDark">#6C0072</color>
<color name="colorAccent">#FFFFFF</color>
<color name="backgroundHome">#109C00</color>
<color name="bacgroundStatus">#0073AF</color>
<color name="backgroundProfile">#B80000</color>
</resources>lalu kita tambahkan icon searchnya dengan cara klik kanan di res > New > Vector Asset, lalu isikan seperti berikut :
Selanjutnya kita buat menunya seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/search"
android:title="Search"
android:icon="@drawable/ic_search_white_24dp"
app:showAsAction="always"/>
<item
android:id="@+id/setting"
android:title="Setelan"/>
</menu>caranya klik kanan pada res lalu kita New > Android Resources File, lalu kita isikan seperti berikut :
Penerapan
Pertama-tama kita edit-edit layoutnya dulu seperti berikut :
actvity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/colorPrimary"
app:tabTextColor="@android:color/white"/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>Untuk fragment home, status, dan profile, kita edit backgroundnya saja
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:background="@color/backgroundHome"
tools:context=".fragment.HomeFragment">
</FrameLayout>fragment_status.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:background="@color/bacgroundStatus"
tools:context=".fragment.StatusFragment">
</FrameLayout>fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:background="@color/backgroundProfile"
tools:context=".fragment.ProfileFragment">
</FrameLayout>Membuat Adapter Untuk ViewPager
Selanjutnya kita akan membuat adapternya kita akan membuat adapternya berada didalam class MainActivity
package id.rdev.tablayoutwithviewpagerproject
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import androidx.fragment.app.FragmentStatePagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT
import id.rdev.tablayoutwithviewpagerproject.fragment.HomeFragment
import id.rdev.tablayoutwithviewpagerproject.fragment.ProfileFragment
import id.rdev.tablayoutwithviewpagerproject.fragment.StatusFragment
import kotlinx.android.synthetic.main.activity_main.*
import javax.net.ssl.HostnameVerifier
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// kita ganti title dan kita hilangkan shadownya
supportActionBar?.title = "TabPager"
supportActionBar?.elevation = 0.0f
val adapter = TabAdapter(supportFragmentManager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT)
viewPager.adapter = adapter
tabLayout.setupWithViewPager(viewPager)
}
class TabAdapter(fm: FragmentManager, behavior: Int) : FragmentStatePagerAdapter(fm, behavior) {
private val tabName : Array<String> = arrayOf("Home", "Status", "Profile")
override fun getItem(position: Int): Fragment = when (position) {
0 -> HomeFragment()
1 -> StatusFragment()
2 -> ProfileFragment()
else -> HomeFragment()
}
override fun getCount(): Int = 3
override fun getPageTitle(position: Int): CharSequence? = tabName.get(position)
}
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.menu, menu)
return super.onCreateOptionsMenu(menu)
}
}di MainActivity ini selain adapter kita juga mengubah titlenya dan juga menghilangkan shadow pada toolbarnya, dan dilanjutkan dengan menginisialisasikan adapter, lalu kita set viewPager menggunakan adapter yang telah kita inisialisasikan.
lalu kita hubungkan tablayout dengan view pager dengan fungsi setupWithViewPager.
juga kita juga melakukan inflate menu yang telah kita buat tadi menggunakan method onCreateOptionsMenu.
Sehingga tampilannya sekarang seperti ini :
Membuat CustomView
Sekarang kita perlu menambahkan tab satu lagi tetapi menggunakan icon saja.
caranya pertama-tama buat iconnya terlebih dahulu seperti cara sebelumnya :
Lalu kita tambahkan 1 buah fragment lagi seperti sebelumnya, disini kita coba menambahkan CameraFragment, sehingga ada 4 fragment, dan kita edit layoutnya seperti ini
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlnCameraFragments: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"
android:background="@color/colorPrimaryDark"
tools:context=".fragment.StatusFragment">
</FrameLayout>Lalu kita tambahkan CameraFragment di getItem, lalu kita ganti juga getCountnya menjadi 4, juga kita tambahkan tabNamenya :
class TabAdapter(fm: FragmentManager, behavior: Int) : FragmentStatePagerAdapter(fm, behavior) {
private val tabName : Array<String> = arrayOf("Home", "Status", "Profile", "Camera")
override fun getItem(position: Int): Fragment = when (position) {
0 -> HomeFragment()
1 -> StatusFragment()
2 -> ProfileFragment()
3 -> CameraFragment()
else -> HomeFragment()
}
override fun getCount(): Int = 4
override fun getPageTitle(position: Int): CharSequence? = tabName.get(position)
}Selanjutnya kita buat layout custom tabnya kita beri nama tab_icon.xml, dan kita isikan seperti berikut :
<?xml version="1.0" encoding="u<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content"><ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_photo_camera_white_24dp" />
</LinearLayout>
Lalu dibawah setupWithViewPager, kita buat custom tabnya menggunaka tab_icon.xml seperti kode berikut :
...
tabLayout.setupWithViewPager(viewPager)
val icon_tab = LayoutInflater.from(this).inflate(R.layout.tab_icon, null)
icon_tab.imageView.setImageResource(R.drawable.ic_photo_camera_white_24dp)
tabLayout.getTabAt(3)?.customView = icon_tab
}Selesai, dan hasilnya :
