How to view pager images as free market app and others

Asked

Viewed 787 times

3

I’d like to ask you for help on how to make this layout like the Free Market app and so on, like Live Real Estate. The layout I need is equal to this image I’m putting below, It would be a Toolbar the same way and just below a view pager with those balls that pass the images and when clicking on the images they stay in fullscreen and continue with indicator balls. Below the image pager view I would put all the rest of my layout. The main part that I need your help would be the same, the slide of images with the finger dragging with ball counter and fullscreen as well. In Material Design.

Could you help me?

Slide images

android android-layout material-design

  • The doubt itself is to make that indicator attached to the ViewPager?

  • @Wakim The indicator and the view pager with material design effect together with Toolbar.

  • 1

    Hmmm, that would be the case effect with the ViewPager instead of ImageView?

  • @Wakim would be EXACTLY this effect that put on the link only with the Image Viewpager with those balls, but the effect is exactly this, the layout. I would like to help with these effects because I’m very new to Material Design. Even in my layout will have a "Fab" of "+" attached to the viewpager exactly as in the link.

  • 1

    This article will give a good basis, but I never tried to change the ImageView for ViewPager, but I think it might work... I can put an answer with the basic setup. And in this case, for the indicator I recommend using the Viewpagerindicator of Jake Wharton.

  • I’ll take a look at the bilbioteca.

Show 1 more comment

2 answers

4

Starting from the beginning, the new Google library, Design Library brings several ready-made components with some common interactions of Material Design.

Just include the library as a dependency on your 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'

Only here comes the surprise... Along with the Design Library comes another 3 that it also depends on... If you already use them, no problem. But you can bring an overhead to your app if you don’t use them.

In addition, to implement the indicators I recommend using the ViewPagerIndicator of Jake Wharton.

With this, dependency has to be included as well:

compile 'com.viewpagerindicator:library:2.4.1@aar'

But since Jakewharton didn’t publish his library as an AAR, you need to include the following repositories to your project, after the plugin declaration:

repositories {
    maven { url "http://dl.bintray.com/populov/maven" }
    mavenCentral()
}

Following the tutorial of Antonio Leiva on the CollapsingToolbarLayout

We will have the following layout (well 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>

Some remarks:

  • For the scroll effect to work, you need to use components with the Nested Scroll. I only know 2: NestedScrollView and the RecyclerView. I don’t know if the ListView or GridView work well without any customization.

  • Some components have some "crashes" during Scroll, if this occurs, recommend the library smooth-app-bar-layout that provides the same components with improved behavior.

I believe the setup of ViewPager be known, but below follows the way to connect the CirclePageIndicator and the ViewPager:

ViewPager pager = (ViewPager) findViewById(R.id.pager);

pager.setAdapter(...);

CirclePageIndicator circleIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
circleIndicator.setViewPager(pager);

Edit: Some adjustments as feedback:

1) Addition of layout_gravity="bottom" and layout_marginBottom="16p" in the CircleViewIndicator.

2) Exchange of android:layout_height of CollapsingToolbarLayout for android:layout_height="wrap_content".

There are good references about the new components:

  • I will be testing the implementation and as soon as possible, if so, I will be marking your response as correct.

  • this way it didn’t work properly the way I wanted. The View Pager indicator was up there and not at the end and a half of the picture like the Free Market one. Another point is that after the bar is fully shrunk (Made a scroll down) It does not stay in the primary color but gets background of the image. And also the Navigation Home UP icon (That arrow to return) also disappeared after placing the images in Viewpager.

  • @Wakin. Yes, I’m using: getSupportActionBar().setDisplayHomeAsUpEnabled(true);. The arrow appeared before I set the images in Viewpager. After creating Pageradapter and linking to Viewpager, it disappeared. I’ll test the other things I said. Why did you put Viewpager and Indicator inside a Framelayout?

  • I did not test, but could post an image? About the points: 1) In this case it is a matter of layout:gravity="bottom" + some layout_marginBottom="16dp" in the CircleIndicator. 2) I need to see an image to know the problem. 3) In this case, I need to see, before it appeared? Using the getSupportActionBar().setDisplayHomeAsUp(true)?. I’ll update the answer.

  • @Lucassantos I put to give the effect of zIndex, keeping the indicator above Viewpager. I think there’s a bug there, I changed the layout_height of CollapsingToolbarLayout for wrap_content.

  • did not work any of its edits. It remained different. I will try to post images and code.

  • discovered the problem. It is in the order of Childs from CollapsingToolbar. To Toolbar has to come last, that is, after the Viewpager, and not before. If you do not stay later it happens that the problem of not appearing the Up Navigation and of Toolbar do not change the color set in app:contentScrim="?attr/colorPrimary" in CollapsingToolbarLayout. Now only one thing left for me. The Circleindicator stand in the centralized position and near the bottom of ViewPager and the status bar becomes transparent when it is expanded to CollapsingToolbar.

Show 2 more comments

2


I was able to solve my problem based on the reply and comments from @Wakim. I suggest first reading his post and then seeing my code. The layout was very similar indeed as the "Whatsapp" on a contact’s profile screen.

Below is code to get Layout the way I wanted (a little different from "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>

Every detail in this code is important, even the order of Toolbar, Padding of CirclePageIndicator, etc..

Thanks @Wakim for the help.

Credits:

  1. Reply from @Wakim
  2. Toolbar animation with scroll
  3. Link indicated by @Wakim in the comments of my question

Browser other questions tagged android android-layout material-design

You are not signed in. Login or sign up in order to post.