1. Download library from Github, import library project in to your eclipse workspace:
2. Make it is a library project
After import completed, right click at project name (library), select Properties/Android... and checking at "is Library":
3. Make reference between your project with it
Right click at your project name, select Properties/Android, click at button Add... to make reference:
4. Coding an activity to run
In ourActivity, there are a ViewPager with it's tab indicator. Layout (activity_pager.xml) like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_bright"
android:layout_alignParentBottom="true" />
</RelativeLayout>
RelativeLayout, define indicator after ViewPager and align it at bottom of screen to making this effect!Java source code for
PageActivity.java:package com.blogspot.hongthaiit.viewpagerwithtabs;
import java.util.ArrayList;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import com.viewpagerindicator.TabPageIndicator;
public class PageActivity extends FragmentActivity {
private CustomPagerAdapter customPagerAdapter;
private ViewPager pager;
private TabPageIndicator indicator;
private ArrayList listIcon;
private ArrayList fragmentContents;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_pager);
getTabsIcon();
customPagerAdapter = new CustomPagerAdapter(
getSupportFragmentManager(), listIcon, fragmentContents);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(customPagerAdapter);
indicator = (TabPageIndicator) findViewById(R.id.tabs);
indicator.setTabIconLocation(TabPageIndicator.LOCATION_UP);
indicator.setViewPager(pager);
}
private void getTabsIcon() {
listIcon = new ArrayList();
listIcon.add(R.drawable.music);
listIcon.add(R.drawable.video);
listIcon.add(R.drawable.food);
listIcon.add(R.drawable.friends);
fragmentContents = new ArrayList();
fragmentContents.add("This is Musics Page");
fragmentContents.add("This is Videos Page");
fragmentContents.add("This is Foods Page");
fragmentContents.add("This is Friends Page");
}
}
5. Create a custom ViewPager adapter to manage fragments
CustomPagerAdapter.java
package com.blogspot.hongthaiit.viewpagerwithtabs;
import java.util.ArrayList;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.viewpagerindicator.IconPagerAdapter;
public class CustomPagerAdapter extends FragmentPagerAdapter implements
IconPagerAdapter {
private ArrayList listIcon;
private ArrayList pageContents;
public CustomPagerAdapter(FragmentManager fm, ArrayList list,
ArrayList content) {
super(fm);
this.listIcon = list;
this.pageContents = content;
}
@Override
public Fragment getItem(int position) {
return PageFragment.getInstance(pageContents.get(position), position);
}
@Override
public int getCount() {
return 4;
}
@Override
public CharSequence getPageTitle(int position) {
if (position == 0) {
return "Music";
} else if (position == 1) {
return "Video";
} else if (position == 2) {
return "Food";
} else
return "Friend";
}
@Override
public int getIconResId(int index) {
return listIcon.get(index);
}
}
6. Declare each fragment of Viewpager
- Layout (fragment_page.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" >
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/textView"
android:layout_centerInParent="true"
android:contentDescription="@string/app_name"
/>
</RelativeLayout>
PageFragment.java):package com.blogspot.hongthaiit.viewpagerwithtabs;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class PageFragment extends Fragment {
private TextView description;
private ImageView image;
public static PageFragment getInstance(String titles, int postion) {
PageFragment f = new PageFragment();
Bundle args = new Bundle();
f.setArguments(args);
args.putString("page_title", titles);
args.putInt("position", postion);
return f;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout resource that'll be returned
View rootView = inflater.inflate(R.layout.fragment_page, container,
false);
description = (TextView)rootView.findViewById(R.id.textView);
image = (ImageView) rootView.findViewById(R.id.image);
description.setText(getArguments().getString("page_title"));
setImage();
return rootView;
}
private void setImage() {
int postion = getArguments().getInt("position");
if (postion == 0) {
image.setImageResource(R.drawable.ic_music);
} else if (postion == 1) {
image.setImageResource(R.drawable.ic_video);
} else if (postion == 2) {
image.setImageResource(R.drawable.ic_food);
} else if (postion == 3) {
image.setImageResource(R.drawable.ic_friend);
}
}
}
7. In order to tabs bar is more good looking, we must styled it
Inres/values/styles.xml, put this code to make theme:<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="StyledIndicators" parent="@android:style/Theme.Light">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">@drawable/custom_tab_indicator</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
<item name="android:textColor">#FF555555</item>
<item name="android:textSize">16sp</item>
<item name="android:divider">@drawable/custom_tab_indicator_divider</item>
<item name="android:dividerPadding">10dp</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
<item name="android:typeface">monospace</item>
</style>
</resources>
8. In res/drawable folder, make custom_tab_indicator.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_unselected" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_selected" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_unselected_focused" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_selected_focused" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_selected_pressed" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_selected_pressed" />
</selector>
9. In AndroidManifest, use theme which you make in styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.blogspot.hongthaiit.viewpagerwithtabs"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="14"
android:targetSdkVersion="21" />
<application
android:icon="@drawable/icon"
android:allowBackup="true"
android:label="ViewPagerIndicator Sample" >
<activity
android:name="com.blogspot.hongthaiit.viewpagerwithtabs.PageActivity"
android:label="ViewPager With Tabs"
android:theme="@style/StyledIndicators" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
10. Build and run program, we can see our result like this:
|
 |
(sorry for having ads)