Hamburger icon background image Toolbar

Question

I want to make background image under the navigation hamburger icon like Freelancer app

I tried that code but the image appears right of the title text

<android.support.v7.widget.Toolbar
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/tb_ic"
            android:scaleType="center"
            android:src="@drawable/ic_toolbar_img" />

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

How to achieve that?

Answer 1

You may try using a layer-list drawable as your background, by setting the following in your toolbar: android:background="@drawable/toolbar_background"

and adding the following drawable -

drawable/toolbar_background.xml

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>

    <item android:top="1dp" android:left="1dp">
        <bitmap
            android:src="@drawable/ic_toolbar_img"
            android:gravity="top|left" />
    </item>
</layer-list>