Skip to main content
image

ANDROID NAVIGATION TABS

ANDROID NAVIGATION TABS

Android Navigation tabs with swipe view and design

This post is about making Android Navigation tabs with dynamic colors.

First create a new application in android studio with name AndroidTabActivity

image

Make a new layout file in res > layout > folder with name tabparent.xml
and edit it as following :


<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

This file will be holding the Navigation tab.

Make a new file in same layout folder with name tabone.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#ffffff"
        android:text="TAB ONE" />

</LinearLayout>

This file is for tab one layout in navigation tab.

In same way two more files with name tabtwo and tabthree for second and third tab layout.

tabtwo.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffb87dec">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#ffffff"/>

</LinearLayout>

tabthree.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffff2f5d">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="25sp"
        android:textColor="#ffffff"/>

</LinearLayout>

Now you will have to make drawable resources so that we can customize our tabs

I found this from official post which you can find here Styling the Action Bar.

Create a new Drawable resource file. you can create it by right clicking the drawable folder and selecting new > Drawable resource file.

Name : tab_selected
Edit it as following :


<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#003e5b" >

</color>

Create new drawable resource file with name tab_selected_focused.xml
And edit it as following :


<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#810306" >

</color>

Create new drawable resource file with name tab_selected_pressed.xml
And edit it as following :

<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#00592d" >

</color>

Create new drawable resource file with name tab_unselected.xml
And edit it as following :

<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#0080c0" >

</color>

Create new drawable resource file with name tab_unselected_focused.xml
And edit it as following :


<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#f8070e" >

</color>

Create new drawable resource file with name tab_unselected_pressed.xml
And edit it as following :


<?xml version="1.0" encoding="utf-8"?>
<color xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#38af53" >

</color>

Now the last important drawable file.
Create a new drawable file with name : actionbar_tab_indicator.xml
and edit it as following


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- STATES WHEN BUTTON IS NOT PRESSED -->


    <!-- Non focused states -->
    <item android:drawable="@drawable/tab_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/tab_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:drawable="@drawable/tab_unselected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/tab_selected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

    <!-- STATES WHEN BUTTON IS PRESSED -->


    <!-- Non focused states -->
    <item android:drawable="@drawable/tab_unselected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
    <item android:drawable="@drawable/tab_selected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>

    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:drawable="@drawable/tab_unselected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
    <item android:drawable="@drawable/tab_selected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>

</selector>

This file explains all the drawable files we created previously.

Now open styles.xml and edit it as following :


<resources>

    <!--
        Base application theme for API 14+. This theme completely replaces
        AppBaseTheme from BOTH res/values/styles.xml and
        res/values-v11/styles.xml on API 14+ devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- API 14 theme customizations can go here. -->
    </style>

    <style name="MyAppTheme" parent="@android:style/Theme.Holo">

        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs" parent="@android:style/Widget.Holo.ActionBar.TabView">

        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

Here’s the AndroidManifest.xml file


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="androidtabactivity.demo" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyAppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


Create a new Class with name TabAdapter.java


package androidtabactivity.demo;

/**
 * Created by abc on 28/4/2015.
 */

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class TabAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int index) {

        switch (index) {
            case 0:

                return new TabOne();
            case 1:

                return new TabTwo();
            case 2:

                return new TabThree();
        }

        return null;
    }

    @Override
    public int getCount() {
        // no. of tabs here i.e. TAB ONE, TAB TWO, TAB THREE
        return 3;
    }

}

For displaying our three tabs make three classes with name
TabOne.java, TabTwo.java, TabThree.java

package androidtabactivity.demo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


/**
 * Created by abc on 28/4/2015.
 */
public class TabOne extends Fragment {
    TextView txtone;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View myView = inflater.inflate(R.layout.tabone, container, false);  // just change here with the corresponding layout resource file
        txtone = ((TextView) myView.findViewById(R.id.textView));
        txtone.setText("THIS IS TAB ONE"); //edit this as -  THIS IS TAB TWO and THIS IS TAB THREE for two more files
        return myView;

    }
}

Now open the MainActivity.java
and edit it as following :


package androidtabactivity.demo;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;



public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    String[] mytabnames = { "ONE", "TWO", "THREE" };
    ViewPager myviewpager;
    TabAdapter tabadapter;
    ActionBar actionBar;
    // Tab titles


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

        // Initilization
        myviewpager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        tabadapter = new TabAdapter(getSupportFragmentManager());

        myviewpager.setAdapter(tabadapter);
        actionBar.setHomeButtonEnabled(true);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Adding Tabs
        for (String tab_name : mytabnames) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        /**
         * on swiping the viewpager make respective tab selected
         * */
        myviewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        myviewpager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

}

Now run the application. 🙂 🙂


If you like my work, please click the like button and like my page on facebook. You can also comment below…I will try my best to help you out.

image

imageimage