3

Gostaria de pedir ajuda de vocês sobre como fazer este layout que nem do app Mercado Livre e outros por aí, como Viva real Imóveis. O layout que eu preciso é igual a esta imagem que estou colocando abaixo, Seria uma toolbar do mesmo jeito e logo abaixo um view pager com aquelas bolinhas que passam as imagens e ao clicar nas imagens elas ficam em fullscreen e continuam com bolinhas indicadoras. Abaixo do view pager de imagens eu colocaria todo o resto do meu layout. A parte principal que preciso da ajuda de vocês seria essa mesmo, do slide de imagens com o arrastar dos dedos com contador de bolinhas e fullscreen também. Em material Design.

Poderiam me ajudar?

Slide images

6
  • A dúvida em si é fazer aquele indicador atrelado ao ViewPager?
    – Wakim
    17/10/2015 às 21:24
  • @Wakim O indicador e o view pager com efeito de material design junto com a toolbar.
    – Ghost
    17/10/2015 às 21:26
  • 1
    Hmmm, seria no caso esse efeito com o ViewPager ao invés do ImageView?
    – Wakim
    17/10/2015 às 21:28
  • @Wakim seria EXATAMENTE este efeito que colocou no link só que com o ViewPager de Imagens com aquelas bolinhas, mas o efeito é exatamente este, o layout. Gostaria de ajuda com esses efeitos pois sou muito novo no Material Design ainda. Inclusive no meu layout vai ter uma "fab" de "+" atrelado ao viewpager exatamente como no link.
    – Ghost
    17/10/2015 às 21:51
  • 1
    Esse artigo vai dar uma boa base, mas eu nunca tentei trocar o ImageView pelo ViewPager, 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.
    – Wakim
    17/10/2015 às 21:53

2 Respostas 2

4

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:

7
  • Estarei testando a implementação e assim que possível, caso seja desta forma, estarei marcando sua resposta como correta.
    – Ghost
    18/10/2015 às 4:27
  • desta forma não funcionou corretamente do jeito que eu queria. O indicador do View Pager ficou lá em cima e não no final e meio da foto como e o do Mercado Livre. Outro ponto é que depois que a barra está totalmente encolhida (Feito um scroll para baixo) Ela não fica na cor primária e sim fica com fundo da imagem. E também o ícone de Navigation Home UP (Aquela seta para voltar) também sumiu após colocar as imagens no ViewPager.
    – Ghost
    23/10/2015 às 15:52
  • @Wakin. Sim, estou utilizando: getSupportActionBar().setDisplayHomeAsUpEnabled(true);. A seta aparecia antes de eu definir as imagens no ViewPager. Após criar o PagerAdapter e vincular ao ViewPager, ela sumiu. Vou testar as outras coisas que disse. Por que você colocou o ViewPager e o Indicator dentro de um FrameLayout?
    – Ghost
    23/10/2015 às 16:03
  • Não cheguei a testar, mas poderia postar uma imagem? Sobre os pontos: 1) Nesse caso é uma questão de layout:gravity="bottom" + algum layout_marginBottom="16dp" no CircleIndicator. 2) Preciso ver uma imagem para saber o problema. 3) Nesse caso, preciso ver, antes ela aparecia? Esta usando o getSupportActionBar().setDisplayHomeAsUp(true)?. Vou atualizar a resposta.
    – Wakim
    23/10/2015 às 16:03
  • @LucasSantos Coloquei pra dar o efeito de zIndex, mantendo o indicator por cima do ViewPager. Acho que tem um bug ali, troquei o layout_height do CollapsingToolbarLayout para wrap_content.
    – Wakim
    23/10/2015 às 16:03
2

Consegui resolver meu problema com base na resposta e comentários do @Wakim. Sugiro primeiro ler o post dele para depois ver o meu código. O Layout ficou bem parecido na verdade como o "WhatsApp" na tela de perfil de um contato.

Segue abaixo código para ficar com Layout do jeito que eu queria (um pouco diferente do "MercadoLivre")

<?xml version="1.0" encoding="utf-8"?>
<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="300dp"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

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

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"/>

            <com.viewpagerindicator.CirclePageIndicator
                android:id="@+id/pagerIndicator"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:layout_gravity="center|bottom"
                android:fitsSystemWindows="true"
                android:layout_marginBottom="16dp"/>

        </FrameLayout>

        <android.support.v7.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"/>

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

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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/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.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"
    android:src="@drawable/ic_image_photo_camera"
    app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right|end"/>

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

Cada detalhe neste código é importante, até mesmo a ordem da Toolbar, Padding do CirclePageIndicator, etc.

Obrigado @Wakim pela ajuda.

Créditos:

  1. Resposta do @Wakim
  2. Animação da Toolbar com scroll
  3. Link indicado pelo @Wakim nos comentários da minha pergunta

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .