This Tutorial is about creating sliding tabs. As you can see a demo on the right side. Here, we have created 2 tabs named Home and Menu.
Time needed for creating:
10 -15 minutes
Requirements:
1) Android studio (try to keep latest version)
2) Download these two java files
Theory:
To get better understanding of this tutorial, let's start with the layout we are going to create for this tutorial.
For sliding tab, we are going to use LinearLayout with three parts.
1) Toolbar
2) SlidingTabLayout
It is a layout which will act as a Tab strip. You can place it anywhere in your LinearLayout but I would prefer to put it just below the toolbar.
3) ViewPager
ViewPager is a widget in the form of java class which let user swipe right and left horizontally to see entirely new screen.
We are going to use fragment in conjunction with ViewPager.
Implementation:
1) create a new project.
2) Add both downloaded java files.
3)Now add a new color in color.xml file under res -->values folder. It is a color to highlight the selected tab.
Finally, color.xml file should look like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primaryColor">#FF1D15</color>
<color name="primaryDarkColor">#BF0603</color>
<color name="tabsSelectedColor">#C13936</color>
</resources>
4) As we are implementing toolbar, we need to remove the action bar. Go to res-->values-->styles.xml and change parent theme to "Theme.AppCompat.Light.NoActionBar". And finally, it should look like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryDarkColor</item>
</style>
</resources>
5) Create tab1.xml under layout folder.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello friends"/>
</LinearLayout>
and also tab2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="i am good"/>
</LinearLayout>
These are the layout files for both tabs.
6) Create Tab1.java file
package com.example.pilot.android4learning;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Tab1 extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
return inflater.inflate(R.layout.tab1, container, false);
}
}
and Tab2.java file.
package com.example.pilot.android4learning;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Tab2 extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
return inflater.inflate(R.layout.tab2,container,false);
}
}
7) Create a ViewPageAdapter.java file.
package com.example.pilot.android4learning;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class ViewPageAdapter extends FragmentStatePagerAdapter {
CharSequence Titles[];
int numberOfTitles;
/*let's create a constructor for ViewPagerAdapter
* In constructor we are passing 3 arguemnets
* 1) fm -- FragmentManager
* A FragmentManager manages Fragments in Android, specifically it handles transactions
* between fragments. A transaction is a way to add, replace, or remove fragments.
* 2) mTitles[] -- name of Tabs
* 3) mNumberOdTitles -- number of tabs*/
public ViewPageAdapter(FragmentManager fm, CharSequence mTitles[], int mNumberOfTitles){
super(fm);
this.Titles=mTitles;
this.numberOfTitles=mNumberOfTitles;
}
@Override
public Fragment getItem(int position){
if(0 == position){
Tab1 tab1 = new Tab1();
return tab1;
}
else{
Tab2 tab2 = new Tab2();
return tab2;
}
}
@Override
public int getCount(){
return numberOfTitles;
}
@Override
public CharSequence getPageTitle(int position){
return Titles[position];
}
}
8) We need a toolbar layout in our activity_main.xml file, and we can add it directly into it's layout. But toolbar is going to implement again and again in your activities. So, in order to get rid off typing same code again, we are going to create a separate layout for toolbar.
Create tool_bar.xml under layout folder.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primaryColor"
xmlns:android="http://schemas.android.com/apk/res/android">
</android.support.v7.widget.Toolbar>
9) Include the toolbar (mention in layout tool_bar.xml file ) to activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<include
layout="@layout/tool_bar">
</include>
10)Also add SlidingTabLayout and ViewPager to activity_main.xml. Finally, activity_main.xml will look like this.
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">
<include
layout="@layout/tool_bar">
</include>
<com.example.pilot.android4learning.SlidingTabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primaryColor">
</com.example.pilot.android4learning.SlidingTabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
11) In MainActivity.java, in onCreate method add the following code
toolbar = (Toolbar)findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
//getSupportFragmentmanager -- Return the FragmentManager for interacting with fragments
// associated with this activity
viewPageAdapter = new ViewPageAdapter(getSupportFragmentManager(),Titles, numberOfTitles);
pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(viewPageAdapter);
tabs = (SlidingTabLayout)findViewById(R.id.tabs);
tabs.setDistributeEvenly(true); // it is to evenly distribute each tab in the layout
/* let's change tab selected highlight color with our color.xml tabsSelctedColor.
* setCustomTabColorizer take TabColorizer as an arguement(check this method in SlidingTabLayout)
* which further calls getIndicatorColor method which returns default color. We override that
* getIndicatorColor method and made it return the color that we want to set*/
tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position) {
return getResources().getColor(R.color.tabsSelectedColor);
}
});
tabs.setViewPager(pager);
Finally, MainActivity.java file will look like this:
package com.example.pilot.android4learning;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
ViewPageAdapter viewPageAdapter;
ViewPager pager;
SlidingTabLayout tabs;
CharSequence Titles[] = {"Home", "Menu"};
int numberOfTitles=2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar)findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
//getSupportFragmentmanager -- Return the FragmentManager for interacting with fragments
// associated with this activity
viewPageAdapter = new ViewPageAdapter(getSupportFragmentManager(),Titles, numberOfTitles);
pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(viewPageAdapter);
tabs = (SlidingTabLayout)findViewById(R.id.tabs);
tabs.setDistributeEvenly(true); // it is to evenly distribute each tab in the layout
/* let's change tab selected highlight color with our color.xml tabsSelctedColor.
* setCustomTabColorizer take TabColorizer as an arguement(check this method in SlidingTabLayout)
* which further calls getIndicatorColor function which returns default color. We override that
* getIndicatorColor method and made it return the color that we want to set*/
tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position) {
return getResources().getColor(R.color.tabsSelectedColor);
}
});
tabs.setViewPager(pager);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@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.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
That's it...
