Android Adding Custom Layout To ActionBar

The app bar, also known as the action bar, is one of the most important design elements in your app's activities, because it provides a visual structure and interactive elements that are familiar to users. Using the app bar makes your app consistent with other Android apps , allowing users to quickly understand how to operate your app and have a great experience

In the previous post we have seen adding custom view or widget like Spinner and SearchView to actionBar Thru menu resource .

In this tutorial we will see adding Custom XML Layout to ActionBar.

 

1. XML Layout

Create XML Layout for MainActivity 

file : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

</androidx.constraintlayout.widget.ConstraintLayout>

Custom Layout For ActionBar

• Create XML Layout "actionbar_layout_content.xml" .
• Add search_layout(XML Layout contains AppCompatAutoCompleteTextView ) and ImageView   https://github.com/TutorialsBuzz/ActionBarCustomLayout/blob/master/app/src/main/res/layout/search_layout.xml.
• This layout will be added to actionBar at runtime in MainActivity .

file : actionbar_layout_content.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <!-- Search Layout-->
    <include
        layout="@layout/search_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <!-- Image View Layout-->
    <ImageView
        android:id="@+id/moreOption"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_more" />

</LinearLayout>

2. Main Activity

• Inside onCreate function set the above defined XML Layout 
• GetActionBar instance and set custom view by passing above defined xml layout file .

file :  MainActivity.kt 

package com.tutorialsbuzz.customtoolbarlayout

import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.PopupMenu
import kotlinx.android.synthetic.main.search_layout.*
import kotlinx.android.synthetic.main.actionbar_layout_content.*

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

        val actionBar = supportActionBar
        // set display options of the ActionBar
        actionBar?.apply {
            setDisplayShowTitleEnabled(false)
            setDisplayShowHomeEnabled(false)
            setDisplayShowCustomEnabled(true)
            setCustomView(R.layout.actionbar_layout_content)
        }
        
    }

}

DOWNLOAD CODE