By: Unknown 0 comments

Android Tab Layout with Swipeable Views

Layout Overview

Checkout the following pic which explains the complete overview of layout architecture. Basically we are using ViewPager as main layout and for individual pager views we use Fragments. The tabs are part of Action Bar.

                                  

Creating new Project

Even though you are not familiar with ViewPager or Fragments, don’t worry. You will get an idea about what those are and how to use them once you are done through this article. So let’s start by creating a new project.

1. Create a new project in Eclipse from File ⇒ New ⇒ Android ⇒ Application Project. While creating the project select the app theme which has Action Bar as shown in the below image.

CREATE TAB VIEW.....

fragment_movies.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:background="#17df0d">           <TextView android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:gravity="center"         android:text="Design Movies Screen"         android:textSize="20dp"         android:layout_centerInParent="true"/>       </RelativeLayout>

Complete Code

Below is the complete code for MainActivity.java class

MainActivity.java

package info.androidhive.tabsswipe; import info.androidhive.tabsswipe.adapter.TabsPagerAdapter; import info.androidhive.tabsswipe.R; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.FragmentTransaction; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.view.Menu; public class MainActivity extends FragmentActivity implements         ActionBar.TabListener {     private ViewPager viewPager;     private TabsPagerAdapter mAdapter;     private ActionBar actionBar;     // Tab titles     private String[] tabs = { "Top Rated", "Games", "Movies" };     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         // Initilization         viewPager = (ViewPager) findViewById(R.id.pager);         actionBar = getActionBar();         mAdapter = new TabsPagerAdapter(getSupportFragmentManager());         viewPager.setAdapter(mAdapter);         actionBar.setHomeButtonEnabled(false);         actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);                // Adding Tabs         for (String tab_name : tabs) {             actionBar.addTab(actionBar.newTab().setText(tab_name)                     .setTabListener(this));         }         /**          * on swiping the viewpager make respective tab selected          * */         viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {             @Override             public void onPageSelected(int position) {                 // on changing the page                 // make respected tab selected                 actionBar.setSelectedNavigationItem(position);             }             @Override             public void onPageScrolled(int arg0, float arg1, int arg2) {             }             @Override             public void onPageScrollStateChanged(int arg0) {             }         });     }     @Override     public void onTabReselected(Tab tab, FragmentTransaction ft) {     }     @Override     public void onTabSelected(Tab tab, FragmentTransaction ft) {         // on tab selected         // show respected fragment view         viewPager.setCurrentItem(tab.getPosition());     }     @Override     public void onTabUnselected(Tab tab, FragmentTransaction ft) {     } } OUTPUT :-   Share this article on