Create ViewPager, TabLayout, FloatingActionButton, SupportActionBar Using XamarinAndroidSupportDesign

Step 1: Open Visual Studio->New Project->Templates->Visual C#->Android->Blank App.

Select Blank App. Then, give Project Name and Project Location.



Step 2

Next, go to Solution Explorer-> Project Name-> Components and right click to get More Components. Open a new dialog box. Use this dialog box to search the Support v4.  Then, add the Android Support Library v4 packages.


Step 3

Next, go to Solution Explorer-> Project Name-> Components. Right click to get more components and open a new dialog box. In this dialog box, search the Support v7. Then, add the Android Support v7 AppCompat packages.



Step 4

Next, go to Solution Explorer-> Project Name-> Components. Right click to get more components and open a new dialog box. In this dialog box, search for the Design. Then, add the Android Support Design Library packages.

Step 5

Before starting the Design View, it needs Theme.AppCompat.Light.NoActionBar. So, we create style.xml file. Go to Solution Explorer-> Project Name->Resources->values. Right click to Add->New Item and then, open a new dialog box. Then, select xml file and name it as styles.xml.



Step 6

Next, we need to create color.xml file. Go to Solution Explorer-> Project Name->Resources->values. Right click to Add->New Item. Then, open a new dialog box. Selet an xml file and name it as colors.xml.



Step 7

Now, open Solution Explorer-> Project Name->Resources->values->colors.xml. Click to open the Design View and give the following code:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <resources>  
  3.     <color name="ColorPrimary">#2196F3</color>  
  4.     <color name="ColorPrimaryDark">#1976D2</color>  
  5. </resources>  

Step 8

Next, open Solution Explorer-> Project Name->Resources->values->styles.xml. Click to open Design View and paste the following code:

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <resources>  
  3.     <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">  
  4.   
  5.     </style>  
  6.     <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">  
  7.         <item name="colorPrimary">@color/ColorPrimary</item> <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>  
  8.     </style>  
  9.     <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">  
  10.         <item name="tabTextColor">#707070</item> <item name="tabSelectedTextColor">#00A859</item> <item name="tabIndicatorColor">#00A859</item> <item name="android:textStyle">bold</item> <item name="tabTextAppearance">@style/TextAppearance.AppCompat.Subhead.Inverse</item>  
  11.     </style>  
  12. </resources>  

Here, the name for MyCustomTabLayout is showing TabLayout in Design view.

Step 9

Again, open Solution Explorer-> Project Name->Resources->layout ->Main.axml. Click to open the Design View and give the following code:

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.design.widget.CoordinatorLayout  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  5.   
  6. android:id="@+id/main_content"  
  7.   
  8. android:layout_width="match_parent"  
  9.   
  10. android:layout_height="match_parent">  
  11.     <android.support.design.widget.AppBarLayout  
  12.   
  13. android:id="@+id/appbar"  
  14.   
  15. android:layout_width="match_parent"  
  16.   
  17. android:layout_height="wrap_content"  
  18.   
  19. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
  20.         <android.support.v7.widget.Toolbar  
  21.   
  22. android:id="@+id/toolbar"  
  23.   
  24. android:layout_width="match_parent"  
  25.   
  26. android:layout_height="?attr/actionBarSize"  
  27.   
  28. android:background="#33B86C"  
  29.   
  30. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />  
  31.         <android.support.design.widget.TabLayout  
  32.   
  33. android:id="@+id/tabs"  
  34.   
  35. android:layout_width="match_parent"  
  36.   
  37. app:tabGravity="fill"  
  38.   
  39. app:tabMode="fixed"  
  40.   
  41. app:tabIndicatorHeight="4dp"  
  42.   
  43. android:background="#FEFEFE"  
  44.   
  45. style="@style/MyCustomTabLayout"  
  46.   
  47. android:layout_height="wrap_content" />  
  48.     </android.support.design.widget.AppBarLayout>  
  49.     <android.support.v4.view.ViewPager  
  50.   
  51. android:id="@+id/viewpager"  
  52.   
  53. android:layout_width="match_parent"  
  54.   
  55. android:layout_height="match_parent"  
  56.   
  57. app:layout_behavior="@string/appbar_scrolling_view_behavior" />  
  58.     <android.support.design.widget.FloatingActionButton  
  59.   
  60. android:id="@+id/fab"  
  61.   
  62. android:layout_width="wrap_content"  
  63.   
  64. android:layout_height="wrap_content"  
  65.   
  66. android:layout_gravity="end|bottom"  
  67.   
  68. android:layout_margin="15dp"  
  69.   
  70. android:src="@drawable/ic_done" />  
  71. </android.support.design.widget.CoordinatorLayout>  

Step 10: After Design view creation open Solution Explorer-> Project Name->MainActivity.cs then following below steps.

Step 11: Add below Namespaces,

  1. using Android.Support.V4.View;  
  2. using Android.Support.V7.App;  
  3. using Android.Support.Design.Widget;  
  4. using V4Fragment = Android.Support.V4.App.Fragment;  
  5. using V4FragmentManager = Android.Support.V4.App.FragmentManager;  
  6. using System.Collections.Generic;  
  7. using V7Toolbar = Android.Support.V7.Widget.Toolbar;  

Step 12

Now, we need to create ViewPager variable and declare the viewpager within the OnCreate(). Before it, we need to change the Activity in 
AppCompatActivity.

  1. //SupportActionBar  
  2. SetSupportActionBar(toolbar);  
  3. SupportActionBar.SetIcon(Resource.Drawable.Icon);  
  4. //ViewPager  
  5. viewpager = FindViewById < Android.Support.V4.View.ViewPager > (Resource.Id.viewpager);  
  6. var toolbar = FindViewById < V7Toolbar > (Resource.Id.toolbar);  
  7. setupViewPager(viewpager); //Calling SetupViewPager Method  
  8. //TabLayout  
  9. var tabLayout = FindViewById < TabLayout > (Resource.Id.tabs);  
  10. tabLayout.SetupWithViewPager(viewpager);  
  11. //FloatingActionButton  
  12. var fab = FindViewById < FloatingActionButton > (Resource.Id.fab);  
  13. fab.Click += (sender, e) => {  
  14.     Snackbar.Make(fab, "Here's a snackbar!", Snackbar.LengthLong).SetAction("Action", v => Console.WriteLine("Action handler")).Show();  
  15. };  

Step 13: Next step is to create setupViewPager() method. We need to create some fragment page. So, we create fragment class and two axml design pages.

Step 14

Go to Solution Explorer-> Project Name->Resources->layout. Right click to Add->New Item and then, open a new dialog box. Then, select Android Layout and name it as Tablayout1.axml.



Step 15

Go to Solution Explorer-> Project Name->Resources->layout. Right click to Add->New Item and open a new dialog box. Then, select Android Layout and give it a name as Tablayout2.axml.

 

Step 16

Go to Solution Explorer-> Project Name. Right click to Add->New Item and then, open a new dialog box. Then, select Fragment and name it as TabFragment1.cs.



Step 17

Go to Solution Explorer-> Project Name. Right click to Add->New Item and open a new dialog box. Then, select Fragment and give it a name as TabFragment2.cs.



Step 18

Now, open Solution Explorer-> Project Name->Resources->layout ->Tablayout1.axml. Click on open Design View and use following code. 

  1. <TextView  
  2.   
  3. android:text="First Page"  
  4.   
  5. android:textAppearance="?android:attr/textAppearanceLarge"  
  6.   
  7. android:layout_width="match_parent"  
  8.   
  9. android:layout_height="wrap_content"  
  10.   
  11. android:id="@+id/textView1" />  

Step 19

Next, open Solution Explorer-> Project Name->Resources->layout ->Tablayout2.axml. Click to open Design View and paste the following code:

  1. <TextView  
  2.   
  3. android:text="Second Page"  
  4.   
  5. android:textAppearance="?android:attr/textAppearanceLarge"  
  6.   
  7. android:layout_width="match_parent"  
  8.   
  9. android:layout_height="wrap_content"  
  10.   
  11. android:id="@+id/textView1" />  

Step 20

After the creation of Design View, we need to open Solution Explorer-> Project Name->TabFragment1.cs. Then, create View and Change Fragment to
Fragment,

  1. public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  2. {  
  3.     var v = inflater.Inflate(Resource.Layout.Tablayout1, container, false);  
  4.     return v;  
  5. }  

Step 21: Next, open Solution Explorer-> Project Name->TabFragment2.cs. Then, create View and Change Fragment to Fragment,

  1. public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  2. {  
  3.     var v = inflater.Inflate(Resource.Layout.Tablayout2, container, false);  
  4.     return v;  
  5. }  

Step 22: Again, we need to open the MainActivity.cs to create SetupViewpager() after OnCreaete().

  1. void setupViewPager(Android.Support.V4.View.ViewPager viewPager)  
  2. {  
  3.     var adapter = new Adapter(SupportFragmentManager);  
  4.     adapter.AddFragment(new TabFragment1(), "First Fragment");  
  5.     adapter.AddFragment(new TabFragment2(), "Second Fragment");  
  6.     viewPager.Adapter = adapter;  
  7.     viewpager.Adapter.NotifyDataSetChanged();  
  8. }  

Here, we use SupportFragmentManager to create New Adapter Class below the setupViewPager.

Adpater Class

  1. class Adapter: Android.Support.V4.App.FragmentPagerAdapter {  
  2.     List < V4Fragment > fragments = new List < V4Fragment > ();  
  3.     List < string > fragmentTitles = new List < string > ();  
  4.     public Adapter(V4FragmentManager fm): base(fm) {}  
  5.     public void AddFragment(V4Fragment fragment, String title) {  
  6.         fragments.Add(fragment);  
  7.         fragmentTitles.Add(title);  
  8.     }  
  9.     public override V4Fragment GetItem(int position) {  
  10.         return fragments[position];  
  11.     }  
  12.     public override int Count {  
  13.         get {  
  14.             return fragments.Count;  
  15.         }  
  16.     }  
  17.     public override Java.Lang.ICharSequence GetPageTitleFormatted(int position) {  
  18.         return new Java.Lang.String(fragmentTitles[position]);  
  19.     }  
  20. }  

Step 23: Press F5 or Build and Run the Application.





Finally, we have successfully created the Xamarin Android Viewpager, Tablayout, FloactionAction, SupportActionBar using XamarinAndroidSupportDesign.