Professional Documents
Culture Documents
Android Tab Layout With Swipeable Views
Android Tab Layout With Swipeable Views
AndroidTabLayoutwithSwipeableViews
London
Accommodations
UniqueRentalsinLondon.
Bookaccommodationsfrom
$49/night.
DOWNLOAD CODE
VIDEO DEMO
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
1/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
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.
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
2/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
3/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
2. As we are going to use Fragments, extend your main activity from Fr agmen t Acti vit y . Also
implement this class from Act ion Ba r. Ta bL is ten er as we are adding Tabs too.
publicclassMainActivityextendsFragmentActivityimplements
ActionBar.TabListener{
3. Open main activity layout file and add Vi ewP ag er element. (My layout file for main activity is
activity_main.xml)
ACTIVITY_MAIN.XML
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
4/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
<android.support.v4.view.ViewPagerxmlns:android="http://schemas.android.com/apk/res/and
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
4. I normally prefer to create a separate package for adapter classes just to separate them from activity
classes. So create a new package named your_package_name.adapter. I named my new package as
info.androidhive.tabsswipe.adapter
5. I am creating a Fr agmen t Pa gerA da p ter class to provide views to tab fragments. Create a class
called TabsPagerAdapter.java under adapter package. This adapter provides fragment views to tabs
which we are going to create them later in this tutorial.
TABSPAGERADAPTER.JAVA
packageinfo.androidhive.tabsswipe.adapter;
importinfo.androidhive.tabsswipe.GamesFragment;
importinfo.androidhive.tabsswipe.MoviesFragment;
importinfo.androidhive.tabsswipe.TopRatedFragment;
importandroid.support.v4.app.Fragment;
importandroid.support.v4.app.FragmentManager;
importandroid.support.v4.app.FragmentPagerAdapter;
publicclassTabsPagerAdapterextendsFragmentPagerAdapter{
publicTabsPagerAdapter(FragmentManagerfm){
super(fm);
}
@Override
publicFragmentgetItem(intindex){
switch(index){
case0:
//TopRatedfragmentactivity
returnnewTopRatedFragment();
case1:
//Gamesfragmentactivity
returnnewGamesFragment();
case2:
//Moviesfragmentactivity
returnnewMoviesFragment();
}
returnnull;
}
@Override
publicintgetCount(){
//getitemcountequaltonumberoftabs
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
5/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
return3;
}
capability
of
adding
tabs.
All
we
have
to
do
is
enable
it
using
MAINACTIVITY.JAVA
publicclassMainActivityextendsFragmentActivityimplements
ActionBar.TabListener{
privateViewPagerviewPager;
privateTabsPagerAdaptermAdapter;
privateActionBaractionBar;
//Tabtitles
privateString[]tabs={"TopRated","Games","Movies"};
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Initilization
viewPager=(ViewPager)findViewById(R.id.pager);
actionBar=getActionBar();
mAdapter=newTabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//AddingTabs
for(Stringtab_name:tabs){
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
If you run the project, you can see the tabs displaying under action bar.
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
6/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
7/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
FRAGMENT_TOP_RATED.XML
<?xmlversion="1.0"encoding="utf8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#fa6a6a">
<TextViewandroid:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="DesignTopRatedScreen"
android:textSize="20dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
8. Also create respected Fragment activity class for this view. Create a new class named
TopRatedFragment.java under your main package.
TOPRATEDFRAGMENT.JAVA
packageinfo.androidhive.tabsswipe;
importinfo.androidhive.tabsswipe.R;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
publicclassTopRatedFragmentextendsFragment{
@Override
publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
BundlesavedInstanceState){
ViewrootView=inflater.inflate(R.layout.fragment_top_rated,container,
returnrootView;
}
}
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
8/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
FRAGMENT_GAMES.XML
<?xmlversion="1.0"encoding="utf8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ff8400">
<TextViewandroid:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="DesignGamesScreen"
android:textSize="20dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
10. Create a new class named GamesFragment.java with following code.
packageinfo.androidhive.tabsswipe;
importinfo.androidhive.tabsswipe.R;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
publicclassGamesFragmentextendsFragment{
@Override
publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
BundlesavedInstanceState){
ViewrootView=inflater.inflate(R.layout.fragment_games,container,false
returnrootView;
}
}
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
9/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
FRAGMENT_MOVIES.XML
<?xmlversion="1.0"encoding="utf8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#17df0d">
<TextViewandroid:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="DesignMoviesScreen"
android:textSize="20dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
12. Also create activity class for this view named MoviesFragment.java
MOVIESFRAGMENT.JAVA
packageinfo.androidhive.tabsswipe;
importinfo.androidhive.tabsswipe.R;
importandroid.os.Bundle;
importandroid.support.v4.app.Fragment;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
publicclassMoviesFragmentextendsFragment{
@Override
publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
BundlesavedInstanceState){
ViewrootView=inflater.inflate(R.layout.fragment_movies,container,false
returnrootView;
}
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
10/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
Run the project and check whether the views for tabs are added or not.
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
11/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
12/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
@Override
publicvoidonTabReselected(Tabtab,FragmentTransactionft){
}
@Override
publicvoidonTabSelected(Tabtab,FragmentTransactionft){
//ontabselected
//showrespectedfragmentview
viewPager.setCurrentItem(tab.getPosition());
}
@Override
publicvoidonTabUnselected(Tabtab,FragmentTransactionft){
}
/**
*onswipingtheviewpagermakerespectivetabselected
**/
viewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener(){
@Override
publicvoidonPageSelected(intposition){
//onchangingthepage
//makerespectedtabselected
actionBar.setSelectedNavigationItem(position);
}
@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
}
@Override
publicvoidonPageScrollStateChanged(intarg0){
}
});
After adding these two listeners, if you run the project you can see everything working good.
Complete Code
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
13/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
MAINACTIVITY.JAVA
packageinfo.androidhive.tabsswipe;
importinfo.androidhive.tabsswipe.adapter.TabsPagerAdapter;
importinfo.androidhive.tabsswipe.R;
importandroid.app.ActionBar;
importandroid.app.ActionBar.Tab;
importandroid.app.FragmentTransaction;
importandroid.os.Bundle;
importandroid.support.v4.app.FragmentActivity;
importandroid.support.v4.view.ViewPager;
importandroid.view.Menu;
publicclassMainActivityextendsFragmentActivityimplements
ActionBar.TabListener{
privateViewPagerviewPager;
privateTabsPagerAdaptermAdapter;
privateActionBaractionBar;
//Tabtitles
privateString[]tabs={"TopRated","Games","Movies"};
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Initilization
viewPager=(ViewPager)findViewById(R.id.pager);
actionBar=getActionBar();
mAdapter=newTabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);
actionBar.setHomeButtonEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
//AddingTabs
for(Stringtab_name:tabs){
actionBar.addTab(actionBar.newTab().setText(tab_name)
.setTabListener(this));
}
/**
*onswipingtheviewpagermakerespectivetabselected
**/
viewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener(){
@Override
publicvoidonPageSelected(intposition){
//onchangingthepage
//makerespectedtabselected
actionBar.setSelectedNavigationItem(position);
}
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
14/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2){
}
@Override
publicvoidonPageScrollStateChanged(intarg0){
}
});
}
@Override
publicvoidonTabReselected(Tabtab,FragmentTransactionft){
}
@Override
publicvoidonTabSelected(Tabtab,FragmentTransactionft){
//ontabselected
//showrespectedfragmentview
viewPager.setCurrentItem(tab.getPosition());
}
@Override
publicvoidonTabUnselected(Tabtab,FragmentTransactionft){
}
37
Like
Tweet
168
Android Fullscreen
Action Bar
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
15/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
Ravi Tamada
Hyderabad, INDIA
SUBSCRIBE
Advertise
AdvertiseHere
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
16/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
AndroidHive
30,968likes
LikePage
ContactUs
Bethefirstofyourfriendstolikethis
Tag Cloud
Action Bar
Adapter
Apps
Async
Chat
Dashboard
File Upload
Location
PHP
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
GPS
GCM
Grid
Grid View
Locale
Material Design
Navigation Drawer
Pinch
GDK
json
List View
Maps
Google Glass
Intermediate
Libstreaming
API
Camera
Database
Google Plus
MySQL
Beginner
Fragments
Gestures
HTTP
Animation
PayPal
Progress Bar
17/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
Push Notifications
RecyclerView
SMS
REST
Sockets
sponsored
Twitter
sessions
Speech Input
SQLite
UI
View Pager
Quick Tips
Swipe
Video
Volley
Slim
Spinner
Tab View
Video Streaming
Wearable
xml
YouTube
Ravi Tamada
google.com/+RaviTamada
Theo di
13.231 ngi theo di
Most Popular
1
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
18/19
13/8/2015
AndroidTabLayoutwithSwipeableViews
883,440 views
5
Android
Sliding
Menu
using
Navigation
LondonAccommodations
UniqueRentalsinLondon.Bookaccommodationsfrom$49/night.
Copyright AndroidHive
http://www.androidhive.info/2013/10/androidtablayoutwithswipeableviews1/
19/19