Xamarin Android: Working with material design TabLayout and ViewPager
How to create a TabLayout with ViewPager, they like the picture?
http://i.imgur.com/1fgC3yv.png
First, add these references from NuGet:
- Xamarin.Android.Support.Design.23.3.0
- Xamarin.Android.Support.v4.23.3.0
- Xamarin.Android.Support.v7.AppCompat.23.3.0
- Xamarin.Android.Support.v7.RecyclerView.23.3.0
- Xamarin.Android.Support.Vector.Drawable.23.3.0
- Xamarin.Android.Support.Animated.Vector.Drawable.23.3.0
1. Making the App Material
NOTE: The app material supports API 21 later.
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``>
Open AndroidManifest.xml and modify the theme to our customized theme by changing the Android: Theme attribute value.
<``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.view.ViewPager
``android:id``=``"@+id/viewpager"
``android:layout_width``=``"match_parent"
``android:layout_height``=``"match_parent" />
</``LinearLayout``>
Fixed tabs in Main.xaml
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");
``viewPager.Adapter=adapter;
``}
Create a ViewPagerAdapter class and write code as below:
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
<``spanclass``=``"s1"``>public class Explore : Android.Support.V4.App.Fragment</``span``><``spanclass``=``"s2"``> </``span``>If you don't want to have icons in tabLayout you can remove setupTabIcons();
See Also
Source