Let’s start,

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

Select blank app. Give Project Name and Project Location.



Step 2: Go to Solution Explorer-> Project Name-> Components. Right click to Get More Components, open new dialog box. This dialog box is required to search the CardView, add the Android Support Library V7 CardView Packages.



Step 3: Go to Solution Explorer-> Project Name-> Components, right click to Get More Components, open new dialog box. This dialog box is required to search the Support V7, add the Android Support v7 AppCompat Packages.



Step 4: Go to Solution Explorer-> Project Name-> Components. Right click to Get More Components, open new dialog box. This dialog box is required to search the Design, add the Android Support Design Library Packages.



Step 5: Before starting Design view you will need Theme.AppCompat.Light.NoActionBar; create styles.xml file. Go to Solution Explorer-> Project Name->Resources->values. Right click to Add->New Item, open new dialog box. Select XML file, give the name for styles.xml.



Step 6: Create colors.xml file. Go to Solution Explorer-> Project Name->Resources->values. Right click to Add->New Item. Open new dialog box. Select XML file and give the name for colors.xml.



Step 7: We need dimensions for the card view margin. Thus, create dimens.xml file. Go to Solution Explorer-> Project Name->Resources->values. Right click to Add->New Item, open new dialog box. Select XML file and give the name for dimens.xml.



Step 8: Open Solution Explorer-> Project Name->Resources->values->colors.xml. Click to open Design View and the code, given below:.

  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 9: Open Solution Explorer-> Project Name->Resources->values->styles.xml. Click to open Design View and the code, given below:

  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="Widget.CardContent" parent="android:Widget">
  10. <item name="android:paddingLeft">16dp</item> <item name="android:paddingRight">16dp</item> <item name="android:paddingTop">24dp</item> <item name="android:paddingBottom">24dp</item> <item name="android:orientation">vertical</item>
  11. </style>
  12. </resources>

Step 10: Open Solution Explorer-> Project Name->Resources->values->dimens.xml. Click to open Design View and the code, given below:

  1. <resources>
  2. <dimen name="drawer_width">240dp</dimen>
  3. <dimen name="detail_backdrop_height">256dp</dimen>
  4. <dimen name="card_margin">16dp</dimen>
  5. <dimen name="fab_margin">16dp</dimen>
  6. <dimen name="list_item_avatar_size">40dp</dimen>
  7. </resources>

Step 11: Open Solution Explorer-> Project Name->Resources->layout ->Main.axml. Click to open Design View and the code, given below:





XAML CODE

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">
  3. <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:fitsSystemWindows="true">
  4. <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginEnd="64dp">
  5. <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/anbu" android:fitsSystemWindows="true" app:layout_collapseMode="parallax" />
  6. <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout>
  7. </android.support.design.widget.AppBarLayout>
  8. <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior">
  9. <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingTop="24dp">
  10. <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/card_margin" android:layout_marginLeft="@dimen/card_margin" android:layout_marginRight="@dimen/card_margin">
  11. <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content">
  12. <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="NAME" android:textAppearance="@style/TextAppearance.AppCompat.Title" />
  13. <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Anbu M" /> </LinearLayout>
  14. </android.support.v7.widget.CardView>
  15. <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/card_margin" android:layout_marginLeft="@dimen/card_margin" android:layout_marginRight="@dimen/card_margin">
  16. <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content">
  17. <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="PLACE" android:textAppearance="@style/TextAppearance.AppCompat.Title" />
  18. <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="India" /> </LinearLayout>
  19. </android.support.v7.widget.CardView>
  20. <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/card_margin" android:layout_marginLeft="@dimen/card_margin" android:layout_marginRight="@dimen/card_margin">
  21. <LinearLayout style="@style/Widget.CardContent" android:layout_width="match_parent" android:layout_height="wrap_content">
  22. <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Profession" android:textAppearance="@style/TextAppearance.AppCompat.Title" />
  23. <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Developer" /> </LinearLayout>
  24. </android.support.v7.widget.CardView>
  25. </LinearLayout>
  26. </android.support.v4.widget.NestedScrollView>
  27. </android.support.design.widget.CoordinatorLayout>
Step 12: After Design view creation, open Solution Explorer-> Project Name->MainActivity.cs and the steps, given below:

Step 13: Add Namespaces, given below:

  1. using Android.Support.V7.App;
  2. using Android.Support.Design.Widget;
  3. using V7Toolbar = Android.Support.V7.Widget.Toolbar;

Step 14: Create ViewPager variable. Declare the viewpager within the OnCreate().before to change to the Activity to AppCompatActivity.



C# Code

  1. public class MainActivity: AppCompatActivity
  2. {
  3. protected override void OnCreate(Bundle bundle)
  4. {
  5. base.OnCreate(bundle);
  6. // Set our view from the "main" layout resource
  7. SetContentView(Resource.Layout.Main);
  8. var toolbar = FindViewById < V7Toolbar > (Resource.Id.toolbar);
  9. SetSupportActionBar(toolbar);
  10. SupportActionBar.SetDisplayHomeAsUpEnabled(true);
  11. var collapsingToolbar = FindViewById < CollapsingToolbarLayout > (Resource.Id.collapsing_toolbar);
  12. collapsingToolbar.Title = "WHO I AM?";
  13. }
  14. }

Step 15: Press F5 or build and run the Application.



Finally, we successfully created Xamarin Android CollapsingToolbarLayout, NestedScrollView, CardView, using XamarinAndroidSupportDesign.