In this article, we will learn about android AppBarLayout using Kotlin. We will go through various example that demonstrates how to use different attributes of AppBarLayout. For example,

In this article, we will get answer to questions like –

• What is AppBarLayout?
• Why should we consider AppBarLayout while designing ui for any app?
• What are possibilities using AppBarLayout while designing ui? etc.

Let’s have a quick demo of things we want to cover in this tutorial –

Output

Getting Started

We can define android AppBarLayout widget as below –

AppBarLayout is a vertical LinearLayout which contains scrolling features from material design app bar.

Now, how do we use AppBarLayout in android application ?

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

• Install Android Studio
• Create New Project in Android Studio
• Android Project Structure
• Run / Debug / Test Android App

Before we move ahead, we need to setup for viewBinding to access Android AppBarLayout Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

 
 android { 
 	// OTHER CODE... 
 	buildFeatures { 
 		viewBinding true 
 	} 
 } 
 

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

 
 class MainActivity : AppCompatActivity() { 
 	
 	private lateinit var binding: ActivityMainBinding 
 	
 	override fun onCreate(savedInstanceState: Bundle?) { 
 		super.onCreate(savedInstanceState) 
 		binding = ActivityMainBinding.inflate(layoutInflater) 
 		val view = binding.root 
 		setContentView(view) 
 	} 
 } 
 

Now, we can access view in Kotlin file without using findViewById() method.

Using AppBarLayout in Kotlin

Follow steps below to use AppBarLayout in newly created project –

• Open res/values/strings.xml file. Then, add below code into it.

  <resources>
      <string name="app_name">AppBarLayout</string>
      <string name="scrolled_content">This content is scrolled with appBarLayout scroll.</string>
      <string name="scrollable_content">This text will be visible even after scroll up.</string>
  </resources>
  

• Open themes.xml file from res/values folder. Then, add below code in it –

  <resources xmlns:tools="http://schemas.android.com/tools">
      <!-- Base application theme. -->
      <style name="Theme.AppBarLayout" parent="Theme.MaterialComponents.DayNight.NoActionBar">
          <!-- Primary brand color. -->
          <item name="colorPrimary">@color/purple_500</item>
          <item name="colorPrimaryVariant">@color/purple_700</item>
          <item name="colorOnPrimary">@color/white</item>
          <!-- Secondary brand color. -->
          <item name="colorSecondary">@color/teal_200</item>
          <item name="colorSecondaryVariant">@color/teal_700</item>
          <item name="colorOnSecondary">@color/black</item>
          <!-- Status bar color. -->
          <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
          <!-- Customize your theme here. -->
      </style>
  </resources>
  

  Here, most of part are unchanged. We have only changed name of the parent theme to Theme.MaterialComponents.DayNight.NoActionBar .

• Open res/layout/activity_main.xml file. Then, add below code in it –

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <androidx.core.widget.NestedScrollView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:layout_behavior="@string/appbar_scrolling_view_behavior">
  
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:paddingTop="30dp"
              android:paddingBottom="30dp"
              android:text="@string/scrolled_content" />
  
      </androidx.core.widget.NestedScrollView>
  
      <com.google.android.material.appbar.AppBarLayout
          android:id="@+id/appBarLayout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:theme="@style/ThemeOverlay.AppCompat.ActionBar">
  
          <androidx.appcompat.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="?attr/colorPrimary"
              android:minHeight="?attr/actionBarSize"
              android:theme="?attr/actionBarTheme"
              app:layout_anchor="@+id/appBarLayout"
              app:layout_anchorGravity="bottom|center"
              app:layout_scrollFlags="scroll|enterAlways" />
  
          <TextView
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:paddingTop="20dp"
              android:paddingBottom="20dp"
              android:text="@string/scrollable_content" />
  
      </com.google.android.material.appbar.AppBarLayout>
  
  </androidx.coordinatorlayout.widget.CoordinatorLayout>
  

  Here, we have used Toolbar, NestedScrollView with AppBarLayout. We can scroll AppBarLayout up and down. UI is scrolled accordingly.

• Now, we need to set toolBar as ActionBar. So, open MainActivity.kt and add below code in it –

  package com.tutorialwing.appbarlayout
  
  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import com.tutorialwing.appbarlayout.databinding.ActivityMainBinding
  
  class MainActivity : AppCompatActivity() {
  
  	private lateinit var binding: ActivityMainBinding
  
  	override fun onCreate(savedInstanceState: Bundle?) {
  		super.onCreate(savedInstanceState)
  
  		binding = ActivityMainBinding.inflate(layoutInflater)
  		setContentView(binding.root)
  
  		setSupportActionBar(binding.toolbar)
  	}
  }
  

Now, run the application. We will get output as below –

Different Attributes of AppBarLayout in XML

Now, we will see how to use different attributes of Android AppBarLayout using Kotlin to customise it –

Set Id of AppBarLayout

Many a time, we need id of View to access it in kotlin file or create ui relative to that view in xml file. So, we can set id of AppBarLayout using android:id attribute like below –

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout_ID"
        />

Here, we have set id of AppBarLayout as appBarLayout_ID using android:id=”” attribute. So, if we need to reference this AppBarLayout, we need to use this id – appBarLayout_ID.

Set Width of AppBarLayout

We use android:layout_width=”” attribute to set width of AppBarLayout.
We can do it as below –

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout_ID"
        android:layout_width="wrap_content"
        />

Width can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value (like 20dp, 30dp etc.).

Set Height of AppBarLayout

We use android:layout_height=”” attribute to set height of AppBarLayout.
We can do it as below –

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

Height can be either “MATCH_PARENT” or “WRAP_CONTENT” or any fixed value.

Set Padding of AppBarLayout

We use android:padding=”” attribute to set padding of AppBarLayout.
We can do it as below –

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        />

Here, we have set padding of 10dp in AppBarLayout using android:padding=”” attribute.

Set Margin of AppBarLayout

We use android:layout_margin=”” attribute to set margin of AppBarLayout.
We can do it as below –

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        />

Here, we have set margin of 10dp in AppBarLayout using android:layout_margin=”” attribute.

Set Background of AppBarLayout

We use android:background=”” attribute to set background of AppBarLayout.
We can do it as below –

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        />

Here, we have set background of color #ff0000 in AppBarLayout using android:background=”” attribute.

Set Visibility of AppBarLayout

We use android:visibility=”” attribute to set visibility of AppBarLayout.
We can do it as below –

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout_ID"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        />

Here, we have set visibility of AppBarLayout using android:visibility=”” attribute. Visibility can be of three types – gone, visible and invisible

Till now, we have see how to use android AppBarLayout using Kotlin. We have also gone through different attributes of AppBarLayout to perform certain task. Let’s have a look at list of such attributes and it’s related task.

Different Attributes of Android AppBarLayout Widget

Below are the various attributes that are used to customise android AppBarLayout Widget. However, you can check the complete list of attributes of AppBarLayout in it’s official documentation site. Here, we are going to list some of the important attributes of this widget –

Some of the popular attributes of android AppBarLayout from ViewGroup are –

We have seen different attributes of AppBarLayout and how to use it. If you wish to visit post to learn more about it

Thus, we have seen what is AppBarLayout, how can we use android AppBarLayout using Kotlin ? etc. We also went through different attributes of android AppBarLayout.