Android TabLayout Tutorial
Android Tab Layout is The Popular Layout in Android. We See This Layout in Many Example of Application Like Whatsapp.
Tab Layout Contain Features Like Swapping Fragment With Out Destroying Fragment Means We Run Multi Fragment Simultaneously.
Each Tab in Tab Activity is A Fragment Which We Add In Our Activity Using View Pager.
Lets Start Create Today a Simple Tab Fragment With Three Tab and Each Tab Had its Own Fragment.
Step 1. Open Android Studio and Create a New Project.
Step 2 . Select Minimum Sdk Version
Step 3 . Select Tabbed Activity
Step 4 . Select Navigation Style.
Here Navigation is Three Types :-
1.Swipe Views : - Means No Tab Coming On Top.
2.Action Bar Tabs : - Means Activity with Top Tabs.
3.Action Bar Spinner : - Select Option for Switiching Tabs.
Meanwhile After This All Your Finger Swipe Will Work in All.
Step 5 . Now Our Project is Created But We Need To Implement Fragment.
Step 7. Create 3 Blank Fragment.
Step 8. This is Our New Project Structure.
Step 9. Now i am Going to Create a List With Fragment Datatype And Add the List in Viewpager Adapter.
Let's See.
//============Creating A List Of Fragments============= List<Fragment> fragments=new ArrayList<>(); fragments.add(new HomeFragment()); fragments.add(new ProfileFragment()); fragments.add(new ContactFrament());
Now Passing List in Constructor for Page Adapter
//===========passing list in contstructor for in fragment page Adapter==== mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(),fragments);
This Our Page Adapter Class
public class SectionsPagerAdapter extends FragmentPagerAdapter { List<Fragment> fragmentList=new ArrayList<>(); public SectionsPagerAdapter(FragmentManager fm,List<Fragment> fragments) { super(fm); fragmentList=fragments; } @Override public Fragment getItem(int position) { // getItem is called to instantiate the fragment for the given page. // Return a PlaceholderFragment (defined as a static inner class below). return fragmentList.get(position); } @Override public int getCount() { // Show 3 total pages. return fragmentList.size(); } }
Now Our Final Main Activity Code
package lichpit.supercoders.in.tablayoutexample; import android.net.Uri; import android.support.annotation.Nullable; import android.support.design.widget.TabLayout; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity implements HomeFragment.OnFragmentInteractionListener,ProfileFragment.OnFragmentInteractionListener,ContactFrament.OnFragmentInteractionListener{ /** * The {@link android.support.v4.view.PagerAdapter} that will provide * fragments for each of the sections. We use a * {@link FragmentPagerAdapter} derivative, which will keep every * loaded fragment in memory. If this becomes too memory intensive, it * may be best to switch to a * {@link android.support.v4.app.FragmentStatePagerAdapter}. */ private SectionsPagerAdapter mSectionsPagerAdapter; /** * The {@link ViewPager} that will host the section contents. */ private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); // Create the adapter that will return a fragment for each of the three // primary sections of the activity. Listfragments=new ArrayList<>(); fragments.add(new HomeFragment()); fragments.add(new ProfileFragment()); fragments.add(new ContactFrament()); mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(),fragments); // Set up the ViewPager with the sections adapter. mViewPager = (ViewPager) findViewById(R.id.container); mViewPager.setAdapter(mSectionsPagerAdapter); TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs); mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout)); tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager)); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @Override public void onFragmentInteraction(Uri uri) { } /** * A placeholder fragment containing a simple view. */ public static class PlaceholderFragment extends Fragment { /** * The fragment argument representing the section number for this * fragment. */ private static final String ARG_SECTION_NUMBER = "section_number"; public PlaceholderFragment() { } /** * Returns a new instance of this fragment for the given section * number. */ public static PlaceholderFragment newInstance(int sectionNumber) { PlaceholderFragment fragment = new PlaceholderFragment(); Bundle args = new Bundle(); args.putInt(ARG_SECTION_NUMBER, sectionNumber); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, false); TextView textView = (TextView) rootView.findViewById(R.id.section_label); textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER))); return rootView; } } /** * A {@link FragmentPagerAdapter} that returns a fragment corresponding to * one of the sections/tabs/pages. */ public class SectionsPagerAdapter extends FragmentPagerAdapter { List fragmentList=new ArrayList<>(); public SectionsPagerAdapter(FragmentManager fm,List fragments) { super(fm); fragmentList=fragments; } @Override public Fragment getItem(int position) { // getItem is called to instantiate the fragment for the given page. // Return a PlaceholderFragment (defined as a static inner class below). return fragmentList.get(position); } @Override public int getCount() { // Show 3 total pages. return fragmentList.size(); } } }
Our activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/appbar_padding_top" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_weight="1" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" app:title="@string/app_name"> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TabItem android:id="@+id/tabItem" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/tab_text_1" /> <android.support.design.widget.TabItem android:id="@+id/tabItem2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/tab_text_2" /> <android.support.design.widget.TabItem android:id="@+id/tabItem3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/tab_text_3" /> </android.support.design.widget.TabLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="@dimen/fab_margin" app:srcCompat="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>
Now Here I Don't Write My Fragment Code Because it Simple Blank Fragment.
Final Output :
You Can Change Title of Tab By Editing The Text from Tabitem in activity_main.xml.
<android.support.design.widget.TabItem android:id="@+id/tabItem3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="YOUR_TAB_TITLE" />
Download Complete Source Code : - Download
No comments:
Post a Comment