How do i achieve this sort of swipe navigation

Question

I have a grid layout containing multiple linear layouts. Each linear layout contains an image view and a text view. Currently all the images and their description appear on the screen but i want to create a swipe functionality which will make another set of images appear when the user swipe the screen. I want to create something just like this

what i want to achieve

Here is my xml file

  <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="4">

        <LinearLayout
            android:onClick="facility_click"
            android:id="@+id/layout_facility1"
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/fridge1"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Fridge"
                android:textAlignment="center"/>

        </LinearLayout>

        <LinearLayout
            android:onClick="facility_click"
            android:id="@+id/layout_facility2"
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/image2"
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/alarmclock" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Alarm clock"
                android:textAlignment="center"/>

        </LinearLayout>

        <LinearLayout
            android:onClick="facility_click"
            android:id="@+id/layout_facility3"
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/image3"
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/dishwasher1" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Dish washer"
                android:textAlignment="center"/>

        </LinearLayout>


        <LinearLayout
            android:onClick="facility_click"
            android:id="@+id/layout_facility4"
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/image4"
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/fridge1" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Fridge"
                android:textAlignment="center"/>

        </LinearLayout>


        <LinearLayout
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/fridge1"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Fridge"
                android:textAlignment="center"/>

        </LinearLayout>

        <LinearLayout
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/alarmclock" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Alarm clock"
                android:textAlignment="center"/>

        </LinearLayout>

        <LinearLayout
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/dishwasher1" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Dish washer"
                android:textAlignment="center"/>

        </LinearLayout>


        <LinearLayout
            android:layout_columnWeight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="100dp"
                android:layout_gravity="center"
                android:src="@drawable/fridge1" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Fridge"
                android:textAlignment="center"/>

        </LinearLayout>

    </GridLayout>

score 1 · Accepted Answer · answered Mar 26 '18 at 19:32

1

I'd guess that you need ViewPager:

https://developer.android.com/training/animation/screen-slide.html

Each "grid" will be separate fragment.

EDIT:

Also see this: it seems very simmilar to what you want to get: Android ViewPager with bottom dots

answered Mar 26 '18 at 19:32

muminers

1,190
10
19

thanks @muminers. i checked the link you sent and i'm using the post that was marked as answer for my solution but having created each grid as fragments i dont know where to hook it up with the viewpager. Can you help me out on this – johnson Mar 26 '18 at 20:36
If I understood you correctly you are asking about FragmentPagerAdapter. So here you will find good tutorial: https://guides.codepath.com/android/viewpager-with-fragmentpageradapter and also source: https://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html – muminers Mar 26 '18 at 20:45
hi @munimers. i had to do extra researches but your answer was a starting point for me. Thanks!! :) – johnson Mar 27 '18 at 13:26

score 1 · Answer 2 · answered Mar 26 '18 at 19:50

1

I would suggest you to use a RecycleView adapter and a cardView along with it....it is quite easy as compared to all the other methods. Just don't forget to add both RecycleView and cardView dependencies in you build.gradle

answered Mar 26 '18 at 19:50

jp singh

324
2
13

RecycleView is like a listView....you don't have to worry about swipe....unlike listView it can make horizontal swipes as well. – jp singh Mar 27 '18 at 13:40

How do i achieve this sort of swipe navigation

2 Answers2