0
Arthur, in the case of this image that you put, it uses a CollapsingToolbarLayout
. If you want the same effect present in the image, do the following:
Add dependencies to 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 the 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>
Note that in the example we use a CoordinatorLayout
, he is responsible for coordinating all the work between the views within him, including the effect you want on Toolbar.
In the NestedScrollView
we use the app:layout_behavior="@string/appbar_scrolling_view_behavior"
so that you have the effect of expanding and saving Toolbar as the user moves the list on the screen.
If you want too, it is possible to make the layout always expanded, like your image.
See more on the links below:
I tried to do it here, but when I try to add the build.Radle gives the following error:
cError:(25, 13) Failed to resolve: com.android.support:design:23.4.0
<a href="install.m2.repo">Install Repository and sync project</a><br><a href="openFile:C:/Users/artur/Desktop/CollapsingToolbarLayout/app/build.gradle">Show in File</a><br><a href="open.dependency.in.project.structure">Show in Project Structure dialog</a>
– Artur Mafezzoli Júnior
Click the error link to install the repository, or open the SDK Manager and update the Android Support Library.
– Vitor Henrique
Yes, it was the first thing I saw. He asks to leave Android Studio and soon after opens the SDK Manager, but there all the repositories are already installed. Nothing to install or update.
– Artur Mafezzoli Júnior
What version is installed in your Support Library?
– Vitor Henrique
Version 30. when I open the SDK Manager it gives an error.
Fetching https://dl.google.com/android/repository/addons_list-2.xml
Fetching URL: https://dl.google.com/android/repository/repository-11.xml
Fetching https://dl.google.com/android/repository/addons_list-2.xml
Failed to fetch URL https://dl.google.com/android/repository/addons_list-2.xml, reason: peer not authenticated
Fetching URL: https://dl.google.com/android/repository/repository-11.xml
Failed to fetch URL https://dl.google.com/android/repository/repository-11.xml, reason: SSLPeerUnverified peer not authenticated


– Artur Mafezzoli Júnior
Try to put the latest version 24.0.0 in place of 23.4.0. As for the SDK manager error, go to tools > options and check "Force https://... sources to be fetched using http"
– Vitor Henrique
I managed to fix it. I had it installed directly by android studio, I didn’t go to the SDK Manager. Now I don’t understand what you said. You want me to put my Toolbar inside this xml ?
– Artur Mafezzoli Júnior
See again the xml of
Activity
, has a Toolbar inside theCollapsingToolbarLayout
, you can replace it with yours, just don’t forget to add the effect:app:layout_collapseMode="parallax"
. You’d better create a new project with this code so you can learn more about this layout, and then implement it into yours. Take a look at this one. gif to see effect working: http://androcode.es/wp-content/uploads/2015/10/simple_coordinator.gif– Vitor Henrique
Leonardo. Thank you for your help. I will delve further into this subject Collapsing Toolbars.
– Artur Mafezzoli Júnior