How to customize the ActionBar in Kotlin Android

How to customize the ActionBar in Kotlin Android.

Here's a step-by-step tutorial on how to customize the ActionBar in Kotlin Android:

Step 1: Set up a new Android project

Open Android Studio and create a new project.
Choose an empty activity template and set the project details.
Click "Finish" to create the project.

Step 2: Customize the ActionBar layout

Open the res folder in the project structure and navigate to res/layout.
Right-click on the layout folder and select "New" -> "Layout resource file".
Give the file a name, such as custom_actionbar_layout.xml, and click "OK".

In the XML file, define the layout for your custom ActionBar. For example, you can use a Toolbar widget and add any desired views or styling.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="4dp">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:text="Custom ActionBar" />

</androidx.appcompat.widget.Toolbar>

Step 3: Update the activity layout

Open the activity_main.xml layout file (or your desired activity layout).

Replace the existing Toolbar with the custom layout you created.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <include
        android:id="@+id/custom_toolbar"
        layout="@layout/custom_actionbar_layout" />

    <!-- Your remaining activity content goes here -->

</RelativeLayout>

Step 4: Set the custom ActionBar in the activity

Open the MainActivity.kt file (or your desired activity class).

Import the necessary classes at the top of the file.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.Toolbar

Inside the onCreate() method, retrieve the custom Toolbar from the layout and set it as the ActionBar.

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

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

Step 5: Customize the ActionBar further

To add a back button in the ActionBar, call supportActionBar?.setDisplayHomeAsUpEnabled(true) in the onCreate() method.

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

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

    supportActionBar?.setDisplayHomeAsUpEnabled(true)
}

To handle the back button click event, override the onOptionsItemSelected() method and check for the android.R.id.home item.

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    when (item.itemId) {
        android.R.id.home -> {
            // Handle back button click
            onBackPressed()
            return true
        }
    }
    return super.onOptionsItemSelected(item)
}

That's it! You have successfully customized the ActionBar in Kotlin Android. Feel free to modify the custom layout and add more functionality as per your requirements.