How to create a TabLayout with ViewPager, they like the picture?
First, add these referencesji-content-fragment-bottom">
Resources For IT Professionals
How to create a TabLayout with ViewPager, they like the picture?
First, add these referencesji-content-fragment-bottom">
Create an XML file Themes located under resource / values.
<?xml version="1.0"
encoding="UTF-8" ?><resources> <style name="PrimaryThemes"
parent="Theme.AppCompat.Light"> <item name="windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="colorPrimary">#E53935</item> <item name="colorPrimaryDark">#D32F2F</item> </style> <!--TabLayout Theme--> <style name="TabLayoutThemes"
parent="Widget.Design.TabLayout"> <item name="tabIndicatorColor">#FFFFFF</item> <!-- tabIndicatorColor is color of underline each tabs. <item name="tabIndicatorHeight">2dp</item><!-- tabIndicatorHeight is height of underline <item name="tabSelectedTextColor">#212121</item><!-- color of text when tabs be selected </style><resources>
<application android:allowBackup="true"
android:icon="@mipmap/icon" android:label="@string/app_name"
android:theme="@style/PrimaryThemes">
Open the layout of main activity is Main.axml and add layout code:
<?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" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" style="@style/TabLayoutThemes" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?android:attr/colorPrimary" app:tabGravity="fill" app:tabMode="fixed"
/> <android.support.v4.viewtyle/TabLayoutThemes" android:layout_width="match_parent" android:layout_height="wrap_content" .ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"
/></LinearLayout>
Fixed tabs should be used when you have limited number of tabs. These tabs are fixed in position. So you have to use:
app:tabMore="fixed"
If you have many tabs you have to use app:tabMore="scrollable" instead of app:tabMore="fixed".
Finally, adding the theme in XML in style of TabLayout.
Open MainActivity.cs and write code:tabLayout.setupWithViewPager -> Assigns the ViewPager to TabLayout
setupViewPager()-> Defines the number of tabs by setting appropriate fragment and tabname
VIewPagerAdapter -> Custom adapter class provides fragments required for the viewpager.
public class MainActivity : AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; private int[] tabIcons = { Resource.Drawable.SearchWhite, Resource.Drawable.BookmarkWhite, Resource.Drawable.ChristmasWhite, Resource.Drawable.MenuWhite }; protected override void OnCreate (Bundle savedInstanceState) { base.OnCreate (savedInstanceState); // Set our view from the "main" layout resource SetContentView (Resource.Layout.Main); // Get our button from the layout resource, // and attach an event to it viewPager=FindViewById<ViewPager>(Resource.Id.viewpager); setupViewPager (viewPager); tabLayout = FindViewById<TabLayout> (Resource.Id.sliding_tabs); tabLayout.SetupWithViewPager (viewPager); setupTabIcons (); }
private void setupTabIcons() { tabLayout.GetTabAt (0).SetIcon(tabIcons[0]); tabLayout.GetTabAt (1).SetIcon(tabIcons[1]); tabLayout.GetTabAt (2).SetIcon(tabIcons[2]); tabLayout.GetTabAt (3).SetIcon(tabIcons[3]); } private Explore exploreFrg; private Featured featuredFrg; private void InditialFragment() { exploreFrg = new Explore (); featuredFrg = new Featured (); moreFrg = new More (); todoFrag = new Todo (); } public void setupViewPager(ViewPager viewPager) { InditialFragment (); ViewPagerAdapter adapter = new ViewPagerAdapter (SupportFragmentManager); adapter.addFragment (exploreFrg, "Explore"); adapter.addFragment (featuredFrg, "Featured");} public void setupViewPager(ViewPager viewPager) viewPager.Adapter=adapter; }public class ViewPagerAdapter : FragmentPagerAdapter
{ private List<Android.Support.V4.App.Fragment> mFragmentList=new List<Android.Support.V4.App.Fragment>(); private List<string> mFragmentTitleList=new List<string>(); public ViewPagerAdapter(Android.Support.V4.App.FragmentManager manager) :base(manager) { //base.OnCreate(manager); } public override int Count{ get { return mFragmentList.Count; } } public override Android.Support.V4.App.Fragment GetItem(int postion) { return mFragmentList [postion]; } public override ICharSequence GetPageTitleFormatted(int position) { return new Java.Lang.String(mFragmentTitleList [position].ToLower());// display the title //return null;// display only the icon } public void addFragment(Android.Support.V4.App.Fragment fragment,string title) { mFragmentList.Add (fragment); mFragmentTitleList.Add (title); } }In exploreFrg. you have to add more
<span class="s1">public class Explore : Android.Support.V4.App.Fragment</span><span
class="s2"> </span>If you don't want to have icons in tabLayout you can remove setupTabIcons();