Android Tabviewer

This article will help you to make an android app with TabView layout. The screenshot of the tabview layout is given below..

TabView Demo:

In the above image we see there are three tab named Notifications, Features and Profile.. The procedure to create like this page is given below article..

bulid.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "rmproduct.com.helloworld"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
    implementation 'com.android.support:design:28.0.0-alpha1'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:support-v4:28.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

---------------------------------------------------------------------------------------------------------

MainActivity.java

package rmproduct.com.helloworld;

import android.support.design.widget.AppBarLayout;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.NavigationView;

import android.support.design.widget.Snackbar;

import android.support.design.widget.TabLayout;

import android.support.v4.view.GravityCompat;

import android.support.v4.view.ViewPager;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private ViewPager viewPager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tabLayout=(TabLayout) findViewById(R.id.tab);

        viewPager=(ViewPager) findViewById(R.id.view);

        ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager());

        adapter.AddFragment(new NotificationsFragment(), "Notifications");

        adapter.AddFragment(new FeaturesFragment(), "Features");

        adapter.AddFragment(new ProfileFragment(), "Profile");

        viewPager.setAdapter(adapter);

        tabLayout.setupWithViewPager(viewPager);

    }

}

--------------------------------------------------------------------------------------------------------------------

FeaturesFragment.java (As a java class)

package rmproduct.com.helloworld;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class FeaturesFragment extends android.support.v4.app.Fragment {

    View view;

    public FeaturesFragment() {

    }

    @Nullable

    @Override

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

        view=inflater.inflate(R.layout.features_layout, container, false);

        return view;

    }

}

--------------------------------------------------------------------------------------------------------------------

NotificationsFragment.java (As a java class)

package rmproduct.com.helloworld;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class NotificationsFragment extends android.support.v4.app.Fragment {

    View view;

    public NotificationsFragment() {

    }

    @Nullable

    @Override

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

        view=inflater.inflate(R.layout.notification_layout, container, false);

        return view;

    }

}

------------------------------------------------------------------------------------------------------------------

ProfileFragment.java (As a java class)

package rmproduct.com.helloworld;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class ProfileFragment extends android.support.v4.app.Fragment {

    View view;

    public ProfileFragment() {

    }

    @Nullable

    @Override

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

        view=inflater.inflate(R.layout.profile_layout, container,false);

        return view;

    }

}

------------------------------------------------------------------------------------------------------------------

ViewPagerAdapter.java (As a adapter java class)

package rmproduct.com.helloworld;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

import java.util.List;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> fragmentList=new ArrayList<>();

    private final List<String> fragmentListTitle=new ArrayList<>();

    public ViewPagerAdapter(FragmentManager fm) {

        super(fm);

    }

    @Override

    public Fragment getItem(int position) {

        return fragmentList.get(position);

    }

    @Override

    public int getCount() {

        return fragmentListTitle.size();

    }

    @Nullable

    @Override

    public CharSequence getPageTitle(int position) {

        return fragmentListTitle.get(position);

    }

    public void AddFragment(Fragment fragment, String title) {

        fragmentList.add(fragment);

        fragmentListTitle.add(title);

    }

}

----------------------------------------------------------------------------------------------

MainActivity.xml

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

<LinearLayout 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:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="#eae7e7"

    tools:context=".MainActivity">

    <LinearLayout

        android:id="@+id/relative"

        android:layout_width="match_parent"

        android:layout_height="90dp"

        android:background="@drawable/up_ground"

        android:gravity="center"

        android:orientation="vertical"

        android:padding="5dp">

        <ImageView

            android:id="@+id/logo"

            android:layout_width="40dp"

            android:layout_height="40dp"

            android:layout_gravity="center"

            android:src="@drawable/library_logo" />

        <TextView

            android:id="@+id/text"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_below="@+id/logo"

            android:text="CSE Library, JUST"

            android:textColor="#ffffff"

            android:textSize="20sp"

            android:textStyle="bold"

            android:gravity="center"

            />

    </LinearLayout>

    <android.support.design.widget.TabLayout

        android:id="@+id/tab"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#068fca"

        app:tabGravity="fill"

        app:tabIndicatorColor="@color/colorPrimary"

        app:tabIndicatorHeight="5dp"

        app:tabMode="fixed"

        app:tabTextColor="#101010" />

    <android.support.v4.view.ViewPager

        android:id="@+id/view"

        android:layout_width="match_parent"

        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</LinearLayout>

----------------------------------------------------------------------------------------------

features_layout.xml (As a layout fragment)

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

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

    android:orientation="vertical"

    android:gravity="center"

    android:padding="5dp"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="This is Feature Layout. This will display all the books as listView."

            android:textSize="25sp"

            android:textColor="#101010"

            android:textStyle="bold"

            android:gravity="center"/>

</LinearLayout>

-----------------------------------------------------------------------------------------------------------

notifications_layout.xml (As a layout fragment)

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

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

    android:orientation="vertical"

    android:padding="5dp"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is Notification Layout. This will display all the notifications as listView."

        android:textSize="25sp"

        android:textColor="#101010"

        android:textStyle="bold"

        android:gravity="center"/>

</LinearLayout>

----------------------------------------------------------------------------------------------------------------------

profile_layout.xml (As a layout fragment)

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

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

    android:orientation="vertical"

    android:padding="5dp"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is Notification Layout. This will display all the notifications as listView."

        android:textSize="25sp"

        android:textColor="#101010"

        android:textStyle="bold"

        android:gravity="center"/>

</LinearLayout>

-------------------------------------------------------------------------------------------------------------------------

That's enough if you perform this technique correctly then it will show a output as well as you saw in the above image..

[N.B.: In this app code I have used some resources drawable like image  and color name. You have ensure the same drawable and color otherwise your compiler will show error to you.. So be accurate and run this code.. Have a good practice.. Thank you..]

To get the original source code of others android apps please visit my github profile -

https://github.com/rmmostak