Android support Toolbar not displaying custom drawable properly

Question

I'm trying to update my apps ActionBar into toolbar but I encountered some problem on customizing my Toolbar to display a custom drawable.

What I tried so far is to set my xml drawable into the Toolbar but it destroys the whole toolbar and moved the menu button down where I cannot properly see it:

Here's the drawable first:

bg_actionbar.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/bg_gradient" />
    <item android:drawable="@drawable/icon_logo" />

</layer-list>

bg_gradient is just a 9patch image gradient and same with the icon_logo.

And for my toolbar:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/actionBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@drawable/bg_actionbar"
        app:contentInsetEnd="0dp"
        app:contentInsetStart="0dp">


    </android.support.v7.widget.Toolbar>

this one pushes my menu button below and has a spacing of about 300dp on left with the icon shrinked in height.

Now I just tried to directly changed the background straight into just the png image (bg_gradient) and same thing happens. I've also tried adding an ImageView inside the Toolbar but same thing it just destroys the whole ToolBar and once again I'm lost on how I can customize this Toolbar further. Anyone has the idea? TIA.

UPDATE:

I tried adding a linear layout on the toolbar to contain the background but still it doesn't display properly on my end:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/actionBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/cherry_red"
        app:contentInsetEnd="0dp"
        app:contentInsetStart="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_actionbar"/>

    </android.support.v7.widget.Toolbar>

Here's what happened:

Additionally here's what I expected it to be:

Icon should be on center, and 9patch image as gradient since I'm having trouble on XML to have a percentage on the start mid and end colors and the navigationIcon should be on top of the gradient.

Answer 1

Hey i think this will helps because i have an app with something similar

My xml is so:

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/custom_toolbar" android:layout_width="match_parent" android:layout_height="56dp" 
android:background="@drawable/actionbar_bg" >

            <RelativeLayout android:id="@+id/toolbar_logo"
            android:layout_width="140dp" android:layout_height="40dp"
            android:background="@drawable/ic_logo"
            android:layout_gravity="left|center_vertical"
            android:clickable="true">

        </RelativeLayout>

    </android.support.v7.widget.Toolbar>

While the drawable/actionbar_bg is so:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:startColor="#FFFFFF"
                android:endColor="#4093A3"
                android:angle="90" />
        </shape>
    </item>
</layer-list>

Hope this helps you.

Answer 2

Use the below sample xml for your layout

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar_home"
        android:id="@+id/tool_bar" />

</LinearLayout>

toolbar_home.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/actionbar_icon_bg"/>

    <ImageView android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent="true"/>
</RelativeLayout>

In your Activity,

    toolbar = (Toolbar) findViewById(R.id.tool_bar);
    setSupportActionBar(toolbar); //or setActionBar(toolbar)

To get navigation icon and stuff

    toolbar.setNavigationIcon(R.drawable.btn_main_nav_selector);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true); // or getActionBar().setDisplayHomeAsUpEnabled(true);

Answer 3

.Use

Gravity on your inner View

hope it helps