Toolbar Background Image Size

Question

I am working in android application. Actually there I have to set an image in place of toolbar. But I don't know what the exact sizes of that image. I am not asking about actionbar size. I googled it a lot but unable to find the solution.

here is my requirement

Possible duplicate of [What is the size of ActionBar in pixels?](https://stackoverflow.com/questions/7165830/what-is-the-size-of-actionbar-in-pixels) — AskNilesh, Mar 07 '18 at 06:29
Use custom layout and hide toolbar layout and put max 40-50 density pixel height. — Chirag Arora, Mar 07 '18 at 06:30
Possible duplicate of [How can I change my custom toolbar icon dynamically](https://stackoverflow.com/questions/48018662/how-can-i-change-my-custom-toolbar-icon-dynamically) — Vidhi Dave, Mar 07 '18 at 06:31
@VishvaDave I know how to use custom toolbar layout. but My question here is regarding image size to fit all place inside the toolbar layout — basha, Mar 07 '18 at 06:34
@VishvaDave again I am asking I have an image of 1200*240 size. is it possible to use this. or can i resize this? — basha, Mar 07 '18 at 06:39
@VishvaDave if i use that image with those dimensions , My application may quit in some resolutions. if I resize that , what are those five sizes ? — basha, Mar 07 '18 at 06:42
@VishvaDave if I use that I am getting quit condition in zte mobile . then why to use drawables of 5 sizes in android instead of using match parent and wrap content ? — basha, Mar 07 '18 at 07:00
@basha try this link to convert for 5 sizes https://pixplicity.com/dp-px-converter just get the size from here and then resize the image in any local software or online. — Vidhi Dave, Mar 07 '18 at 07:02
@NileshRathod, how it is exact duplicate of that question? . I am asking what are the sizes of icon to use in toolbar. I got 1200*240 image. I think it is not sufficient. Pls tell me your suggestions — basha, Mar 07 '18 at 07:02

score 0 · Answer 1 · answered Mar 07 '18 at 06:35

You can create a custom toolbar and add it to your activity

<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="@style/AppTheme.AppBarOverlay"
xmlns:android="http://schemas.android.com/apk/res/android">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <ImageView
            android:id="@+id/ivUser"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/ic_profile"
            android:layout_centerVertical="true"
            />

        <ImageView
            android:id="@+id/tvTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_logo_light"
            android:layout_centerInParent="true"
            android:padding="15dp"
            />

        <ImageView
            android:id="@+id/ivLogout"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/ic_logout"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dp"
            android:visibility="gone"
            />

    </RelativeLayout>

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

You can add this toolbar xml to your activity

<include
     layout="@layout/toolbar.xml">

Use this toolbar in activity using below code in your activity

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TextView tvTitle = (TextView) toolbar.findViewById(R.id.tvTitle);
ImageView ivUser = (ImageView) toolbar.findViewById(R.id.ivUser);
ImageView ivLogout = (ImageView) toolbar.findViewById(R.id.ivLogout);
getSupportActionBar().setDisplayShowTitleEnabled(false);

Note: Use NoActionBar theme for the activity. To disable the default toolbar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>

mrtyvz · Answer 2 · 2018-03-07T07:07:30.067

please try this code in your xml file;

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.kolektif_merta.testapp.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/layout_home_appBarLayout_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize">

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

    </RelativeLayout>

    </android.support.design.widget.AppBarLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</android.support.constraint.ConstraintLayout>

And in your java class inside onCreate method(assuming you are in activity);

    toolbar = findViewById(R.id.toolbar);
    toolbar.setBackground(ContextCompat.getDrawable(this,R.drawable.test));

Here is the test drawable is 1200x640 as you asked. Also don't forget the update styles.xml file with:

  <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

Here is the result : custom toolbar background witm image

of course you can, but it will not seem good :. I updated my answer please check it again. — mrtyvz, Mar 07 '18 at 07:08

Toolbar Background Image Size

2 Answers2