Tabbed Activity in Android

Post Views: 6,356

Hello Friends, It’s being long time I’ve not shared anything with you but today I have something to share which is Different types of Tabbed Activity in Android. In one of my application idea I needed to use tabbed activity, So i thought to share with you also, what different types of tabbed activity android provided.

Actually there are three types of Tabbed Activity in Android or we can say three predefined tabbed activity template in android studio which are:-

Swipe Views (ViewPager)
Action Bar Tabs (with ViewPager)
Action Bar Spinner

But with few changes I have created another Tabbed Activity which is nothing but combination of Swipe Views and Action Bar Spinner. Actually in Swipe Views Tabbed Activity there is no way to see all tabs names just as in Action Bar Tabs or Action Bar Spinner, So I have combined Swipe Views with Action Bar Spinner, So that I can see tabs name and can change tab/page from spinner also.

So you can find my Customised Tabbed Activity code below but for the other three predefined Tabbed Activity code you can download Android Studio Project below or You can find code in Android Studio itself also.

SwipeViewWithSpinnerTabLayout.java

package com.zatackcoder.tablayouttest;

import android.content.Context;
import android.content.res.Resources;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.ThemedSpinnerAdapter;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.TextView;

public class SwipeViewWithSpinnerTabLayout extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_swipe_view_with_spinner_tab_layout);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        // Setup spinner
        final Spinner spinner = (Spinner) findViewById(R.id.spinner);
        spinner.setAdapter(new SwipeViewWithSpinnerTabLayout.MyAdapter(
                toolbar.getContext(),
                new String[]{
                        "Section 1",
                        "Section 2",
                        "Section 3",
                }));

        // Change page when spinner selection changed
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                mViewPager.setCurrentItem(position);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
            }
        });

        // Change spinner position when page change through slide
        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){

            @Override
            public void onPageSelected(int position) {
                spinner.setSelection(position);
            }
        });
    }


    @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_swipe_view_with_spinner_tab_layout, 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);
    }

    private static class MyAdapter extends ArrayAdapter<String> implements ThemedSpinnerAdapter {
        private final ThemedSpinnerAdapter.Helper mDropDownHelper;

        public MyAdapter(Context context, String[] objects) {
            super(context, android.R.layout.simple_list_item_1, objects);
            mDropDownHelper = new ThemedSpinnerAdapter.Helper(context);
        }

        @Override
        public View getDropDownView(int position, View convertView, ViewGroup parent) {
            View view;

            if (convertView == null) {
                // Inflate the drop down using the helper's LayoutInflater
                LayoutInflater inflater = mDropDownHelper.getDropDownViewInflater();
                view = inflater.inflate(android.R.layout.simple_list_item_1, parent, false);
            } else {
                view = convertView;
            }

            TextView textView = (TextView) view.findViewById(android.R.id.text1);
            textView.setText(getItem(position));

            return view;
        }

        @Override
        public Resources.Theme getDropDownViewTheme() {
            return mDropDownHelper.getDropDownViewTheme();
        }

        @Override
        public void setDropDownViewTheme(Resources.Theme theme) {
            mDropDownHelper.setDropDownViewTheme(theme);
        }
    }


    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_swipe_view_with_spinner_tab_layout, container, false);
            TextView textView = (TextView) rootView.findViewById(R.id.section_label);
            textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a PlaceholderFragment (defined as a static inner class below).
            return PlaceholderFragment.newInstance(position + 1);
        }

        @Override
        public int getCount() {
            // Show 3 total pages.
            return 3;
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

package com.zatackcoder.tablayouttest;

import android.content.Context;

import android.content.res.Resources;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.ThemedSpinnerAdapter;

import android.support.v7.widget.Toolbar;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.Spinner;

import android.widget.TextView;

public class SwipeViewWithSpinnerTabLayout extends AppCompatActivity {

/**

* The {@link android.support.v4.view.PagerAdapter} that will provide

* fragments for each of the sections. We use a

* {@link FragmentPagerAdapter} derivative, which will keep every

* loaded fragment in memory. If this becomes too memory intensive, it

* may be best to switch to a

* {@link android.support.v4.app.FragmentStatePagerAdapter}.

private SectionsPagerAdapter mSectionsPagerAdapter;

/**

* The {@link ViewPager} that will host the section contents.

private ViewPager mViewPager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_swipe_view_with_spinner_tab_layout);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayShowTitleEnabled(false);

// Create the adapter that will return a fragment for each of the three

// primary sections of the activity.

mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

// Set up the ViewPager with the sections adapter.

mViewPager = (ViewPager) findViewById(R.id.container);

mViewPager.setAdapter(mSectionsPagerAdapter);

// Setup spinner

final Spinner spinner = (Spinner) findViewById(R.id.spinner);

spinner.setAdapter(new SwipeViewWithSpinnerTabLayout.MyAdapter(

toolbar.getContext(),

new String[]{

"Section 1",

"Section 2",

"Section 3",

}));

// Change page when spinner selection changed

spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

mViewPager.setCurrentItem(position);

}

@Override

public void onNothingSelected(AdapterView<?> parent) {

}

});

// Change spinner position when page change through slide

mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){

@Override

public void onPageSelected(int position) {

spinner.setSelection(position);

}

});

}

@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_swipe_view_with_spinner_tab_layout, 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);

}

private static class MyAdapter extends ArrayAdapter<String> implements ThemedSpinnerAdapter {

private final ThemedSpinnerAdapter.Helper mDropDownHelper;

public MyAdapter(Context context, String[] objects) {

super(context, android.R.layout.simple_list_item_1, objects);

mDropDownHelper = new ThemedSpinnerAdapter.Helper(context);

}

@Override

public View getDropDownView(int position, View convertView, ViewGroup parent) {

View view;

if (convertView == null) {

// Inflate the drop down using the helper's LayoutInflater

LayoutInflater inflater = mDropDownHelper.getDropDownViewInflater();

view = inflater.inflate(android.R.layout.simple_list_item_1, parent, false);

} else {

view = convertView;

}

TextView textView = (TextView) view.findViewById(android.R.id.text1);

textView.setText(getItem(position));

return view;

}

@Override

public Resources.Theme getDropDownViewTheme() {

return mDropDownHelper.getDropDownViewTheme();

}

@Override

public void setDropDownViewTheme(Resources.Theme theme) {

mDropDownHelper.setDropDownViewTheme(theme);

}

/**

* A placeholder fragment containing a simple view.

public static class PlaceholderFragment extends Fragment {

/**

* The fragment argument representing the section number for this

* fragment.

private static final String ARG_SECTION_NUMBER = "section_number";

public PlaceholderFragment() {

}

/**

* Returns a new instance of this fragment for the given section

* number.

public static PlaceholderFragment newInstance(int sectionNumber) {

PlaceholderFragment fragment = new PlaceholderFragment();

Bundle args = new Bundle();

args.putInt(ARG_SECTION_NUMBER, sectionNumber);

fragment.setArguments(args);

return fragment;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_swipe_view_with_spinner_tab_layout, container, false);

TextView textView = (TextView) rootView.findViewById(R.id.section_label);

textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));

return rootView;

}

/**

* A {@link FragmentPagerAdapter} that returns a fragment corresponding to

* one of the sections/tabs/pages.

public class SectionsPagerAdapter extends FragmentPagerAdapter {

public SectionsPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

// getItem is called to instantiate the fragment for the given page.

// Return a PlaceholderFragment (defined as a static inner class below).

return PlaceholderFragment.newInstance(position + 1);

}

@Override

public int getCount() {

// Show 3 total pages.

return 3;

}

activity_swipe_view_with_spinner_tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".SwipeViewWithSpinnerTabLayout">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_weight="1"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:title="@string/app_name">

            <Spinner
                android:id="@+id/spinner"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".SwipeViewWithSpinnerTabLayout">

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingTop="@dimen/appbar_padding_top"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_weight="1"

android:background="?attr/colorPrimary"

app:layout_scrollFlags="scroll|enterAlways"

app:popupTheme="@style/AppTheme.PopupOverlay"

app:title="@string/app_name">

<Spinner

android:id="@+id/spinner"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

fragment_swipe_view_with_spinner_tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SwipeViewWithSpinnerTabLayout$PlaceholderFragment">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintTop_creator="1" />

</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/constraintLayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".SwipeViewWithSpinnerTabLayout$PlaceholderFragment">

<TextView

android:id="@+id/section_label"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="@dimen/activity_vertical_margin"

android:layout_marginEnd="@dimen/activity_horizontal_margin"

android:layout_marginStart="@dimen/activity_horizontal_margin"

android:layout_marginTop="@dimen/activity_vertical_margin"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toTopOf="@+id/constraintLayout"

tools:layout_constraintLeft_creator="1"

tools:layout_constraintTop_creator="1" />

</android.support.constraint.ConstraintLayout>

menu_swipe_view_with_spinner_tab_layout.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.zatackcoder.tablayouttest.SwipeViewWithSpinnerTabLayout">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

<menu xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

tools:context="com.zatackcoder.tablayouttest.SwipeViewWithSpinnerTabLayout">

<item

android:id="@+id/action_settings"

android:orderInCategory="100"

android:title="@string/action_settings"

app:showAsAction="never" />

</menu>

Screenshots

Tabbed Activity in Android Screen 1

AndroidStudio Project Download