2

I'm trying to display an ImageView spanning the entire toolbar (I can't use background). here's my ToolBar layout:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="@dimen/appbar_height"
    android:background="@drawable/backgorund_toolbar_tranluscent">

    <android.support.v7.widget.Toolbar
        style="@style/ToolBarStyle"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/material_grey_700"
        app:contentInsetStartWithNavigation="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetLeft="0dp"
        android:minHeight="@dimen/appbar_height">

        <android.support.percent.PercentRelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/thumbnail"
                app:layout_widthPercent="100%"
                app:layout_aspectRatio="178%"
                android:scaleType="centerCrop"
                android:background="@color/material_grey_700"
                tools:ignore="ContentDescription" />

            <RelativeLayout
                android:layout_alignBottom="@id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/title"
                    android:layout_alignParentTop="true"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:maxLines="3"
                    android:ellipsize="end"
                    android:textColor="@color/app_primary_text_default_material_dark"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                <LinearLayout
                    android:id="@+id/details"
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/title"
                    android:paddingLeft="8dp"
                    android:paddingRight="8dp"
                    android:paddingBottom="8dp">

                    <TextView
                        android:id="@+id/uploader"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:textColor="@color/app_primary_text_default_material_dark"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

                    <TextView
                        android:id="@+id/duration"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="4"
                        android:gravity="end"
                        android:textColor="@color/app_primary_text_default_material_dark"
                        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
                </LinearLayout>

                <me.zhanghai.android.materialprogressbar.MaterialProgressBar
                    android:id="@+id/progress"
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:layout_below="@id/details"
                    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
                    app:mpb_progressStyle="horizontal"
                    app:mpb_useIntrinsicPadding="false"
                    android:indeterminate="false"/>
            </RelativeLayout>
        </android.support.percent.PercentRelativeLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

As you can see I have added

        app:contentInsetStartWithNavigation="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetLeft="0dp"

as suggested by answers to many similer questions. I'm still getting an inset on the left side.

I'm using the following code in setting up ActionBar:

    ActionBar actionBar = getSupportActionBar();
    if (actionBar != null) {
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setDisplayShowTitleEnabled(false);
    }

FYI, actionBar.setDisplayHomeAsUpEnabled(false)removes the inset and along with it the navigation up icon, which is not acceptable. Any way I can fix it other than adding my own custom up icon?

FYI2, @style/ToolBarStyle just inherits from Theme.AppCompat.

1 Answer 1

1

The contentInsets work right, but an offset appears if you want to show up button and setDisplayHomeAsUpEnabled to true. As I understand, insets define additional paddings, not start position of Toolbar's content.

Workaround:

What about redesign so that AppBarLayout contains your custom background, Toolbar (with transparent background) retains your complex title and insert ProgressBar wherever you want.

Something like this:

<AppBarLayout
    android:background="@color/material_grey_700">

    <!-- Just a Toolbar wrapper -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

       <!-- Background of Toolbar -->
       <ImageView
           android:id="@+id/thumbnail"/>

       <Toolbar
           android:id="@+id/toolbar"
           android:background="@android:color/transparent">

           <!-- Your multiline title stuff stays here. -->

       </Toolbar>

    </FrameLayout>

</AppBarLayout>
2
  • It fixes the image but the text and progress bar alignment is wrong.
    – Binoy Babu
    Oct 20, 2016 at 19:05
  • @Binoy add a picture to show what you want to achieve. I'll try to help tomorrow :) Oct 20, 2016 at 19:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.