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:
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: