Transparent Toolbar in an activity only

0

I have an xml called toolbar, and I reuse it on all my screens by calling

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

On a specific screen I would like the toolbar to be transparent, but with a slight shading.

As in the image below:

    
asked by anonymous 30.06.2016 / 12:54

1 answer

1

Artur, in the case of this image you have placed, it uses CollapsingToolbarLayout . If you want the same effect as the image, do the following:

Add dependencies on your build.gradle :

build.gradle

compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.4.0'

In your activity you want to have the effect, you will need to put your toolbar inside CollapsingToolbarLayout :

MainActivity.java

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/MyAppbar"
        android:layout_width="match_parent"
        android:layout_height="256dp" <!-- height of appbar -->
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:background="@color/colorPrimary"
            android:fitsSystemWindows="true">

            <android.support.v7.widget.Toolbar
                android:id="@+id/MyToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Coloque seus componentes aqui -->

    </android.support.v4.widget.NestedScrollView>

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

See that in the example we use a CoordinatorLayout , it is responsible for coordinating all the work between the views within it, including the effect you want on the toolbar .

In%% use NestedScrollView so you have the effect of expanding and saving the toolbar as the user moves the list on the screen.

If you want too, you can make the layout always expand like your image.

See more in the links below:

Collapsing Toolbars Android Example

Mastering the Coordinator Layout

    
30.06.2016 / 14:03