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">
  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"
  6. android:id="@+id/main_content"
  8. android:layout_width="match_parent"
  10. android:layout_height="match_parent">
  11. <android.support.design.widget.AppBarLayout
  13. android:id="@+id/appbar"
  15. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  19. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  20. <android.support.v7.widget.Toolbar
  22. android:id="@+id/toolbar"
  24. android:layout_width="match_parent"
  26. android:layout_height="?attr/actionBarSize"
  28. android:background="#33B86C"
  30. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  31. <android.support.design.widget.TabLayout
  33. android:id="@+id/tabs"
  35. android:layout_width="match_parent"
  37. app:tabGravity="fill"
  39. app:tabMode="fixed"
  41. app:tabIndicatorHeight="4dp"
  43. android:background="#FEFEFE"
  45. style="@style/MyCustomTabLayout"
  47. android:layout_height="wrap_content" />
  48. </android.support.design.widget.AppBarLayout>
  49. <android.support.v4.view.ViewPager
  51. android:id="@+id/viewpager"
  53. android:layout_width="match_parent"
  55. android:layout_height="match_parent"
  57. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  58. <android.support.design.widget.FloatingActionButton
  60. android:id="@+id/fab"
  62. android:layout_width="wrap_content"
  64. android:layout_height="wrap_content"
  66. android:layout_gravity="end|bottom"
  68. android:layout_margin="15dp"
  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
  3. android:text="First Page"
  5. android:textAppearance="?android:attr/textAppearanceLarge"
  7. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  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
  3. android:text="Second Page"
  5. android:textAppearance="?android:attr/textAppearanceLarge"
  7. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  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.