Android cardview with tabs

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
• Create 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