How to add menu option in TabLayout?

Viewed 1689

I am making an android application with tabbed activity. I want a three dot menu option to appear to the right of the tabs. How can I do that? I want menu option with TabLayout just the one shown in the screenshot. screenshot

2 Answers

Activity layout:

...
<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabBackground="@drawable/tab_selector"
            app:tabTextColor="@drawable/tab_selector"
            app:tabMode="scrollable"/>

    </androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
...

Activity class:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = findViewById<Toolbar>(R.id.my_toolbar)
        setSupportActionBar(toolbar)
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean { ... }

    override fun onOptionsItemSelected(item: MenuItem): Boolean { ... }
}

Result:

enter image description here

To place the TabLayout below the application name and menu, like:

enter image description here

You can do this:

...
<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
    
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabBackground="@drawable/tab_selector"
        app:tabTextColor="@drawable/tab_selector"
        app:tabMode="scrollable"/>

</com.google.android.material.appbar.AppBarLayout>
...

For creating a menu, create a new resource directory called "menu" and create a menu resource file called "main_menu.xml".Inside that you can create the items that you want in the menu. Then you can use onCreateOptionsMenu to inflate menu in your .java file. After that use onOptionsItemSelected to do some task when the user selects one of the options in the menu.

Related