android toolbar: how to have a toolbar with image in the background and menu items on top

Question

Using material design how to create a toolbar with background image.

the following is what i want:

I am trying the following code:

<?xml version="1.0" encoding="utf-8"?>
<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="200dp"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp" 
    android:minHeight="200dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageViewplaces"
        android:src="@drawable/puri" 
        android:layout_gravity="center"/>

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

and what i am getting is:

Stans

tried using 'background' attribute rather than 'src'? – Michelsen

I tried. Its the same. the image dont cover the entier toolbar area. – Stans

use android:layout_width="match_parent" for ImageView as Toolbar is match_parent so in order to apply image all over Toolbar. You should modify ImageView width to match_parent. wrap_content will display image width and height according to image provided in ImageView – Ohmage

I tried that still image does not occupy full toolbar. First of all is it possible. To place menu items and child views relatively in toolbar – Stans

Answer 1

If you insist on using an ImageView over using the .setBackground(...) function.

You can try using a RelativeLayout with the Toolbar overlaying an ImageView like this:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageViewplaces"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/YOUR_IMAGE" />

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar_actionbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

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


</RelativeLayout>

Erect

where to mention the heights for the toolbar – Stans

The android:adjustViewBounds="true" property of the ImageView will scale the Image to fit the window. This means the relationship between the width and height of your source image is kept, wile the layout_width is being stretched to match_parent witch is the width of the screen in this case – Erect

Answer 2

A more proper solution would be to use an AppBarLayout:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarlayout"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:src="@drawable/bg"
        android:scaleType="centerCrop"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </RelativeLayout>
</android.support.design.widget.AppBarLayout>

Stocker

Answer 3

Instead of adding an element with the image to the toolbar add the image as background of the toolbar, code below.

<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="200dp"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp"
    android:background="@drawable/puri"
    android:minHeight="200dp">

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

If you want to change it in java code, you can call toolbar.setBackground(ContextCompat.getDrawable(yourcontext, R.drawable/puri);

Lastex

I can add that way. I knew that. But i want to add it using imageview. I want image to be a seperate view. So that i can use croping and scaling easily – Stans

Okey, sorry. For ImageViews you can set the scaleType attribute with the value centerCrop, or another value, have you tried it already? And also, why are you setting the layout_width to wrap_content? – Lastex