Set logo as toolbar background in Android

Question

I am attempting to set a logo as background in an Android toolbar. I've tried to put the image as a layer directly in the toolbar but this results in the logo not being centered. Here is the code I've got right now:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@drawable/Toolbar_background"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>

And for the drawable Toolbar_background:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="?attr/colorPrimary" />
    </shape>
  </item>
  <item>
    <bitmap
        android:contentDescription="Unleashed logo"
        android:src="@drawable/unleashed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dp"
        android:paddingBottom="10dp" />
  </item>
</layer-list>

This works but the logo is stretched in width and no padding is aplied, the bitmap takes up all spaces it can get.

https://www.imgdumper.nl/uploads9/5a796ede6c77c/5a796ede6bd4d-Capture.PNG

Answer 1

You can create custom toolbar.
Check below code.

toolbar_bg_image.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@color/colorAccent"
        app:contentInsetEnd="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/toolbarTheme">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="@dimen/_4sdp"
            android:paddingRight="@dimen/_4sdp"
            android:paddingStart="@dimen/_4sdp"
            android:paddingEnd="@dimen/_4sdp"
            android:layout_marginLeft="@dimen/_20sdp"
            android:layout_marginRight="@dimen/_20sdp"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/unlashed"/>

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

I suggest you to take your image without background and set background color as per your requirement in android:background="@color/colorAccent" property of toolbar.

You can also set margin and padding in ImageView as per your requirement.

Now you can include this toolbar in your layout file as below.

fragment_or_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="vertical">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar_bg_image" />

    </LinearLayout>
</layout>