Skip to main content

How to create a custom toolbar in Kotlin Android

How to create a custom toolbar in Kotlin Android.

Here is a step-by-step tutorial on how to create a custom toolbar in Kotlin Android.

Step 1: Create a new project​

Start by creating a new Android project in Android Studio. Choose an empty activity template for simplicity.

Step 2: Design the toolbar layout​

In the res/layout folder, create a new XML layout file for the custom toolbar. For example, you can name it toolbar_layout.xml. Open the file and add the following code:

<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:titleTextColor="@android:color/white">
</androidx.appcompat.widget.Toolbar>

This code creates a basic toolbar with a background color, elevation, and theme. Adjust the attributes as per your needs.

Step 3: Include the toolbar in the activity layout​

Open the activity layout XML file (e.g., activity_main.xml) and add the following code to include the custom toolbar:

<include
    android:id="@+id/app_bar"
    layout="@layout/toolbar_layout" />

This code includes the custom toolbar layout in the activity layout.

Step 4: Configure the toolbar in the activity​

Open the main activity Kotlin file (e.g., MainActivity.kt) and add the following code inside the onCreate method:

val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
supportActionBar?.title = "Custom Toolbar"

This code finds the toolbar view by its ID, sets it as the support action bar, and sets the title for the toolbar.

Step 5: Add menu items to the toolbar​

To add menu items to the toolbar, create a new XML file (e.g., menu_toolbar.xml) in the res/menu folder. Open the file and add the following code:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item1"
        android:title="Item 1"
        android:icon="@drawable/ic_item1"
        android:showAsAction="always" />
    <item
        android:id="@+id/menu_item2"
        android:title="Item 2"
        android:icon="@drawable/ic_item2"
        android:showAsAction="always" />
</menu>

This code defines two menu items with titles, icons, and the showAsAction attribute set to "always" to display them in the toolbar.

Step 6: Inflate the menu in the activity​

In the main activity Kotlin file, add the following code inside the onCreateOptionsMenu method:

menuInflater.inflate(R.menu.menu_toolbar, menu)
return true

This code inflates the menu XML file and adds the items to the toolbar.

Step 7: Handle menu item clicks​

To handle menu item clicks, add the following code inside the onOptionsItemSelected method in the main activity Kotlin file:

when (item.itemId) {
    R.id.menu_item1 -> {
        // Handle menu item 1 click
        return true
    }
    R.id.menu_item2 -> {
        // Handle menu item 2 click
        return true
    }
    else -> return super.onOptionsItemSelected(item)
}

Replace the comments with the desired functionality for each menu item.

Step 8: Run the app​

Finally, run the app on an emulator or a physical device to see the custom toolbar in action. You should see the toolbar at the top of the screen with the specified title and menu items.

That's it! You have successfully created a custom toolbar in Kotlin Android. Feel free to customize the toolbar layout, menu items, and functionality as per your app's requirements.