Android UI

How To Create Custom ActionBar In Android

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

About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

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