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]

 

Master’s Project: More on process mining.

More on Discovery Plug-ins for ProM.

Last week I talked about the discovery plug-ins for the tool ProM, which only take the event log as the input. I showed how to mine the control-flow perspective of a process only by mining the event log, using as example the alpha-algorithm. By doing this, you answer the question “How are the cases actually being executed?”.

These plug-ins are basically process mining algorithms. You give them the event-log as input, and then you ‘mine’ the event log for something. Which means you run the algorithm and it goes through the event log and returns something (for example: petri nets or control-flow perspective), depending on what kind of algorithm it is.

Now there’s other things you can mine with discovery plug-ins. You can mine case-related information about a process. By doing this, you answer the questions “What are the most frequent paths in the process?”, “Are there any loops?”, “Can I simplify the log by abstracting the most frequent paths?”.

You can mine organisational related information about a process. This answers questions like “How many people are involved in a specific case?”, “What is the communication structure and dependencies among people?”, etc.  You mine this with the social-network miner plug-in.

If you just want to know how many people are involved at all the cases in the log, you can simply use the log summary:

I’m still using the same example as the last post, which is the event log of the (one) process of a telephone repair company. You can see the different resources above. We have testers, solvers, and the system. So to answer the question, there’s 12 people involved in all the cases together. You can also use the inspector to inspect specific cases (process instances) at a time and check who was involved.

For the rest of the questions, you can use the social network plug-in. For example, let’s check if there are employees who outperform others. We can find out who is better at fixing defects. We first filter the event log to only show us the relevant tasks on solvers. Then we run the plug-in to mine for a handover-of-work social network. We get this:

The graph shows which employees handed over work to other employees in the cases(process instances). SolverS3 and solverC3 have the best performance. Because the telephones that they fix, always pass the tests, and therefore, are not resent to the repair department, and therefore are not resent to other solvers. That’s why you don’t see arrows going out of these two employees, only arrows coming to them, which means they get work handed over from other solvers. As far as the oval shapes go, taken from the tutorial:

The oval shape of the nodes in the graph visually expresses the relation between the in and out degree of the connections (arrows) between these nodes. A higher proportion of in-going arcs lead to more vertical oval shapes while higher proportions of outgoing arcs produce more horizontal oval shapes. From this remark, can you tell
which employee has more problems to fi x the defects?

To answer the question from the tutorial, It seems that solverS2 and solverS1 have the most difficulty to fix the defects. Because they have the highest outgoing/ingoing degree of connection (both 5/1).

You can also use discovery plug-ins to use temporal logic to verify if the cases in a log  satisfy certain properties. An example to this from the tutorial:

We know that after a try to fix the defect, the telephone should be tested to check if it is indeed repaired.

Thus, we could use the “LTL Checker” plug-in to verify the property: Does the task “Test Repair” always happen after the tasks “Repair (Simple)” and before the task “Archive Repair”?

And so ends the tutorial, which gave us a brief overview on how some discovery plug-ins can be used for mining knowledge related to processes.

Some Literature

Apart from reading the Process Mining Manifesto, which gives you a general introduction to process mining. I’ve also read “Process Mining for the multi-faceted analysis of business processes—A case study in a financial services organization“. As the title says its a case study, so I got to read on the impact of process mining on real organizations.

Aside from the case specific content, the journal/article also talks about broad subjects such as the link between process mining and business intelligence. Process mining can be seen as the link between Business Intelligence and Business Process Management (BPM). Process mining occurs during the diagnosis phase of BPM. Normally, Business Process Analysis (BPA) and Business Activity Monitoring (BAM) are the techniques used on getting statistics on the business process, but process mining provides deeper insight, by going into the exact paths of execution. Process mining discovers, monitors and enhances processes by extracting knowledge from event logs.

Master’s Project: Diving into Process Mining

From now on I will use this blog to also talk about my Master’s project. It’s a project which is necessary to complete my Master in Information Management, worth 15 ECTS out of the 60 for the whole Master. The Master’s thesis is then composed/written out of that project. I’ll try to update this blog as much as I can.

Process Mining

My project is about process mining. What exactly is process mining? Well, according to the process mining manifesto, it is:

 a relatively young research discipline that sits between computational intelligence and data mining on the one hand, and process modeling and analysis on the other hand.

And the Idea of it is:

The idea of process mining is to discover, monitor and improve real processes (i.e., not assumed processes) by extracting knowledge from event logs readily available in today’s (information) systems.

So it’s about algorithms which are able to extract knowledge from event logs. More simple: process mining are techniques used in order to discover new processes, monitor existing processes and even improve processes.

We’re more accustomed to the idea of data mining, which is extracting knowledge from data warehouses. The focus was always on data until around the 90’s, when things like process re-engineering started emerging, processes started becoming important as well. Process mining is filling the gap between Business Intelligence and Business Process Management.

The tool

Today I was playing around with the tool used for process mining, called ProM. ProM gives you a framework where you can use process mining tools. I also followed an introductory tutorial for using the tool.

ProM enables you to use an event log in order to do various actions using plug-ins. These plug-ins can be categorized into three:

  • Discovery: These plug-ins only take the event log as an input. They answer questions like: How are the cases actually being executed? and are the rules being obeyed?
  • Conformance: These plug-ins check how much the data in the event log matches the prescribed behavior from deployed process models. They help you monitor processes.
  • Extension: Discover information that will enhance the model, they take a model and the event log as input.

A cool example of the plug-ins that I used today is the alpha-algorithm. It mines a petri net out of the event log.  I used the event log which is given in the tutorial, it’s about a process to repair telephones in a company.

In the image above you see the key data on the event log. 1 process, 1000 instances of that process, accumulating 10476 events, a mean of 10 events per instance.

In the image above you see the action tab of ProM, Inputted is the event log I used, then in Actions I searched for the alpha-algorithm, which was installed in a more general plug-in.

Above you see the result of the alpha algorithm. So it actually makes a process model out of the event log, very cool. More detailed: the alpha-algorithm mines the control flow perspective of a process. From the tutorial:

The control- flow perspective of a process establishes the dependencies among its tasks. Which tasks precede which other ones? Are there concurrent tasks? Are there loops? In short, what is the process model that summarizes the flow followed by most/all cases in the log? This information is important because it gives you feedback about how cases are actually being executed in the organization.

So with this model you can check whether in your company, the process is actually being done how you thought it was, or does the model show that things are done differently? So this plug-in falls under the first category, i.e. “Discovery”. It answers the question: How are the cases actually being executed?

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.