Partindo do início, a nova biblioteca do google, Design Library
trás diversos componentes prontos com algumas interações comuns do Material Design.
Basta incluir a biblioteca como dependência no seu build.gradle
:
compile 'com.android.support:design:23.1.0'
# Outras dependencias implicitas...
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:support-v4:23.1.0'
compile 'com.android.support:recyclerview-v7:23.1.0'
Só que ai vem a surpresa... Junto com o Design Library
vem outras 3 que ela também depende... Se já utilizar elas, não tem problema. Mas pode trazer um overhead ao seu app caso não as utilize.
Além disso, para implementar os indicadores eu recomendo utilizar a ViewPagerIndicator
do Jake Wharton.
Com isso, tem que ser incluído a dependência também:
compile 'com.viewpagerindicator:library:2.4.1@aar'
Mas como o JakeWharton não publicou a biblioteca dele como um AAR, você precisa incluir os seguintes repositórios ao seu projeto, após a declaração de plugins:
repositories {
maven { url "http://dl.bintray.com/populov/maven" }
mavenCentral()
}
Seguindo do tutorial do Antonio Leiva sobre o CollapsingToolbarLayout
Vamos ter o seguinte layout (bem boilerplate :/):
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<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" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="16dp" />
</FrameLayout>
</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"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Algumas observações:
Para que o efeito de scroll funcione, você precisa usar componentes com a função de Nested Scroll
. Conheço apenas 2: NestedScrollView
e o RecyclerView
. Não sei se o ListView
ou GridView
funcionam bem sem nenhuma customização.
Alguns componentes tem alguns "travamentos" durante o Scroll, se isso ocorrer, recomendo a biblioteca smooth-app-bar-layout
que fornece os mesmos componentes com melhorias no comportamento.
Acredito que o setup do ViewPager
seja conhecido, mas abaixo segue a forma de conectar o CirclePageIndicator
e o ViewPager
:
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(...);
CirclePageIndicator circleIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
circleIndicator.setViewPager(pager);
Edit: Alguns ajustes conforme feedback:
1) Adição do layout_gravity="bottom"
e layout_marginBottom="16p"
no CircleViewIndicator
.
2) Troca do android:layout_height
do CollapsingToolbarLayout
para android:layout_height="wrap_content"
.
Existem boas referências sobre os componentes novos:
ViewPager
?ViewPager
ao invés doImageView
?ImageView
peloViewPager
, mas acho que pode funcionar... Posso colocar uma resposta com o setup básico. E nesse caso, para o indicador eu recomendo usar o ViewPagerIndicator do Jake Wharton.