Android ActionBar with custom Icons?

Question

I want to create a Android ActionBar which looks like the following.

How can I build such a ActionBar. Is it possible to build it with Android material Design?

Answer 1

I would use the new ToolBar from Android Design Support Library

http://android-developers.blogspot.it/2015/05/android-design-support-library.html

Using ToolBar instead of ActionBar will give you more control on the elements themselves.

You can find a good article here:

http://www.android4devs.com/2014/12/how-to-make-material-design-app.html

app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#3F51B5"
    android:theme="@style/ThemeOverlay.AppCompat.Dark" >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.design.widget.TabLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:id="@+id/tabLayout"/>
    </FrameLayout>
</android.support.v7.widget.Toolbar>

main_activity_layout.xml

<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="wrap_content"
    tools:context=".MainActivity">
    <include layout="@layout/app_bar" />
</RelativeLayout>

main_activity_onCreate()

toolBar = (Toolbar) findViewById(R.id.appBar);
toolBar.setTitle("Titolo");
setSupportActionBar(toolBar);

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_2));

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
</style>

Answer 2

Technically you could stitch together such a layout with multiple elements. For example you have a header layout containing a TabLayout on the left and a Toolbar on the right side, instead of using the standard ActionBar.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:orientation="horizontal">

    <android.support.design.widget.TabLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <android.support.v7.widget.Toolbar
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

</LinearLayout>

This example uses the AppCompat v7 and the Design Support library.

You may style the Views in a way (eg same background color) such that it looks as if its one single UI element.