How to make awesome looking Navigation Tab Strip in android studio

Hey guys welcome back in this post I will tell you how you can design awesome Navigation Tab Strip with some simple methods just follow this steps.

Here is a demo of how ts look like and feel.

Creating New Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activityfrom templates.or you can chose your existing project.

2. Now add this dependency in your app level gradle file.

android {
    dataBinding {
        enabled = true
    }
}
 
dependencies {
    //...
 
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.github.devlight.navigationtabstrip:navigationtabstrip:1.0.4'
}

3. Now open your activity_main.xml file and past this code.    

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="3">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ffffffff"
            android:paddingEnd="30dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:paddingStart="30dp">

            <com.gigamole.navigationtabstrip.NavigationTabStrip
                android:id="@+id/nts_top"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:layout_gravity="center"
                app:nts_active_color="#42a4d1"
                app:nts_color="#42a4d1"
                app:nts_corners_radius="1dp"
                app:nts_inactive_color="#ff1a1e23"
                app:nts_size="15sp"
                app:nts_titles="@array/titles"
                app:nts_weight="3dp"/>

        </FrameLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ff252e39">

            <View
                android:layout_width="match_parent"
                android:layout_height="4dp"
                android:layout_gravity="center"
                android:layout_marginTop="18dp"
                android:background="#182128"/>

            <com.gigamole.navigationtabstrip.NavigationTabStrip
                android:id="@+id/nts_center"
                android:layout_width="match_parent"
                android:layout_height="42dp"
                android:layout_gravity="center"
                android:layout_marginEnd="30dp"
                android:layout_marginLeft="30dp"
                android:layout_marginRight="30dp"
                android:layout_marginStart="30dp"
                app:nts_active_color="#fff"
                app:nts_color="#3cdedd"
                app:nts_corners_radius="3.5dp"
                app:nts_factor="0.8"
                app:nts_gravity="bottom"
                app:nts_inactive_color="#81ffffff"
                app:nts_titles="@array/titles"
                app:nts_type="point"
                app:nts_typeface="fonts/moon.otf"
                app:nts_weight="7dp"/>

        </FrameLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#ff1a1e23"
            android:paddingEnd="30dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:paddingStart="30dp">

            <com.gigamole.navigationtabstrip.NavigationTabStrip
                android:id="@+id/nts_bottom"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="center"
                app:nts_active_color="#fff"
                app:nts_color="#ff1748"
                app:nts_factor="2.8"
                app:nts_corners_radius="1.5dp"
                app:nts_inactive_color="#81ffffff"
                app:nts_titles="@array/titles"
                app:nts_typeface="fonts/drugs.otf"
                app:nts_weight="3dp"/>

        </FrameLayout>

    </LinearLayout>

</FrameLayout>

Note: One thing this is just a demo don’t copy all of the codes these codes are just to know how its work you can choose your code and use it as you want in your project.

4. Now this is the time to do some code in JAVA open your MainActivity.java file and past these codes. What are you thinking of just go and try it out its look so much awesome and give your app a new look. 

package com.gigamole.sample;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;

import com.gigamole.navigationtabstrip.NavigationTabStrip;

/**
 * Created by GIGAMOLE on 28.03.2016.
 */
public class MainActivity extends Activity {

    private ViewPager mViewPager;

    private NavigationTabStrip mTopNavigationTabStrip;
    private NavigationTabStrip mCenterNavigationTabStrip;
    private NavigationTabStrip mBottomNavigationTabStrip;

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

        initUI();
        setUI();
    }

    private void initUI() {
        mViewPager = (ViewPager) findViewById(R.id.vp);
        mTopNavigationTabStrip = (NavigationTabStrip) findViewById(R.id.nts_top);
        mCenterNavigationTabStrip = (NavigationTabStrip) findViewById(R.id.nts_center);
        mBottomNavigationTabStrip = (NavigationTabStrip) findViewById(R.id.nts_bottom);
    }

    private void setUI() {
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return 3;
            }

            @Override
            public boolean isViewFromObject(final View view, final Object object) {
                return view.equals(object);
            }

            @Override
            public void destroyItem(final View container, final int position, final Object object) {
                ((ViewPager) container).removeView((View) object);
            }

            @Override
            public Object instantiateItem(final ViewGroup container, final int position) {
                final View view = new View(getBaseContext());
                container.addView(view);
                return view;
            }
        });

        mTopNavigationTabStrip.setTabIndex(1, true);
        mCenterNavigationTabStrip.setViewPager(mViewPager, 1);
        mBottomNavigationTabStrip.setTabIndex(1, true);

      //this are the other functions of this dependency you can remove the comment line and check how its look like and work.
      //there are lots of way you can design your layout.
      
        /**final NavigationTabStrip navigationTabStrip = (NavigationTabStrip) findViewById(R.id.nts_bottom);
        navigationTabStrip.setTitles("Nav", "Tab", "Strip");
        navigationTabStrip.setTabIndex(0, true);
        navigationTabStrip.setTitleSize(15);
        navigationTabStrip.setStripColor(Color.RED);
        navigationTabStrip.setStripWeight(6);
        navigationTabStrip.setStripFactor(2);
        navigationTabStrip.setStripType(NavigationTabStrip.StripType.LINE);
        navigationTabStrip.setStripGravity(NavigationTabStrip.StripGravity.BOTTOM);
        navigationTabStrip.setTypeface("fonts/typeface.ttf");
        navigationTabStrip.setCornersRadius(3);
        navigationTabStrip.setAnimationDuration(300);
        navigationTabStrip.setInactiveColor(Color.GRAY);
        navigationTabStrip.setActiveColor(Color.WHITE);**/
  //      navigationTabStrip.setOnPageChangeListener(...);
 //       navigationTabStrip.setOnTabStripSelectedIndexListener(...);
    }
}

Note : One thing this full project is not done by me all the coding are done by Devlight and this dependency have some bugs which have to fix so try it and see how its look.

You can download the source code from github – https://github.com/Devlight/NavigationTabStrip

Thanks for your time we will meet again with a new post for now check other post I hope you like them also.

Posts created 40

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top