Sun. Aug 7th, 2022

TabLayout sama seperti halnya menu tab yang ada di website. di mana menu tersebut dapat diklik dari kiri ke kanan pada bagian atas tab. misalnya ada 3 tab (Home, Menu 1, Menu 2). setiap Tab memiliki konten dan desain yang berbeda-beda. sebagai gambaran dapat dilihat pada gambar di bawah ini.

XML layout TAB Menu:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#B22222"
        app:tabTextColor="@android:color/background_light"
        tools:ignore="MissingConstraints">

        <android.support.design.widget.TabItem
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Home" />

        <android.support.design.widget.TabItem
            android:id="@+id/menu1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MENU 1" />

        <android.support.design.widget.TabItem
            android:id="@+id/menu2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MENU 2" />


    </android.support.design.widget.TabLayout>

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout">
    </FrameLayout>


</android.support.constraint.ConstraintLayout>

XML layout Home:

<?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"
    tools:context=".Menu3Activity">  >
    <!-- TODO: Update blank fragment layout -->



<TableLayout
    android:id="@+id/simpleTableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"> <!-- stretch the second column of the layout-->

    <TableRow
        android:paddingTop="10px"
        android:gravity="center"
        android:layout_marginTop="20px">

        <TextView
            android:id="@+id/hd"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:layout_span="2"
            android:text=""
            android:textColor="#890000"
            android:textSize="25sp"
            android:textStyle="bold" />

    </TableRow>

    <TableRow
        android:layout_marginTop="20dip" >

        <TextView
            android:layout_width="wrap_content"
            android:text="Username :"
            android:textSize="20sp"
            android:textColor="#000000"
            android:layout_marginLeft="20dip"
            ></TextView>

        <EditText
            android:id="@+id/inptuser"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" >

        </EditText>

    </TableRow>

    <TableRow
        android:layout_marginTop="20dip" >

        <TextView android:text="Password :"
            android:layout_width="wrap_content"
            android:textSize="20sp"
            android:textColor="#000000"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"></TextView>

        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" >

        </EditText>

    </TableRow>

    <TableRow
        android:gravity="center"
        android:layout_marginTop="20dip" >


        <Button
            android:id="@+id/simpan"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:text="Submit"></Button>
    </TableRow>
</TableLayout>

</FrameLayout>

 Layout Menu 1.

<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">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="Menu 1" />

    <Button
        android:id="@+id/androidButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:text="Klik"/>


</FrameLayout>

  Layout Menu 2.

<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">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="Menu 2" />

    <Button
        android:id="@+id/androidButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom"
        android:text="Klik"/>


</FrameLayout>

Setelah itu buat code di MainActivity untuk Tab Menu.

package a.riki.cobahello
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
import android.support.v4.app.FragmentTransaction
import android.content.Intent
import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v7.app.AppCompatActivity
import android.widget.FrameLayout
import kotlinx.android.synthetic.main.layout_button.*

class MainActivity : AppCompatActivity() {
    var tabLayout: TabLayout? = null
    var frameLayout: FrameLayout? = null
    var fragment: Fragment? = null
    var fragmentManager: FragmentManager? = null
    var fragmentTransaction: FragmentTransaction? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.layout_button)
        tabLayout = findViewById<TabLayout>(R.id.tabLayout)
        frameLayout = findViewById<FrameLayout>(R.id.frameLayout)

        fragment = Menu3Activity()
        fragmentManager = supportFragmentManager
        fragmentTransaction = fragmentManager!!.beginTransaction()
        fragmentTransaction!!.replace(R.id.frameLayout, fragment)
        fragmentTransaction!!.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
        fragmentTransaction!!.commit()
        //adding listener for tab select
        tabLayout!!.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                // creating cases for fragment
                when (tab.position) {
                    0 -> fragment = Menu3Activity()
                    1 -> fragment = Menu1Activity()
                    2 -> fragment = Menu2Activity()

                }
                val fm = supportFragmentManager
                val ft = fm.beginTransaction()
                ft.replace(R.id.frameLayout, fragment)
                ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
                ft.commit()
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {

            }

            override fun onTabReselected(tab: TabLayout.Tab) {

            }
        })

    }
}

kemudian buat class Menu1Activity

package a.riki.cobahello
import android.support.v4.app.Fragment

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.menu1.view.*


class Menu1Activity : Fragment() {

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {

        val view: View = inflater!!.inflate(R.layout.menu1, container, false)

        view.androidButton!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"Konten Menu 1",Toast.LENGTH_SHORT).show()
        })
        return view

    }
}

 class Menu2Activity

package a.riki.cobahello
import android.support.v4.app.Fragment

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.menu2.view.*


class Menu2Activity : Fragment() {

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        val view: View = inflater!!.inflate(R.layout.menu2, container, false)

        view.androidButton!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"Konten Menu 2",Toast.LENGTH_SHORT).show()
        })
        return view
    }
}

 class Menu3Activity

package a.riki.cobahello
import android.support.v4.app.Fragment

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import kotlinx.android.synthetic.main.layout_relative.view.*


class Menu3Activity : Fragment() {

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        // Inflate the layout for this fragment
        val view: View = inflater!!.inflate(R.layout.layout_relative, container, false)

        view.simpan!!.setOnClickListener(View.OnClickListener {
            Toast.makeText(context,"Konten Menu 3",Toast.LENGTH_SHORT).show()
        })
        return view
    }

}

Adapun Hasilnya Sebagai Berikut ketika user mengklik masing-masing Tab Menu
Menu Home

Menu Menu 1

Menu Menu 2