Action bar is deprecated in android 5.0 known as Android Lollipop and new toolbar is introduced by Android(Google) developers. Toolbar is also a simple view like others but to enhance UI and UX of apps they have introduced it with some enhancement. In Android 5.0 Tabs are also recreated with some enhancement. because toolbar doesn't support direct tabs like actionbar. In action bar you can add tabs using method called addTab() but with tabs you can't use same method. now you even don't require Tab host or Tab widget to add tabs. so how ?
Well go through full tutorial and you can implement nice tabs like google play, google music and many other apps have. Tabs are mostly used to display two different views in same page or activity. most of the developer load different fragments in tabs so they can have control over tabs and views associated with it. Tabs can be of two types.
1. Tabs with label
2. Tabs with icons
Steps
Step - 1
Create activity which holds tabs inside view part and give proper name to it. In this tutorial it is TabViewDemo Activity. To create tabs first we have to create SlidingTabLayout and SlidingTabStripe custom view. So put below both class code in your project.
Get it from github
SlidingTabLayout.java
SlidingTabStripe.java
Step - 2 a)
Now put below code in activity which you have created in Step - 1. this activity is Demo activity which will display tabs with labels(type -1). Below you can find layout and class file code put the code inside your project.
activity_tabview_demo.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize"
tools:context="com.androprogrammer.tutorials.samples.TabViewDemo">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.androprogrammer.tutorials.customviews.SlidingTabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab_layout_header"
android:elevation="8dp"/>
<android.support.v4.view.ViewPager
android:id="@+id/tab_layout_container"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@color/activity_bg" />
</LinearLayout>
</RelativeLayout>
TabViewDemo.java
package com.androprogrammer.tutorials.samples;
import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Build;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.transition.Slide;
import android.transition.Transition;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import com.androprogrammer.tutorials.R;
import com.androprogrammer.tutorials.activities.Baseactivity;
import com.androprogrammer.tutorials.adapters.TabFragmentAdapter;
import com.androprogrammer.tutorials.customviews.SlidingTabLayout;
import com.androprogrammer.tutorials.fragments.FragmentOne;
import com.androprogrammer.tutorials.fragments.FragmentThree;
import com.androprogrammer.tutorials.fragments.FragmentTwo;
import java.util.ArrayList;
public class TabViewDemo extends Baseactivity implements ActionBar.TabListener {
protected View view;
protected SlidingTabLayout tabs_header;
protected android.support.v4.view.ViewPager mPager;
protected ArrayList<fragment> fragments;
protected TabFragmentAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState)
{
if(android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
getWindow().requestFeature(android.view.Window.FEATURE_CONTENT_TRANSITIONS);
//set the transition
Transition ts = new Slide();
ts.setDuration(3000);
getWindow().setEnterTransition(ts);
getWindow().setExitTransition(ts);
}
super.onCreate(savedInstanceState);
setReference();
setToolbarSubTittle(this.getClass().getSimpleName());
setToolbarElevation(0);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
fragments.add(new FragmentOne());
fragments.add(new FragmentTwo());
fragments.add(new FragmentThree());
String[] titles = {"One", "Two", "Three"};
mAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments, titles);
mPager.setAdapter(mAdapter);
tabs_header.setBackgroundColor(getResources().getColor(R.color.primary));
tabs_header.setTitleColor(Color.WHITE);
tabs_header.setFittingChildren(true);
tabs_header.setTabType(SlidingTabLayout.TabType.TEXT);
tabs_header.setViewPager(mPager);
}
@Override
public void setReference() {
view = LayoutInflater.from(this).inflate(R.layout.activity_tabview_demo,container);
tabs_header = (SlidingTabLayout) view.findViewById(R.id.tab_layout_header);
mPager = (android.support.v4.view.ViewPager) view.findViewById(R.id.tab_layout_container);
fragments = new ArrayList<fragment>();
SetTabSelector();
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
switch (item.getItemId()) {
// Respond to the action bar's Up/Home button
case android.R.id.home:
finish();
break;
}
return super.onOptionsItemSelected(item);
}
private void SetTabSelector()
{
tabs_header.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position)
{
int ColorId = 0;
switch (position)
{
case 0:
ColorId = Color.WHITE;
break;
case 1:
ColorId = Color.MAGENTA;
break;
case 2:
ColorId = Color.RED;
break;
}
return ColorId;
}
@Override
public int getDividerColor(int position) {
return 0;
}
});
}
@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
mPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
}
@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
}
}
Step - 2 b)
This is second sub part of tutorial. if you want to create tabs with icons(type -2) then put below code for tabs with simple text put above code in your activity. to create tabs with icon you have to give name to images like this, ic_one, ic_two etc. because i have fetched images from drawable using tab title. check below code.
private int getResourceIdByName(String resourceName) {
// get images from mipmap folder
return getResources().getIdentifier(resourceName, "mipmap", getContext().getPackageName());
}
if your project consist old drawable pattern then replace mipmap with drawable in SlidingTabLayout file.
ImageTabViewDemo.java
package com.androprogrammer.tutorials.samples;
import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.transition.Slide;
import android.transition.Transition;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import com.androprogrammer.tutorials.R;
import com.androprogrammer.tutorials.activities.Baseactivity;
import com.androprogrammer.tutorials.adapters.TabFragmentAdapter;
import com.androprogrammer.tutorials.customviews.SlidingTabLayout;
import com.androprogrammer.tutorials.fragments.FragmentOne;
import com.androprogrammer.tutorials.fragments.FragmentThree;
import com.androprogrammer.tutorials.fragments.FragmentTwo;
import java.util.ArrayList;
public class ImageTabViewDemo extends Baseactivity implements ActionBar.TabListener {
protected View view;
protected SlidingTabLayout tabs_header;
protected android.support.v4.view.ViewPager mPager;
protected ArrayList<fragment> fragments;
protected TabFragmentAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState)
{
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
getWindow().requestFeature(android.view.Window.FEATURE_CONTENT_TRANSITIONS);
//set the transition
Transition ts = new Slide();
ts.setDuration(3000);
getWindow().setEnterTransition(ts);
getWindow().setExitTransition(ts);
}
super.onCreate(savedInstanceState);
setReference();
setToolbarSubTittle(this.getClass().getSimpleName());
setToolbarElevation(0);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
fragments.add(new FragmentOne());
fragments.add(new FragmentTwo());
fragments.add(new FragmentThree());
String[] titles = {"one", "two", "three"};
mAdapter = new TabFragmentAdapter(getSupportFragmentManager(), fragments, titles);
mPager.setAdapter(mAdapter);
tabs_header.setBackgroundColor(getResources().getColor(R.color.primary));
tabs_header.setTitleColor(Color.WHITE);
tabs_header.setFittingChildren(true);
tabs_header.setTabType(SlidingTabLayout.TabType.ICON);
tabs_header.setViewPager(mPager);
}
@Override
public void setReference() {
view = LayoutInflater.from(this).inflate(R.layout.activity_tabview_demo,container);
tabs_header = (SlidingTabLayout) view.findViewById(R.id.tab_layout_header);
mPager = (android.support.v4.view.ViewPager) view.findViewById(R.id.tab_layout_container);
fragments = new ArrayList<fragment>();
SetTabSelector();
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
switch (item.getItemId()) {
// Respond to the action bar's Up/Home button
case android.R.id.home:
finish();
break;
}
return super.onOptionsItemSelected(item);
}
private void SetTabSelector()
{
tabs_header.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position)
{
int ColorId = 0;
switch (position)
{
case 0:
ColorId = Color.WHITE;
break;
case 1:
ColorId = Color.MAGENTA;
break;
case 2:
ColorId = Color.RED;
break;
}
return ColorId;
}
@Override
public int getDividerColor(int position) {
return 0;
}
});
}
@Override
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
mPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
}
@Override
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
}
}
Resources of my project is available at Github so please get images from there. to load three different views i created adapter which extends FragmentPagerAdapter class. below is code of adapter of view pager.
TabFragmentAdapter.java
package com.androprogrammer.tutorials.adapters;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
/**
* Created by Wasim on 28-04-2015.
*/
public class TabFragmentAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> fragments;
private String[] titles;
public TabFragmentAdapter(FragmentManager fm, ArrayList <Fragment> fragments, String [] title) {
super(fm);
this.fragments = fragments;
this.titles = title;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
Step - 3
In this tutorial i have even used three fragments to load on three different tabs.the fragments have no logic or code so i don't put that code here. you can find code from here.
That's it. I hope you its clear to you. now run your app. hope it will work fine. if you have any query
or have problem in code implementation write it in below comment box.
Keep coding...
0 comments :
Post a Comment