Tutorial – How To Create Swipe Views With Tabs In Android

Hello Readers

I have been making progress on my summarizer app lately. During these past couple of days I implemented a feature which lets the user swipe views as an alternative to having to tap on the tabs. This makes it more easy to swap between tabs.

Swipe between URL and Text input
Swipe between URL and Text input

Here’s How You Can Do It Too

If you’re like me, explaining something complex is facilitated by using metaphors. So I am going to do my best to explain this by making use of them.

Note:  The code I use in this tutorial can be found at developer.android. But since the explanation there is kind of dry, I will try to expand on it with my own words.

ViewPager – The Book

let’s talk about a ViewPager, one of the elements you will need in order to create swipe views. A ViewPager is like a Book. A book is nice, right? It consists of pages, which have lots of information in them.  So just keep that in mind, A ViewPager is like a book.

What is it really though? A ViewPager is a layout manager. It allows users to flip pages, which in our case are sub-activities appearing under each tab.

Let’s start by defining one in XML, create a new android XML file, name it “activity_collection_demo” and paste the following code in it:

This will be the layout used in the activity in which you want to implement your swipe views.

PagerAdapter – The Book Manager

Imagine the PagerAdapter as a person who inserts pages into a book. Without him, you would just have the book cover. He also handles in what order the pages are going to be in.

PagerAdapter is an abstract class, so we need to use one of its childs. In this case we are using FragmentStatePagerAdapter.

Fragment- The Page

We have a book, we have the person inserting pages and managing them. We just need the actual pages. Fragments are our pages. Remember how I said “sub-activities under each tab” earlier on? The correct word is fragment.

You can see it this way: A fragment is a sub-activity, usually one under each tab if there are tabs in the activity. So if you have 4 tabs in one activity, you have 4 fragments in that activity. I guess they chose to call them fragments because they are just a fragment, as in a part of an activity.

You should define an Android XML layout for each fragment, just as how you define a layout for an activity. You can also have multiple fragments using the same layout. So go ahead and define the ones you need.

Combining Everything

Now that you have the book, the book manager and the pages let me show how to combine them. The tabs are going to be added later on.

You will use three clasess, I will try to explain (remember I’m no expert at this) almost line by line so I will take one class at a time and talk about it.

Here we are creating a class called CollectionDemoActivity, which extends a FragmentActivity.  “collection” refers to a collection of fragments. You need to inherit FragmentActivity to be able to use fragments. And yes, you do need them, remember they are the pages, without them there is no shiny swiping!

Next up we define an object called mDemoCollectionPagerAdapter. This is a self made class which I will talk about later. Then we also define an object called mViewPager from the class ViewPager, you already know what this object does.

We move on to the onCreate() method of the activity. First thing we do is set the content view to the activity layout that we defined earlier on. This layout serves to tell the system that it has a viewpager. Second, we instantiate both the DemoCollectionPagerAdapter (and pass a fragmentmanager object as arguement) and the Viewpager. Lastly, we call the setAdapter method from the mViewPager object, and pass the mDemoCollectionPagerAdapter object as an arguement. This is saying that your viewpager object is going to have the mDemoCollectionPagerAdapter as it’s adapter. In other words, the book is assigning a book manager to handle his pages.

The fragmentmanager we passed as an arguement to the pageradapter is an object that belongs to the FragmentActivity class. Since we are extending our class to a FragmentActivity, we can make use of FragmentManager.

Let’s move on.

This public class DemoCollectionPagerAdapter extends the FragmentStatePagerAdapter class. You have to implement your own class as FragmentStatePagerAdapater is abstract. You can name it what you want, it represents the The Book Manager (PagerAdapter).

The first method just passes the fragmentmanager on to its superclass.

The second method, getItem, gets the fragment (the page) that you want. This is done by first instantiating the fragment object from another nested class we will define later on. Next an integer is added as an arguement to the fragment, what this will do is show the number of the fragment. Imagine there’s 10 fragments in your activity, then when choosing tab number 8, that number will appear once you call that fragment.

The third method, getCount, just returns the number of fragments that the activity has. This is where you choose how many fragments you want.

The fourth method is just an automatic title creator for each fragment on your activity. For example the title for the 4th fragment would be OBJECT 4.

Moving on.

This class represents the Pages, or the Fragments. Again, you can call it what you want, but it must extend the Fragment class, which is also an abstract class.

This fragment object only has one method which does a couple of things. First, it inflates a layout, which you can define to look however you want and stores it in a view called rootView. Second, it gets a textview via rootView and sets its text to the number of the fragment. This number is sent through the arguments (ARG_OBJECT) we defined earlier in DemoCollectionPagerAdapter. Lastly, it returns rootView.

Note:  Right now we just defined one fragment, this means that it doesn’t matter how many fragments your activity has, it can only implement the one fragment we defined. to add more fragments and use different layouts, just create another class and extend Fragment, and assign a different layout to it.

That’s how you combine the three players: The Book, The Book Manager and The Page. But we are not finished yet, we are missing the tabs and also the whole purpose of this tutorial: the swiping!

Implementing Tabs and Swiping to our Demo

Let’s jump into the code for adding tabs first:

This code goes inside the onCreate() method of the first class we created: CollectionDemoActivity.

First we get the activities’ actionbar by calling getActionBar() and assign that to the variable actionBar.

By calling the method setNavigationMode and passing NAVIGATION_MODE_TAB we are telling the system that we are going to use tabs in order to navigate through our activity.

Next, we create a tab listener which then implements three methods. They listen to whenever the user selects, reselects or unselects a tab. Add code accordingly if you want something to happen when navigating through tabs. In the code shown above, whenever the user selects a tab, we tell the viewpager (the book) to show a specific fragment with the method setCurrentItem(tab.getPosition()).

Note: This tab listener doesn’t listen to swipes. We are going to create another listener that will listen to swipes in a few moments.

We then create three tabs. We iterate until mDemoCollectionPagerAdapter.getCount() because that’s where we know how many tabs we want. Inside each iteration we define the page title by calling the getPageTitle() method. Finally, we set the listener to the tabs we created. If you use “this” instead of “tabListener” then your activity will implement the ActionBar.TabListener interface instead of the object tabListener that we just defined.

Last of all, and most important of all, because this is what we were waiting for, is the swipe listener. It’s called a SimpleOnPageListener and it does what it says, listen to the “pages” (fragments). We start by getting our mViewPager object and calling setOnPageChangeListener. As an arguement we implement the SimpleOnPageListener interface and override its onPageSelected method to call setNavigationItem() and set the specific tab that we want whenever we swipe.

And that does it, with that listener in place, you will be able to swipe between your fragments.

Closing

I have shown you how to implement the swipe feature by using the code found on developer.android. It was really hard to read through that page because of the lack of explanation, so I hope that by writing this I cleared out some of your doubts.

If you tried to implement this and it didn’t work, don’t hesitate to ask me. What I did to implement this feature was follow the various tutorials out there by other people like me.

Note: If you see something wrong, please do comment so I can correct it!

It would be great if you tried out the app where I implemented swipe views and told me what you think!
Link to App: Click Here

If you like, you can sign up to my mailing list and receive an e-mail notification whenever I bring out new content. No spam! I promise :)
[wp_email_capture_form]

 

A little dive into Productivity Applications: Making a Summarization App

The last couple of months have been a life changing experience. I moved from Belgium to Honduras back in October 2013. I know… I know… I am crazy, or at least that’s what the majority of people say when I tell them my story. But let me tell you something before you already start judging me… I am happy. Yes, happy. I am 10x as happy than I was back in gloomy, cold, Belgium.

Lake of Yojoa, Honduras
Lake of Yojoa, Honduras

But I can dedicate another blog post to tell you about my life. For now, I want to talk about an app I have been developing. It is called “Summarizer App”. It does exactly what you are already thinking: It summarizes.

icon
Summarizer App

The Idea

I got the idea from an open source python script which did the same thing, summarize articles. I thought, why not make an app out of this? So I started studying the script inside and out. Luckily I knew python. It is in fact the first language I used to program so reading the script was made a little bit easier by that fact.

But I couldn’t use the script because I wanted to make an android app. I needed something in Java. So I searched for an alternative summarizer in Java and found nothing. Determined to still make this app I did the only thing that was left: Translate the python script to Java.

Translating from python to Java took around 1 week, about 6 hours each day. I kind of feel this was a great choice, because I got to know Java more that way. Sometimes I even had to reverse engineer parts of the  script. I wouldn’t know how to exactly translate a function so I would replicate what its output was, instead of translating the body of the function.

After having the summarizing engine translated it was just a matter of creating the layout for the app.

The Layout

Home Layout

Home Activity
Home Activity

I have tried to make the overall  layout as friendly as I could think of. The Home layout contains two tabs: URL and Text tab. The URL tab parses URL input while the text tab parses pasted text. So you can get a summary by entering in the URL of the article or by copying and pasting text.

I have implemented a share action to the app so it can be started from another app. What this effectively means is that when a user is reading an article on his web browser he can share it to the summarizer app and the app will open up with the URL field already filled in. After that, you just need to specify how many sentences (summary length) you want the summary to have and press the send button to get the summary.

Result Layout

Result Activity

The above screenshot shows an example of an obtained summary. The first thing you see in the action bar is the ability to share the summary, great! Tapping on the app’s icon takes you back up to the home activity.

What follows is the title. Below the title you see the sentences that make out the summary. They come with a great feature which differentiates this app from the others I found at the Play Store and which I personally think adds the biggest value: The ability to customize the summary. More about this on the next section.

History Layout

History Activity

Users can look at their history by tapping on the “search” icon on the home screen. Tapping on an element in the history screen leads you to the home page with the link or text already filled out, meaning you can recreate the summary seamlessly.

Adding value and differentiating from the rest

After building the prototype I started thinking of extra values that I could add to the app, apart from providing an automatic summary. For this I had to research what was already out there and see what they were doing, and how I could increment on that.

Sharing to the app

One thing that I found that adds value to the user is being able to share to the app. This means that when you are reading an article on your browser, you can share the article into the app. The app’s home screen will appear and the URL field will be already filled in. Leaving the user with only the summary length to choose.

Sharing from the app

This is very much a must. Once you have the summary, you can share to all your favorite social media/messaging apps. The shared summary will have a link to the full article as well (if it came from a url).

Customizing the summary

This is what really differentiates this app from the rest. Once you have the summary, you can actually swipe out (delete) sentences that you think are not helping the summary. One of the flaws of automatic summary scripts is that the summary they generate is actually nothing like a summary: some sentences are completely out of context, some are not even part of the article, etc… By swiping out these sentences, they are deleted and another one is added to the bottom of the summary. You can keep swiping until every sentence in the summary actually belongs there.

Search Past Summaries

This is another differentiator. I implemented a database which stores the links or text you have used to create summaries. You can view them, and the date they were accessed, by tapping on the search icon found in the home screen’s action bar. Pressing an item leads you to the home screen with the respective URL or text filled in instantly, so you can recreate the summary.

Closing

I believe this app gives great value to a niche group of smartphone article readers . They can get a quick summary of what the article is about and decide to read it later on or not. Whenever they want to share an article to friends, they can quickly send it into the summarizer app first, and later share the resulting summary that comes along with the original article’s link.

It would be great if you try out the app and tell me what you think!
Link to App: Click Here

 

If you like, you can sign up to my mailing list and receive an e-mail notification whenever I bring out new content. No spam! I promise :)
[wp_email_capture_form]