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]

 

Day 30 – Learning Android Development

The Game

The app has been published! you can find it HERE or you can just search “Steel’s Run” in the Playstore (Developer: Sierens Apps).  Would be nice to receive some feedback!
The free desktop version can be found HERE (left arrow to jump, right one to shoot).

Today

Before publishing the app, I designed the icon. Here’s how it looks:

 

 

 

 

I think it looks good enough, especially the background. The character could get better graphics but that would’ve taken hours and hours so i just enlarged the existing sprites. I could have also added the typical glow in the center of the icon but opted out from doing it.

Then I went on to create a feature graphic, which is just a rearrangement of the title. You can see it on the playstore.

After that I published my first real app! The challenge is done!

The Journey

It feels good to have achieved my goal. Looking back at my first post, I set out to develop and publish an app in 30 days, all the month of September. No more, no less, and I stuck to it. It doesn’t matter if my app doesn’t even get 50 downloads. What really matters to me is that I set an intrinsic goal and I achieved it. I started something and finished it. I created something instead of consuming. I feel really satisfied with all this.

Then there’s also everything I learned along the way. I developed a good base for programming in java, having had no experience with it before. I got introduced to XML and learned how to deal with it, and how it is a very powerful language for representing content. I got some experience with Eclipse, together with the Android SDK and the ADT. The combination of Eclipse and the ADT provide an amazing development environment experience. I can’t live without them anymore. Not to mention the awesome libgdx library for making games, which lets me easily create a desktop and android version of the game.

I will focus on getting my master’s degree now but that doesn’t mean I wont start new projects in the near future. I look forward to expanding Steel’s Run, adding new levels, new features,etc. Creating something has always felt amazing and I wont stop doing it.

Day 29 – Learning Android Development

The game is done. Get the desktop version HERE. The only keys to press are the left arrow key(touch left in android) and the right arrow key(touch right in android). I have done everything I wanted with it before I release it tomorrow. I still need to do the app icon design but I’ll do that tomorrow.

I did the title and credits, it’s the best I could do in 1 hour. OpenDyslexic is very pretty!

I also worked on transitioning from title to game. The first time you open the game, you get the title. If you die or win, you go back to the title, but only in the android version. I don’t know why in the desktop version the title gets skipped when you die or win and it jumps back right to the start of the game. It works fine when you open the game for the first time though. I’m happy all works well in Android.

I also added sound. Whenever there’s a collision there’s sound. I used Bfxr for it.

I’m happy with how the game is so far. It is very challenging, and yes, it can be finished. I have tested all sections of it and have been able to do them. I look forward to adding more levels when I have more time.

To remind you, the desktop version is free and the one I linked here at the beginning of the post will be the last one fro quite a while. The Android version will be paid, I’m thinking somewhere around 0.70 to 0.85 cents and will be available, hopefully, tomorrow or Monday.

Day 28 – Learning Android Development

Today I had a productive afternoon. I set up a screen capture software that captures my screen. I set it up to take a picture every 10 seconds. Later I made a video out of it so you can see my productive 3.5 hours in just 1 minute!

[youtube http://www.youtube.com/watch?v=mFTixyXMrEw]

As you can see on the video, I was able to make the whole boss encounter under that time  plus a few screens for when you lose or win. A commenter on the last post mentioned I could use OpenDyslexic as a font instead of my crappy one so i did! It’s a free to use font made -but not only- for  dyslexic people. The maker is Abelardo Gonzalez. He says:

you can sell anything that uses this font. But I’m not going to give permission for you to sell this font, by itself, alone. But you can sell a book with this font,programs with this font, etc. And if you do use this font commercially, let me know, and I’ll promote it here, and to others that can use it.:)

So there’s no problem with me using the font :) I’ll contact him to let him know my game uses his font. Here’s the numbers in OpenDyslexic, they are the ones I use for the position of Steel:

I also used the same font for making the win and lose screen you see on the video. Here’s the lose screen:

I really like it! I’m looking into the sound right now. It wont be anything serious just simple jump/collision sounds. I also need a title screen.