Customizing Tabs on bottom of screen Android

In most of designs, tabs bar usally in top of screen. But sometime, we can see it at the bottom.
Although it's a pure design, we may custom it. This little tip will show you how to align your Tabs bar at the bottom of the screen in your Android app, like this:


My first design and solution:
- Declaring and Footer layout(xml) to include it into activity layout.
- Each tab screen is a separately activity.
- Click at footer buttons to switch activity.
- Detecting swipe at screen to switch activity (by using SimpleOnGestureListener).

Now, start eclipse and coding!

1. Create file footer_activity.xml:

2. Create RootActivity

An abstract Activity must be extends by sub Activities (MusicActivity, VideoActivity, FoodActivity and FriendActivity).
In it, after locate all view elements, set mutual onClickListener for footer buttons. Put this code to onCreate():
  locateView();

  // set on click listener to go to other activities
  tabFood.setOnClickListener(onClick(FoodActivity.class));
  tabVideo.setOnClickListener(onClick(VideoActivity.class));
  tabMusic.setOnClickListener(onClick(MusicActivity.class));
  tabFriend.setOnClickListener(onClick(FriendActivity.class));
And add these methods:
Okey, for detecting swipe actions (swipe left and right), we custom a own Gesture Listener: handling actions and tranfering action result to activity through an Interface.
Source code:
Now, in RootActivity, we must implement interface SimpleGestureListener, override onSwipe() (declaring in interface) and dispatchTouchEvent() (declaring in Activity.class) to switch screen when swipe. These override methods:
Moreover, provide a abstract method switchActivity(int directionSwipe) here and it will be override by subclasses!
Layout of RootActivity:

And this is full RootActivity code:

3. Create sub activities:

These activities have simple code, mutual methods have been declared in parent class.
MusicActivity.java:
VideoActivity.java:
FoodActivity.java:
FriendActivity.java:

4. Okey, add necessary xml file:


5. Build an run program:


pic name pic name
Therefore, you can use animations when opening activity for more flexible! See my PREVIOUS POST!
You can see this tutorial for learning how to make bottom tabs bar with ViewPager.

(Sorry for having ads)


Share


Previous post
« Prev Post
Next post
Next Post »