Skip to content

How To Create Custom ActionBar In Android

  • by

In some cases we want to give our own branding to ActionBar For example, if you want to change the color. Unfortunately native action bar does not allow us a deep modification and ToolBar is a replacement for ActionBar but it only supported from Lollipop (Android OS version 5).
Here in this post i will show how to create custom actionbar with two button, one is back (at the left) and another is a done button (at the right). This is achieved by creating a custom xml layout.

Let’s Split Entire Process Into 4 steps

1. Select an application theme which has no action bar
2. Create a custom ActionBar xml layout
3. Add custom action bar layout into your activity layout
4. Run & Build

Select An Application Theme Which Has No Actionbar

identify your current theme

app_tag

Edit parent theme

 <style name="AppTheme" parent="android:Theme.Holo.Light.NoActionBar"> 

Create A Custom ActionBar XML Layout

action_bar_custom.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/action_bar_container"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="#fff" > 

        <ImageView
            android:id="@+id/ic_logo"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentLeft="true"
            android:adjustViewBounds="true"
            android:clickable="true"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_ab_theme_logo" />

        <ImageView
            android:id="@+id/icon_done"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"           
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:adjustViewBounds="true"
            android:clickable="true"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_action_action_done" />
 

</RelativeLayout>

Add Custom ActionBar Layout Into Your Activity Layout

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/super_wrapper"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/action_bar_container"
        layout="@layout/include_action_bar_gallery"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:layout_alignParentTop="true" />

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Hello Android!"
        android:textColor="#000"
        android:textSize="30sp" />

</RelativeLayout>

Set Layout To Activity

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    //rest of the code...

Build & Run

Capture11

Leave a Reply

Your email address will not be published. Required fields are marked *