Friday, March 19, 2021

How to Create a Tab Layout in Android

How to Create a Tab Layout in Android

add libary

implementation 'com.android.support:design:28.0.0'

 res/layout/activity_main.xml

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

<RelativeLayout

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

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

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   tools:context=".MainActivity">

   <android.support.design.widget.TabLayout

      android:id="@+id/tabLayout"

      android:layout_width="match_parent"

      android:layout_height="wrap_content"

      android:background="#1db995">

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

   <android.support.v4.view.ViewPager

      android:id="@+id/viewPager"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_below="@id/tabLayout"

      android:layout_centerInParent="true"

      android:layout_marginTop="100dp"

      tools:layout_editor_absoluteX="8dp" />

</RelativeLayout>

src/MainActivity.java

public class MainActivity extends AppCompatActivity {

   TabLayout tabLayout;

   ViewPager viewPager;

   @Override

   protected void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);

      setContentView(R.layout.activity_main);

      tabLayout = findViewById(R.id.tabLayout);

      viewPager = findViewById(R.id.viewPager);

      tabLayout.addTab(tabLayout.newTab().setText("Football"));

      tabLayout.addTab(tabLayout.newTab().setText("Cricket"));

      tabLayout.addTab(tabLayout.newTab().setText("NBA"));

      tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

      final MyAdapter adapter = new MyAdapter(this,getSupportFragmentManager(),

      tabLayout.getTabCount());

      viewPager.setAdapter(adapter);

      viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

      tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

         @Override

         public void onTabSelected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

         }

         @Override

         public void onTabUnselected(TabLayout.Tab tab) {

         }

         @Override

         public void onTabReselected(TabLayout.Tab tab) {

         }

      });

   }

}

Create a java class(MyAdapter.java)

class MyAdapter extends FragmentPagerAdapter {

   Context context;

   int totalTabs;

   public MyAdapter(Context c, FragmentManager fm, int totalTabs) {

      super(fm);

      context = c;

      this.totalTabs = totalTabs;

   }

   @Override

   public Fragment getItem(int position) {

      switch (position) {

         case 0:

            Football footballFragment = new Football();

         return footballFragment;

         case 1:

            Cricket cricketFragment = new Cricket();

         return cricketFragment;

         case 2:

            NBA nbaFragment = new NBA();

         return nbaFragment;

         default:

         return null;

      }

   }

   @Override

   public int getCount() {

      return totalTabs;

   }

}

FootBall.java

public class Football extends Fragment {

   public Football() {

      // Required empty public constructor

   }

   @Override

   public View onCreateView(LayoutInflater inflater, ViewGroup container,

    Bundle savedInstanceState) {

      return inflater.inflate(R.layout.fragment_football, container, false);

   }

}

fragment_football.xml

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

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

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

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   tools:context=".Football">

   <!-- TODO: Update blank fragment layout -->

   <TextView

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      android:textAlignment="center"

      android:text="Football Fragment"

      android:textSize="16sp"

      android:textStyle="bold"/>

</FrameLayout>

Cricket.java

public class Cricket extends Fragment {

   public Cricket() {

      // Required empty public constructor

   }

   @Override

   public View onCreateView(LayoutInflater inflater, ViewGroup container,

    Bundle savedInstanceState) {

      return inflater.inflate(R.layout.fragment_cricket, container, false);

   }

}

fragment_cricket.xml

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

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

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

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   tools:context=".Cricket">

   <TextView

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      android:textAlignment="center"

      android:text="Cricket Fragment"

      android:textSize="16sp"

      android:textStyle="bold"/>

</FrameLayout>

NBA.java

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class NBA extends Fragment {

   public NBA() {

      // Required empty public constructor

   }

   @Override

   public View onCreateView(LayoutInflater inflater, ViewGroup container,

    Bundle savedInstanceState) {

      return inflater.inflate(R.layout.fragment_nb, container, false);

   }

}

fragment_nba.xml

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

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

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

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   tools:context=".NBA">

   <!-- TODO: Update blank fragment layout -->

   <TextView

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      android:textAlignment="center"

      android:text="NBA Fragment"

      android:textSize="16sp"

      android:textStyle="bold"/>

</FrameLayout>

androidManifest.xml

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

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

   package="app.com.sample">

   <application

      android:allowBackup="true"

      android:icon="@mipmap/ic_launcher"

      android:label="@string/app_name"

      android:roundIcon="@mipmap/ic_launcher_round"

      android:supportsRtl="true"

      android:theme="@style/AppTheme">

      <activity android:name=".MainActivity">

         <intent-filter>

            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />

         </intent-filter>

      </activity>

   </application>

</manifest>

 

How to Create a Tab Layout in Android

No comments:

Post a Comment