Tutorial Membuat TabLayout dan ViewPager seperti WhatsApp : Kotlin Bahasa Indonesia

Syahrizal Akbar
Oct 18, 2019 · 4 min read

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 :

CameraFragment

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 :

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade