This is a tablayout android kotlin example.
Tablayout android kotlin tutorial will guide you to make different actionbar/toolbar menuitems for different colors.
In whatsapp, when you slide fragments menu items are also changing.
We will develop this functionality in tablayout android tutorial.
If you don’t have go through basic tablayout tutorial, then visit android tablayout kotlin tutorial.
Develop basic tablayout example from above link then follow steps of this tutorial.
First, check the output of this example.
Download Source Code for Tablayout Android Kotlin example
[sociallocker]Download KotlinTabMenuItem[/sociallocker]
Step 1: Make Basic structure
Follow all the steps from basic tablayout Android tutorial.
After you have completed above tutorial, you will have one android project with tablayout.
Now follow below steps.
Step 2: Adding images to drawable
Download images and copy them into “drawable” directory
Step 3: Updating styles.xml
Update styles.xml file as per below source code
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Step 4: Creating toolbar.xml file
Create a new resource file named toolbar.xml and paste below
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Step 5: Developing OneActivity
Create a new activity named “OneActivity.kt”
Copy following in activity_one.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context="com.exampledemo.parsaniahardik.tabmenuitem.OneActivity">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#f12a1f"
android:textSize="25sp"
android:textColor="#fff"
android:text="This is One Activity. Similarly you can create activity for two and three fragments." />
</LinearLayout>
Add following source code into OneActivity.kt class
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.Toolbar
import android.view.MenuItem
class OneActivity : AppCompatActivity() {
private var toolbar: Toolbar? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_one)
toolbar = findViewById(R.id.toolbar) as Toolbar
setSupportActionBar(toolbar)
supportActionBar!!.title = "One Activity"
supportActionBar!!.setDisplayHomeAsUpEnabled(true)
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
if (item.itemId == android.R.id.home) {
onBackPressed()
return true
}
return false
}
}
Step 6: Creating menu resource directory
Create a new resource directory named “menu” inside the “res” directory.
Inside “menu,” make three new xml files and name them as one_menu.xml,two_menu.xml and three_menu.xml
Add below source code in one_menu.xml
<?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/action_message"
android:orderInCategory="100"
android:title="Message"
android:icon="@drawable/message"
app:showAsAction="always" />
</menu>
Add following in two_menu.xml
<?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/action_car"
android:orderInCategory="100"
android:title="Message"
android:icon="@drawable/car"
app:showAsAction="always" />
</menu>
Add below in three_menu.xml
<?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/action_logout"
android:orderInCategory="100"
android:title="Logout"
app:showAsAction="never" />
</menu>
Step 7: Updating all fragments
Update OneFragment.kt as per below code
/**
* Created by Parsania Hardik on 27-Jan-18.
*/
import android.content.Intent
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.MenuItem
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import android.widget.Toast
class OneFragment : Fragment() {
private var view1: View? = null
private var textView: TextView? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
view1 = inflater!!.inflate(R.layout.fragment_one, container, false)
textView = view1!!.findViewById(R.id.tv) as TextView
textView!!.setOnClickListener {
val intent = Intent(activity, OneActivity::class.java)
startActivity(intent)
}
return view1
}
override fun onCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) {
inflater!!.inflate(R.menu.one_menu, menu)
super.onCreateOptionsMenu(menu, inflater)
}
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
val id = item!!.itemId
if (id == R.id.action_message) {
Toast.makeText(activity, "Message clicked!", Toast.LENGTH_SHORT).show()
return true
}
return super.onOptionsItemSelected(item)
}
}
Update TwoFragment.kt as per following
/**
* Created by Parsania Hardik on 27-Jan-18.
*/
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.MenuItem
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
class TwoFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
return inflater!!.inflate(R.layout.fragment_two, container, false)
}
override fun onCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) {
inflater!!.inflate(R.menu.two_menu, menu)
super.onCreateOptionsMenu(menu, inflater)
}
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
val id = item!!.itemId
if (id == R.id.action_car) {
Toast.makeText(activity, "Car clicked!", Toast.LENGTH_SHORT).show()
return true
}
return super.onOptionsItemSelected(item)
}
}
Update ThreeFragment.kt like below
/**
* Created by Parsania Hardik on 27-Jan-18.
*/
import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.Menu
import android.view.MenuInflater
import android.view.MenuItem
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
class ThreeFragment : Fragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setHasOptionsMenu(true)
}
override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
// Inflate the layout for this fragment
return inflater!!.inflate(R.layout.fragment_three, container, false)
}
override fun onCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) {
inflater!!.inflate(R.menu.three_menu, menu)
super.onCreateOptionsMenu(menu, inflater)
}
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
val id = item!!.itemId
if (id == R.id.action_logout) {
Toast.makeText(activity, "Logout clicked!", Toast.LENGTH_SHORT).show()
return true
}
return super.onOptionsItemSelected(item)
}
}
Java Version
Java version of this tutorial: Tablayout Android
Above tutorial will helpful if you are not familiar with kotlin.
Use comment section for queries and reviews. Thank you.