Create android app with left and right flip views in Kotlin – ViewPager and Fragments

Today we are learning to make swipe-able views in android app with Kotlin code/language. This is what we will get by the end of the tutorial in few seconds.

Understanding the concept

As we know that whatever we see on screen is called “view”, I think it won’t be wrong if I say that we are moving from one view to the other or in simple words we are moving screens.

In android however, to the extent I have learnt so far, when I say we will be flipping screens, we are basically jumping fragment to fragment. So each screen is a separate fragment that requires separate formatting.

However, to make the left right flip possible we need a holder for fragments and this is where ViewPager enters the game.

I believe that fragments are not separate activity as per my understanding and they are only a standalone layout or interface that goes over particular activity. But this is still to be confirmed and much more to be learnt about fragments still.

Creating Swipe Views in Android Kotlin App

Fire up Android studio and make a new project with empty activity and let the IDE do its thing. Once the gradle build is complete we are set to proceed with our steps.

Step 1: Go to res > layout > activity_main.xml file and open it. Go to design tab of the xml file and change the TextView to ViewPager as shown in the following illustration. Also name the Id as: pager.

Step 2: Now lets make the screens or actually called fragments. Go to app > java > right click first folder out of three > new > Fragment > Click Fragment (Blank).

Give it a name Fragment1. Leaving “Create laypout XML” untick other two check boxes and select kotlin as source language. Click Finish. You must have two new files now:

  1. Fragment1 class under java
  2. fragment1 xml under layout

Go to fragment.xml and design it the way you like. I kept it simple for understanding and only have TextView with id screen1 and a bit of text value to show.

Step 3: Repeat step 2 for as many fragments you like however, for the purpose of this tutorial keep the number of fragments to three. And remember if you like to format the view of each fragment you have to do it with their relevant XML file. As I mentioned earlier, I kept it simple for this tutorial.

Now that we have created the fragments, time to feed PagerView with these fragments.

Again, our intention is to show different screens by flipping left and right. And we are calling them fragments. However, to plug fragments to view we need adapter. Adapter is simply a “tool” by which you plug the data held by fragment to show up on screen and on screen we know we need to have a certain view and in this case it is ViewPager that we just created in step 1.

So in short, to show the fragments in ViewPager we need a specific adapter and the one we need today is called FragmentStatePagerAdapter. However, before we get to this adapter we need to declare a class calling FragmentManager.

Step 4: Go to app > java > right click first folder out of three > new > click Kotlin File/Class. Give it an appropriate name. I gave it PagerAdapter. Click OK. This will insert a new file. This file will hold the adapter.

Step 5: Double click to open the PagerAdapter file and insert the following code:

After you paste code, you might see a pop up asking you to import necessary libraries click OK and your code should be error free. If not then simply click the errors and hit ALT+Enter to import the required libraries.

You can write it all by yourself if you learn how to navigate and implement. It is all explained in the video with this tutorial.

Now that we have the adapter in place, though of no use yet, we need to implement the two functions that come with the FragmentManager.

First function, in simple words is identifying which fragment out of total specified is shown on screen. As we will have three so at one time a screen can show only one out of three possible fragments.

In order to keep track of which fragment to show on flip right and left, we assign each fragment a particular number or in other words, each number out of total is assigned to particular fragment. Its like giving roll numbers to students in a large class. It is difficult to remember each student by its name, having students assigned specific roll numbers, we can seat all students in particular order every day!

Step 6: In the body of getItem function paste the following code:

For getItem function we have variable “position” as the parameter of type Int i.e. it will give us numbers; 0, 1 and 2 etc.

For each number we want to have specific fragment. This is where When condition helps us, if the value of position is 0 then show Fragment1. If the value of the variable is 1 then show Fragment2, otherwise show Fragment3.

Step 7: Second function of getCount is simply fetching the total number of fragments we are expecting. Here we can manually provide the number for now. So the body of getCount will have following:

Step 8: Now that we have adapter ready to feed PagerView with fragments, we have to  call it in MainActivity so that they are executed as part of activity. For this we need to add the following to onCreate function body:

And here is your app with three screens flip-able left and right at your will!

Leave a Reply

Your email address will not be published. Required fields are marked *