In this tutorial we will develop a cardview which will contain a tabs in which you can show multiple fragments inside a cardview using viewpager and tabview. Before start tying this i recommend you to go through Android tabview example and Android cardview example if you are not much familiar with implementing a tabview and cardview in android.
Steps
- Create project in android studio
- Implement a layout containing cardview with tabview and a viewpager
- Create the layouts for number of tabs you require
- Create fragment classes for tabs
- Develop the code for tabview and viewpager in your Activity class file
Create project in android studio
Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.
Creating Layout
A layout file will be automatically created while you are doing this as new project ,if not right click on res->layout folder and click on New -> Layout resource file. Now add the following code in to the XML file created . The file will be having a cardview layout which contains a tab layout and a view pager.
<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="300dp" app:cardElevation="2dp" app:cardUseCompatPadding="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="100dp" app:tabBackground="@drawable/tab_color_selector" app:tabSelectedTextColor="@color/white" app:tabTextColor="@color/black" android:minHeight="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="200dp" android:layout_below="@+id/tabLayout" /> </LinearLayout> </android.support.v7.widget.CardView>
Now we need to create one xml file under res/drawable/ file and use the below code for giving some color change for selected/unselected tabs.
tab_color_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/colorPrimary" android:state_selected="true" /> <item android:drawable="@color/white" android:state_selected="false" /> </selector>
Creating layout for individual tabs
This is an example of displaying 3 tabs.So there will be three fragment and there will be respective layouts for each fragments.So first step is to create 3 files under res/layout/ and name it as tab1.xml ,tab2.xml,tab3.xml
Following is the code for tab1.xml,tab2.xml,tab3.xml(You can give your own content for respective tabs.Here i am using the same content)
<?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"> <TextView android:id="@+id/tv_tab1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Tab 1" android:textAppearance="?android:attr/textAppearanceLarge"/> </RelativeLayout>
Creating Fragment classes for tabs
Next step is to create three fragments under java/your package/ and name its as Tab1.java,Tab2.java,Tab3.java
Tab1.java
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 { //Overriden method onCreateView @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.tab1, container, false); } }
Tab2.java
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 { //Overriden method onCreateView @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.tab2, container, false); } }
Tab3.java
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Tab3 extends Fragment { //Overriden method onCreateView @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.tab3, container, false); } }
Develop code for viewpager and tabs
We need to have an adapter for our viewpager. Create a file under your java/your package/ and implement the following code
ViewPagerAdapter.java
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; public class ViewPagerAdapter extends FragmentStatePagerAdapter { //integer to count number of tabs int tabCount; //Constructor to the class public ViewPagerAdapter(FragmentManager fm, int tabCount) { super(fm); //Initializing tab count this.tabCount= tabCount; } //Overriding method getItem @Override public Fragment getItem(int position) { //Returning the current tabs switch (position) { case 0: Tab1 tab1 = new Tab1(); return tab1; case 1: Tab2 tab2 = new Tab2(); return tab2; case 2: Tab3 tab3 = new Tab3(); return tab3; default: return null; } } //Overriden method getCount to get the number of tabs @Override public int getCount() { return tabCount; } }
Now simply use the following code in your activity java file
import android.support.design.widget.TabLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.support.v4.view.ViewPager; public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{ TabLayout tabLayout; ViewPager viewPager; ViewPagerAdapter viewPagerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //method for initialisation init(); } private void init() { tabLayout = (TabLayout) findViewById(R.id.tabLayout); //Adding the tabs using addTab() method tabLayout.addTab(tabLayout.newTab().setText("Tab1")); tabLayout.addTab(tabLayout.newTab().setText("Tab2")); tabLayout.addTab(tabLayout.newTab().setText("Tab3")); tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); //Initializing viewPager viewPager = (ViewPager) findViewById(R.id.pager); //Initializing view pager adapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount()); //Adding adapter to pager viewPager.setAdapter(viewPagerAdapter); //Adding onTabSelectedListener to swipe views viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); tabLayout.setOnTabSelectedListener(this); } @Override public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }
As we are using the cardview in your application ,we need to have the following line in our apps build.gradle file
compile 'com.android.support:cardview-v7:25.3.1'
Here is my colors.xml(You can use your own colors)
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="white">#FFFFFF</color> <color name="black">#000000</color> </resources>
Run the project ,you will get the following output
I’m working on material design navigation drawer with sliding tabs and I have implemented the same. Now I want to add first Make Changes in your mainactivity . here i added a navigation drawer and tablayout in mainactivity.
Such a nice tutorial ever seen.
thanks thirupathi