Chapter 25. Advanced UI with Paging and Swiping

Paging is the act of moving from page to page, and, on Android, we do this by swiping a finger across the screen. The current page then transitions in a direction and speed to match the finger movement. It is a useful and practical way to navigate around an app, but perhaps even more than this, it is an extremely satisfying visual effect for the user. Also, like RecyclerView, we can selectively load just the data required for the current page and perhaps the data for the previous and following pages in anticipation.

The Android API, as you would have come to expect, has a few solutions for achieving paging in a quite simple manner.

In this chapter, we will learn to do the following:

• Achieve paging and swiping with images like you might find in a photo gallery app

• Implement paging and swiping with Fragment-based layouts, giving the potential to offer our users the ability to swipe their way through a selection of entire user interfaces

First, let...

The Angry Birds classic swipe menu

Here, we can see the famous Angry Birds level selection menu showing swiping/paging in action:

Let's build two paging apps: one with images, and one with Fragment instances.

Building an image gallery/slider app

Create a new project in Android Studio called Image Pager. Use the Empty Activity template and leave the remainder of the settings at their defaults.

These images are located in the download bundle in the Chapter25/Image Pager/drawable folder. The following diagram shows them in Windows Explorer:

Add the images to the drawable folder in the project explorer or, of course, you could add more interesting images, perhaps some photos you have taken.

Implementing the layout

For a simple image paging app, we use the PagerAdapter class. We can think of this as being like RecyclerApater but for images, as it will handle the display of an array of images in a ViewPager widget. This is much like RecyclerAdapter, which handles the display of the content of an ArrayList in a RecyclerView. All we need to do is override the appropriate functions.

To implement an image gallery with PagerAdapter, we first need a ViewPager widget in our main layout. So, you can see precisely...

Kotlin companion objects

A companion object is similar in syntax to an inner class because we declare it inside a regular class, but note we refer to it as an object, not a class. This implies it is in itself an instance as opposed to a blueprint for an instance. This is exactly what it is. When we declare a companion object inside a class, its properties and functions are shared by all instances of the regular class. It is perfect when we want a bunch of regular classes to share one set of related data. We will see a companion object in action in the next app, and also in the Age database app in the penultimate chapter.

Building a Fragment Pager/slider app

We can put whole Fragment instances as pages in a PagerAdapter. This is quite powerful because, as we know, a Fragment instance can have a large amount of functionality – even a fully-fledged UI.

To keep the code short and straightforward, we will add a single TextView to each Fragment layout, just to demonstrate that the pager is working. When we see how easy it is to get a reference to the TextView, however, it should be obvious how we could easily add any layout we have learned so far and then let the user interact with it.

Note

In the next project, we will see yet another way to display multiple Fragment instances, NavigationView, and we will actually implement multiple coded Fragment instances.

The first thing we will do is build the content for the slider. In this case, of course, the content is an instance of Fragment. We will build one simple class called SimpleFragment, and one simple layout called fragment_layout.

You might think this implies that...

Summary

In this chapter, we saw that we can use pagers for simple image galleries or for swiping through complex pages of an entire UI, although we demonstrated this by means of a very simple TextView.

In the next chapter, we will look at another really cool UI element that is used in many of the latest Android apps, probably because it looks great and is a real pleasure, as well as extremely practical to use. Let's take a look at NavigationView.