Xamarin

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs