Post
Ask Question

Creating CollapsingToolbarLayout, NestedScrollView, and CardView In Android

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">  
  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="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.


Similar Articles