Clever Geek Handbook

Adding fading canvas to CollapsingToolbarLayout

How do you get the fading canvas in the Layout CollapsingToolbar header?

I have successfully set the size and color of the text using the attribute app:expandedTitleTextAppearance

, but cannot figure out how to pass the background text.

I know this is possible because I can see that WhatsApp did it on the Group Info screen.

+3


source to share


4 answers


The only way I was able to do this was to place the view behind the toolbar like this:

<View
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="@drawable/shape_scrim"
     android:layout_gravity="bottom"/>

<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"
     app:layout_collapseMode="pin"/>


With shape_scrim.xml it looks like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="90"
    android:endColor="#00000000"
    android:startColor="#BB000000"/>
</shape>
+10


source


The bkurzius implementation worked for me after I added the z-axis translation value to the view containing the shape_scrim.



<View
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="@drawable/shape_scrim"
     android:layout_gravity="bottom"
     android:translationZ="8dp"/>

<ImageView
    ...
    ... />
+2


source


Thanks bkurzius, your implementation worked for me after I changed shape_scrim.xml like this (makes a fade effect from top to bottom of its container), source code:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="#BB000000"
        android:startColor="#00000000"/>
</shape>

And my CollapsingToolbar looks like this:

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapser"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.ViewStubCompat
                android:id="@+id/background_collapsing_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@drawable/shape_scrim"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/CustomActionBar" />

        </android.support.design.widget.CollapsingToolbarLayout>
0


source


Another way is to use the app: contentScrim = ""

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:minHeight="?attr/actionBarSize"
    android:gravity="bottom"
    android:theme="@style/AppTheme.AppBarOverlay">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        **app:contentScrim="@color/colorPrimary"**
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageViewGroupAvatar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="centerCrop"
                android:src="@drawable/bonga_avatar"
                app:layout_collapseMode="parallax" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/imageview_background_gradient_profile" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end|bottom"
                android:layout_marginRight="@dimen/eight_margin"
                android:padding="@dimen/eight_margin"
                android:tint="#901E78"
                app:srcCompat="@drawable/ic_camera" />

        </FrameLayout>

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center|left"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/toolbarTextViewGroupName"
                    style="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    tools:text="Group Profile" />

            </LinearLayout>
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>
0


source






More articles:


All Articles