Android Tool bar with example-Kotlin

We can say Toolbar or Appbar — which is used to show at the top of screen. In this view- we show generally back arrow, activity name, app icon ..etc.

Just create the new project and run the app, you can see the toolbar by default with your app name.

Default ToolBar

How it is showing by default, because after creating the project in the manifest.xml it will provides default theme to your app like below.

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.ExToolBar"/>

If you observe, theme is coming from style where we can see the actual info about theme like below.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ExToolBar" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- 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>

If you don’t want to show the toolbar, then you can replace action bar with this line.

Theme.MaterialComponents.DayNight.NoActionBar

Customizing the Tool Bar

Just use the above line to remove the default tool bar, now we will add our own custom tool bar in the activity_main.xml file like below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"/>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>

Now we have to override the NoActionBar values as per our requirement like below.

<style name="Theme.ExToolBar1" parent="Theme.MaterialComponents.DayNight.NoActionBar">
           <item name="toolbarStyle">@style/ToolBarStyle</item>

</style>

Here, the ToolBarStyle we have to define the background colors, title and subtitle text colors and sizes.

<style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">@color/black</item>
    <item name="titleTextAppearance">@style/TitleTextAppearance</item>
    <item name="subtitleTextAppearance">@style/SubTitleTextAppearance</item>
</style>

<style name="TitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">28sp</item>
    <item name="android:textColor">#38ADAE</item>
</style>

<style name="SubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">#00B7FF</item>
</style>

And add the title and subtitle to the tool bar in the xml file like below.

<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="title"
    app:subtitle="subtitle">

Now, run the app the output will be like this.

Thanks for reading this article, if you like my article please clap for me.