forum

home / developersection / forums / create a custom tab layout in android studio.

Ask Question

Create a custom tab layout in android studio.

Arti Mishra 1951 06-Nov-2018

Create a Custom tab layout in android.

android apps android 
Updated on 02-Jul-2023
Arti Mishra

Arti Mishra

Follow

Student

Can you answer this question?
Answer

2 Answers

Aryan Kumar

Aryan Kumar

02-Jul-2023

Sure. Here are the steps on how to create a custom tab layout in Android Studio:

  1. Create a new project in Android Studio.
  2. In the activity_main.xml file, add a TabLayout widget to the layout.
  3. In the MainActivity.java file, create a TabLayoutAdapter class. This class will be responsible for providing the tab layout with the data that it needs to display.
  4. In the TabLayoutAdapter class, create a getTabCount() method that returns the number of tabs that the tab layout should display.
  5. In the TabLayoutAdapter class, create a getTabView() method that returns the view that should be displayed for each tab.
  6. In the MainActivity.java file, set the TabLayoutAdapter class as the adapter for the tab layout.
  7. In the MainActivity.java file, add a listener to the tab layout. This listener will be responsible for updating the app's UI when the user selects a different tab.
  8. Run the app and test the custom tab layout.

Here is an example of the code that you can use to create a custom tab layout:

public class MainActivity extends AppCompatActivity {

Code snippet

private TabLayout tabLayout;
private TabLayoutAdapter tabLayoutAdapter;

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

    // Initialize the tab layout
    tabLayout = findViewById(R.id.tab_layout);

    // Create the tab layout adapter
    tabLayoutAdapter = new TabLayoutAdapter();

    // Set the tab layout adapter
    tabLayout.setAdapter(tabLayoutAdapter);

    // Add a listener to the tab layout
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            // Update the app's UI
            // ...
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            // Do nothing
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            // Do nothing
        }
    });
}

private class TabLayoutAdapter extends PagerAdapter {

    @Override
    public int getCount() {
        // Return the number of tabs
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // Return the title of the tab at the specified position
        switch (position) {
            case 0:
                return "Tab 1";
            case 1:
                return "Tab 2";
            case 2:
                return "Tab 3";
        }
        return null;
    }

    @Override
    public View instantiateItem(ViewGroup container, int position) {
        // Create the view for the tab at the specified position
        View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab_item, container, false);

        // Set the text of the tab
        TextView textView = view.findViewById(R.id.tab_text);
        textView.setText(getPageTitle(position));

        // Add the view to the container
        container.addView(view);

        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // Remove the view from the container
        container.removeView((View) object);
    }
}
}

This code will create a tab layout with three tabs. The title of each tab will be "Tab 1", "Tab 2", and "Tab 3". When the user selects a different tab, the app's UI will be updated accordingly.

Arti Mishra

Arti Mishra

06-Nov-2018

First, you need to create a layout file 

Activity_main.xml

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

<RelativeLayout 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.support.v4.view.ViewPager

        android:layout_above="@id/tab_layout"

        android:id="@+id/view_pager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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





    <android.support.design.widget.TabLayout

        app:tabTextAppearance="@style/MineCustomTabText"

        android:id="@+id/tab_layout"

        android:layout_alignParentBottom="true"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:background="@color/colorPrimary"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>



</RelativeLayout>


MainActivity.java

package com.example.msclient010.mindstickqna.Fragment;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.example.msclient010.mindstickqna.Adapter.QuestionPagerAdapter;
import com.example.msclient010.mindstickqna.R;
import com.example.msclient010.mindstickqna.Utils.SaveSharedPreference;
import static com.facebook.FacebookSdk.getApplicationContext;
public class RecentActivityFragment extends Fragment {
    View mView;
    ViewPager mViewPager;
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    @Override
    public View onCreateView(final LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        if (savedInstanceState == null) {
            mView = inflater.inflate(R.layout.home_page_fragment, container, false);
            setupTabLayoutWithViewPager(mView);
        }
        return mView;
    }
    private void setupTabLayoutWithViewPager(View view) {
        mViewPager = (ViewPager) view.findViewById(R.id.view_pager);
        QuestionPagerAdapter adapter = new QuestionPagerAdapter(getFragmentManager(), getContext());
        adapter.addFragment(new HomeFragment(), getString(R.string.home));
        adapter.addFragment(new UnansweredFragment(), getString(R.string.unanswered));
              //********* My code **************
        if (SaveSharedPreference.getPrefUserId(getContext()) != null) {
            adapter.addFragment(new NotificationFragment(), getString(R.string.notification));
            adapter.addFragment(new UserProfileFragment(), getString(R.string.profile));
        } else {
            adapter.addFragment(new LoginRegisterFragment(), getString(R.string.login));
        }
       /// ********************
        mViewPager.setAdapter(adapter);
        TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(mViewPager);
        tabLayout.getTabAt(0).setIcon(R.drawable.ic_home_white_18dp);
        tabLayout.getTabAt(1).setIcon(R.drawable.ic_question_answer_white_18dp);
   if (SaveSharedPreference.getPrefUserId(getContext()) != null) {
            tabLayout.getTabAt(2).setIcon(R.drawable.ic_notifications_white_18dp);
            tabLayout.getTabAt(3).setIcon(R.drawable.ic_account_circle_white_18dp);
        } else {
            tabLayout.getTabAt(2).setIcon(R.drawable.login_white_icon);
        }
    }
}


QuestionPagerAdapter.java

package com.example.msclient010.mindstickqna.Adapter;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class QuestionPagerAdapter extends FragmentStatePagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();
    public QuestionPagerAdapter(FragmentManager fragmentManager, Context context){
        super(fragmentManager);
    }
    @Override
    public Fragment getItem(int position){
        return mFragmentList.get(position);
    }
    @Override
    public int getCount(){
        return mFragmentList.size();
    }
    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
           }
}


Output :

Create a custom tab layout in android studio.


"Thanks!!! for Reading"

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy