Post
Ask Question

How To Use Constraint Layout In Xamarin.Android

What is Constraint Layout?

 
Constraint helps to reduce the hierarchy of Views and increase the layout performance and flexibility of Views. It helps to design based on positing, size, dimension, and alignment of different Views. Constraint Layout has different attributes to set Views in the layout. You can set the View of any position of the layout easily rather than that in Relative Layout. It supports Android and iOS platforms. Constraint layout comes under ViewGroup.
 

Advantages of Constraint Layout

  • Flat View Hierarchy and no nested view.
  • Better performance and high responsiveness.
  • Align position, size, and alignment of the screen.
  • Support Android (API 9) and iOS Platform.

Some Important Constraint Layout Properties and Attributes

 
These attributes take only id or parent. Align view from any side of the target view.,
  • layout_constraintLeft_toLeftOf - align left of the desired view is left of the target view.
  • layout_constraintLeft_toRightOf - align left of the desired view is right of the target view.
  • layout_constraintRight_toLeftOf - align-right of the desired view is left of the target view.
  • layout_constraintRight_toRightOf - align-right of the desired view is right of the target view.
  • layout_constraintTop_toTopOf - align the top of the desired view is top of the target view.
  • layout_constraintTop_toBottomOf - align the top of the desired view is the bottom of the target view.
  • layout_constraintBottom_toTopOf - align the bottom of the desired view is top of the target view.
  • layout_constraintBottom_toBottomOf - align the bottom of the desired view is the bottom of the target view.
  • layout_constraintBaseline_toBaselineOf - align the baseline of the desired view is the baseline of the target view.
  • layout_constraintStart_toEndOf - align the start of the desired view is the end of the target view.
  • layout_constraintStart_toStartOf - align the start of the desired view is the start of the target view.
  • layout_constraintEnd_toStartOf - align the end of the desired view is the start of the target view.
  • layout_constraintEnd_toEndOf - align the end of the desired view is the end of the target view.
Margin Attributes - These attributes take only positive values.
  • layout_marginStart - Margin from start side of the desired view.
  • layout_marginEnd - Margin from the end side of the desired view.
  • layout_marginLeft - Margin from the left side of the desired view.
  • layout_marginTop - Margin from the top side of the desired view.
  • layout_marginRight - Margin from the right side of the desired view.
  • layout_marginBottom - Margin from the bottom side of the desired view.
Let's see how to use Constraint Layout to design or align views in Xamarin.Android.
 
Android output
 
How To Use Constraint Layout InXamarin.Android How To Use Constraint Layout InXamarin.Android

There is no default package for constraint layout in Xamarin.Android. So, we need to install a plugin for this.

How To Use Constraint Layout InXamarin.Android
 
 
Follow these steps to archive the above view using Constraint Layout.
 
Let’s start.
 
Step 1 - Create a new project
 
You can create a Xamarin Android app by going to File >> New >> Android under select App. In the General section, select Android App then, click "Next".
 
In the new window, enter and select your application name, theme and compatibility followed by click "Create project".
 
How To Use Constraint Layout InXamarin.Android
 
Step 2 - Add Constraint Layout Plugin
 
After project creation add the following NuGet package to your project
For that, Right-click packages and select "Add packages". A new dialog appears. At the right-top corner, search for “Xamarin.Android.Support.Constraint.Layout” and click the "Add Packages" button.
 
Step 3 - Design Instruction
 
Now, design the Signup page. For that, go to Solution Explorer >> Resource >> layout >> double click to open content_main.xml. First, we need to set the root of the layout as a Constraint layout and declare the app namespace.
  1. <android.support.constraint.ConstraintLayout      
  2.         xmlns:android="http://schemas.android.com/apk/res/android"      
  3.         xmlns:app="http://schemas.android.com/apk/res-auto"      
  4.         xmlns:tools="http://schemas.android.com/tools"      
  5.         android:id="@+id/container"      
  6.         android:background="@drawable/gradientcolor_rose"      
  7.         android:layout_width="match_parent"      
  8.         android:layout_height="match_parent"      
  9.         android:paddingBottom="@dimen/activity_vertical_margin"      
  10.         android:paddingLeft="@dimen/activity_horizontal_margin"      
  11.         android:paddingRight="@dimen/activity_horizontal_margin"      
  12.         android:paddingTop="@dimen/activity_vertical_margin"      
  13.         android:hapticFeedbackEnabled="false">      
  14. </android.support.constraint.ConstraintLayout >    
Now, start your design. Set the image button in the left top corner of the page. The below Constraint attribute is used to set the image button based on parent view.
  1. app:layout_constraintLeft_toLeftOf = “parent”    
  2. app:layout_constraintTop_toTopOf = “parent”   
Logo Image
 
This view is set by the right of the image button and center of the parent. The top, end, start attribute of image is set based on parent view and another one attribute is set based on another view id.
  1. app:layout_constraintTop_toTopOf="parent"  
  2. app:layout_constraintStart_toEndOf="@+id/imageView2"  
  3. app:layout_constraintStart_toStartOf="parent"  
  4. app:layout_constraintEnd_toEndOf="parent"  
Text View
 
This view is set below the image and to the left side of the parent. The below constraint attributes are used to set the text in the correct position. The first left attribute is set based on the parent but other attributes are set by different id.
  1. app:layout_constraintLeft_toLeftOf="parent"  
  2. app:layout_constraintTop_toBottomOf="@+id/imageView"  
  3. app:layout_constraintBottom_toTopOf="@+id/txtFirstName"     
As well as, you can set other child views using different attributes.
 
Step 4 - Login Page Design
 
Now, let us design the Login Page. For that, go to Solution Explorer >> Resource >> layout >> double-click to open login_activity.xml. This page code given below,
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <android.support.constraint.ConstraintLayout    
  3.     xmlns:android="http://schemas.android.com/apk/res/android"    
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"    
  5.     xmlns:tools="http://schemas.android.com/tools"    
  6.     android:id="@+id/container"    
  7.     android:layout_width="match_parent"    
  8.     android:layout_height="match_parent"    
  9.     android:background="@drawable/BackgroundImagegradient"    
  10.     android:paddingBottom="@dimen/activity_vertical_margin"    
  11.     android:paddingLeft="@dimen/activity_horizontal_margin"    
  12.     android:paddingRight="@dimen/activity_horizontal_margin"    
  13.     android:paddingTop="@dimen/activity_vertical_margin"    
  14.     android:hapticFeedbackEnabled="false">    
  15.     <ImageView    
  16.         android:layout_width="60dp"    
  17.         android:layout_height="120dp"    
  18.         app:srcCompat="@drawable/water64"    
  19.         android:id="@+id/imageView"    
  20.         android:layout_marginBottom="8dp"    
  21.         app:layout_constraintEnd_toEndOf="parent"    
  22.         android:layout_marginEnd="8dp"    
  23.         android:layout_marginRight="8dp"    
  24.         app:layout_constraintStart_toStartOf="parent"    
  25.         android:layout_marginLeft="8dp"    
  26.         android:layout_marginStart="8dp"    
  27.         android:layout_marginTop="8dp"    
  28.         app:layout_constraintTop_toTopOf="parent"/>    
  29.     <TextView    
  30.         android:text="LOGIN"    
  31.         android:id="@+id/txtlogin"    
  32.         android:textColor="@color/colorWhite"    
  33.         android:layout_width="108dp"    
  34.         android:layout_height="47dp"    
  35.         app:layout_constraintTop_toBottomOf="@id/imageView"    
  36.         android:layout_marginEnd="8dp"    
  37.         android:layout_marginRight="8dp"    
  38.         app:layout_constraintStart_toStartOf="parent"    
  39.         android:layout_marginLeft="8dp"    
  40.         android:layout_marginStart="8dp"    
  41.         android:layout_marginBottom="8dp"    
  42.         android:textSize="20dp"    
  43.         android:gravity="center_vertical"    
  44.         android:textStyle="bold"    
  45.         android:paddingLeft="3dp"/>    
  46.     <android.support.design.widget.TextInputLayout    
  47.         android:id="@+id/etPasswordLayout1"    
  48.         android:layout_width="363dp"    
  49.         android:layout_height="70dp"    
  50.         android:layout_marginBottom="8dp"    
  51.         app:layout_constraintTop_toBottomOf="@id/txtlogin"    
  52.         app:layout_constraintStart_toStartOf="parent"    
  53.         android:layout_marginLeft="8dp"    
  54.         android:layout_marginStart="8dp"    
  55.         app:layout_constraintEnd_toEndOf="parent"    
  56.         android:layout_marginEnd="8dp"    
  57.         android:layout_marginRight="8dp">    
  58.         <android.support.design.widget.TextInputEditText    
  59.             android:id="@+id/etPassword1"    
  60.             android:layout_width="match_parent"    
  61.             android:layout_height="wrap_content"    
  62.             android:textColor="@color/colorWhite"    
  63.             android:hint="User Mail Id"    
  64.             android:inputType="textEmailAddress"/>    
  65.     </android.support.design.widget.TextInputLayout>    
  66.     <android.support.design.widget.TextInputLayout    
  67.         android:id="@+id/etPasswordLayout"    
  68.         android:layout_width="363dp"    
  69.         android:layout_height="wrap_content"    
  70.         app:passwordToggleEnabled="true"    
  71.         android:layout_marginTop="8dp"    
  72.         app:layout_constraintTop_toBottomOf="@id/etPasswordLayout1"    
  73.         android:layout_marginBottom="8dp"    
  74.         app:layout_constraintStart_toStartOf="parent"    
  75.         android:layout_marginLeft="8dp"    
  76.         android:layout_marginStart="8dp"    
  77.         app:layout_constraintEnd_toEndOf="parent"    
  78.         android:layout_marginEnd="8dp"    
  79.         android:layout_marginRight="8dp">    
  80.         <android.support.design.widget.TextInputEditText    
  81.             android:id="@+id/etPassword"    
  82.             android:layout_width="match_parent"    
  83.             android:layout_height="wrap_content"    
  84.             android:textColor="@color/colorWhite"    
  85.             android:hint="Password"    
  86.             android:inputType="textPassword"/>    
  87.     </android.support.design.widget.TextInputLayout>    
  88.     <TextView    
  89.         android:text="Forget Password ?    "    
  90.         android:layout_width="wrap_content"    
  91.         android:textColor="@color/colorWhite"    
  92.         android:layout_height="29dp"    
  93.         android:id="@+id/textView2"    
  94.         android:layout_marginBottom="8dp"    
  95.         app:layout_constraintTop_toBottomOf="@+id/etPasswordLayout"    
  96.         app:layout_constraintEnd_toEndOf="parent"    
  97.         app:layout_constraintRight_toRightOf="parent"    
  98.         android:layout_marginEnd="8dp"    
  99.         android:layout_marginRight="20dp"    
  100.         android:layout_marginLeft="8dp"    
  101.         android:layout_marginStart="8dp"/>    
  102.     <Button    
  103.         android:text="LOGIN"    
  104.         android:layout_width="wrap_content"    
  105.         android:layout_height="40dp"    
  106.         android:id="@+id/button"    
  107.         android:textColor="@color/colorWhite"    
  108.         android:background="@drawable/border_button"    
  109.         app:layout_constraintEnd_toEndOf="parent"    
  110.         android:layout_marginEnd="8dp"    
  111.         android:layout_marginRight="8dp"    
  112.         app:layout_constraintStart_toStartOf="parent"    
  113.         android:layout_marginLeft="8dp"    
  114.         android:layout_marginStart="8dp"    
  115.         android:layout_marginTop="8dp"    
  116.         app:layout_constraintTop_toBottomOf="@+id/textView2"    
  117.         android:layout_marginBottom="8dp"/>    
  118.     <android.support.design.widget.FloatingActionButton    
  119.         android:layout_width="wrap_content"    
  120.         android:layout_height="wrap_content"    
  121.         android:clickable="true"    
  122.         app:srcCompat="@drawable/plus16"    
  123.         android:id="@+id/floatingActionButton"    
  124.         android:layout_marginTop="178dp"    
  125.         app:backgroundTint="#FF007F"    
  126.         android:layout_marginBottom="8dp"    
  127.         app:layout_constraintTop_toBottomOf="@+id/textView2"    
  128.         app:layout_constraintEnd_toEndOf="parent"    
  129.         android:layout_marginEnd="8dp"    
  130.         android:layout_marginRight="35dp"    
  131.         android:layout_marginStart="8dp"    
  132.         android:layout_marginLeft="50dp"    
  133.         app:fabSize="normal"/>    
  134. </android.support.constraint.ConstraintLayout>   
Step 5 - Signup Page Design
 
Now, create a background color of Signup page named as grandientcolor_rose.xml. Add new XML page by right-clicking the drawable folder >> Add new File >> Left bar select Android >> next followed by select XML file >> give the name as grandientcolor_rose.xml. Copy and paste the below code.
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <android.support.constraint.ConstraintLayout    
  3.         xmlns:android="http://schemas.android.com/apk/res/android"    
  4.         xmlns:app="http://schemas.android.com/apk/res-auto"    
  5.         xmlns:tools="http://schemas.android.com/tools"    
  6.         android:id="@+id/container"    
  7.         android:background="@drawable/gradientcolor_rose"    
  8.         android:layout_width="match_parent"    
  9.         android:layout_height="match_parent"    
  10.         android:paddingBottom="@dimen/activity_vertical_margin"    
  11.         android:paddingLeft="@dimen/activity_horizontal_margin"    
  12.         android:paddingRight="@dimen/activity_horizontal_margin"    
  13.         android:paddingTop="@dimen/activity_vertical_margin"    
  14.         android:hapticFeedbackEnabled="false">    
  15.     <ImageButton    
  16.             android:layout_width="20dp"    
  17.             android:layout_height="20dp"    
  18.             android:background = "@null"    
  19.             android:src="@drawable/xmark16"    
  20.             android:id="@+id/imageView2"    
  21.             android:layout_marginTop="8dp"    
  22.             app:layout_constraintTop_toTopOf="parent"    
  23.             app:layout_constraintLeft_toLeftOf="parent"    
  24.             android:layout_marginEnd="8dp"    
  25.             android:layout_marginRight="8dp"    
  26.             app:layout_constraintStart_toStartOf="parent"    
  27.             android:layout_marginLeft="8dp"    
  28.             android:layout_marginStart="8dp"    
  29.             android:layout_marginBottom="8dp"/>    
  30.     <ImageView    
  31.             android:layout_width="60dp"    
  32.             android:layout_height="120dp"    
  33.             app:layout_constraintStart_toStartOf="parent"    
  34.             android:src="@drawable/water64"    
  35.             android:id="@+id/imageView"    
  36.             app:layout_constraintEnd_toEndOf="parent"    
  37.             android:layout_marginEnd="8dp"    
  38.             android:layout_marginRight="20dp"    
  39.             android:layout_marginLeft="8dp"    
  40.             android:layout_marginStart="8dp"    
  41.             app:layout_constraintTop_toTopOf="parent"    
  42.             app:layout_constraintStart_toEndOf="@+id/imageView2"/>    
  43.     <TextView    
  44.             android:text="SIGN UP"    
  45.             android:layout_width="108dp"    
  46.             android:layout_height="47dp"    
  47.             android:layout_marginTop="2dp"    
  48.             android:layout_marginBottom="8dp"    
  49.             android:textSize="20dp"    
  50.             android:textColor="@color/colorWhite"    
  51.             android:gravity="center_vertical"    
  52.             android:textStyle="bold"    
  53.             android:paddingLeft="2dp"    
  54.             app:layout_constraintLeft_toLeftOf="parent"    
  55.             app:layout_constraintTop_toBottomOf="@+id/imageView"    
  56.             app:layout_constraintBottom_toTopOf="@+id/txtFirstName"    
  57.             tools:layout_editor_absoluteX="24dp"    
  58.             android:id="@+id/textView"/>    
  59.     <android.support.design.widget.TextInputLayout    
  60.             android:id="@+id/txtFirstName"    
  61.             android:layout_width="361dp"    
  62.             android:layout_height="69dp"    
  63.             app:layout_constraintStart_toStartOf="parent"    
  64.             android:layout_marginLeft="8dp"    
  65.             android:layout_marginStart="8dp"    
  66.             app:layout_constraintEnd_toEndOf="parent"    
  67.             android:layout_marginEnd="8dp"    
  68.             android:layout_marginRight="8dp"    
  69.             app:layout_constraintBottom_toTopOf="@+id/txtLastName"    
  70.             android:layout_marginBottom="84dp"    
  71.             android:layout_marginTop="13dp"    
  72.             app:layout_constraintTop_toBottomOf="@+id/imageView">    
  73.         <android.support.design.widget.TextInputEditText    
  74.                 android:id="@+id/etPassword132"    
  75.                 android:layout_width="match_parent"    
  76.                 android:layout_height="wrap_content"    
  77.                 android:textColor="@color/colorWhite"    
  78.                 android:hint="First Name"    
  79.                 android:inputType="textEmailAddress"/>    
  80.     </android.support.design.widget.TextInputLayout>    
  81.     <android.support.design.widget.TextInputLayout    
  82.             android:id="@+id/txtLastName"    
  83.             android:layout_width="363dp"    
  84.             android:layout_height="70dp"    
  85.             app:layout_constraintStart_toStartOf="parent"    
  86.             app:layout_constraintEnd_toEndOf="parent"    
  87.             android:layout_marginLeft="8dp"    
  88.             android:layout_marginStart="8dp"    
  89.             android:layout_marginEnd="8dp"    
  90.             android:layout_marginRight="8dp"    
  91.             app:layout_constraintTop_toBottomOf="@id/txtFirstName"    
  92.             app:layout_constraintBottom_toTopOf="@+id/txtEmail">    
  93.         <android.support.design.widget.TextInputEditText    
  94.                 android:id="@+id/txtLastName1"    
  95.                 android:layout_width="match_parent"    
  96.                 android:layout_height="wrap_content"    
  97.                 android:textColor="@color/colorWhite"    
  98.                 android:hint="Mail Id"    
  99.                 android:inputType="text"/>    
  100.     </android.support.design.widget.TextInputLayout>    
  101.     <android.support.design.widget.TextInputLayout    
  102.             android:id="@+id/txtEmail"    
  103.             android:layout_width="363dp"    
  104.             android:layout_height="70dp"    
  105.             app:layout_constraintStart_toStartOf="parent"    
  106.             android:layout_marginLeft="8dp"    
  107.             android:layout_marginStart="8dp"    
  108.             app:layout_constraintEnd_toEndOf="parent"    
  109.             android:layout_marginEnd="8dp"    
  110.             android:layout_marginRight="8dp"    
  111.             android:layout_marginBottom="8dp"    
  112.             app:layout_constraintBottom_toTopOf="@+id/txtLastName"    
  113.             android:layout_marginTop="118dp"    
  114.             app:layout_constraintTop_toBottomOf="@+id/txtPassword">    
  115.         <android.support.design.widget.TextInputEditText    
  116.                 android:id="@+id/txtEmail1"    
  117.                 android:layout_width="match_parent"    
  118.                 android:textColor="@color/colorWhite"    
  119.                 android:layout_height="wrap_content"    
  120.                 android:hint="Last Name"    
  121.                 android:inputType="text"/>    
  122.     </android.support.design.widget.TextInputLayout>    
  123.     <android.support.design.widget.TextInputLayout    
  124.             android:id="@+id/etPasswordLayout"    
  125.             android:layout_width="363dp"    
  126.             android:layout_height="70dp"    
  127.             android:layout_marginLeft="0dp"    
  128.             android:layout_marginStart="0dp"    
  129.             app:passwordToggleEnabled="true"    
  130.             app:layout_constraintBottom_toTopOf="@+id/button"    
  131.             app:layout_constraintTop_toBottomOf="@id/txtEmail"    
  132.             android:layout_marginTop="-10dp"    
  133.             android:layout_marginRight="12dp"    
  134.             app:layout_constraintEnd_toEndOf="parent"    
  135.             app:layout_constraintStart_toStartOf="parent">    
  136.         <android.support.design.widget.TextInputEditText    
  137.                 android:id="@+id/etPassword"    
  138.                 android:layout_width="match_parent"    
  139.                 android:layout_height="59dp"    
  140.                 android:textColor="@color/colorWhite"    
  141.                 android:hint="Password"    
  142.                 android:inputType="textPassword"/>    
  143.     </android.support.design.widget.TextInputLayout>    
  144.     <Button    
  145.             android:text="CREATE ACCOUNT"    
  146.             android:layout_width="wrap_content"    
  147.             android:textColor="@color/colorWhite"    
  148.             android:background="@drawable/border_button"    
  149.             android:layout_height="45dp"    
  150.             android:id="@+id/button"    
  151.             app:layout_constraintTop_toBottomOf="@id/etPasswordLayout"    
  152.             android:layout_marginEnd="8dp"    
  153.             android:layout_marginRight="8dp"    
  154.             app:layout_constraintStart_toStartOf="parent"    
  155.             android:layout_marginLeft="8dp"    
  156.             android:layout_marginStart="8dp"    
  157.             android:layout_marginTop="8dp"    
  158.             android:layout_marginBottom="8dp"    
  159.             app:layout_constraintBottom_toBottomOf="parent"    
  160.             android:paddingLeft="10dp"    
  161.             android:paddingRight="10dp"    
  162.             app:layout_constraintEnd_toEndOf="parent"/>    
  163. </android.support.constraint.ConstraintLayout>   
Step 6 - MainActivity.cs Code
 
Next, open MainActivity.cs (Login Activity) and add the following code to validate the user input. When you click login, it will validate and check the user is available or not. If credentials are correct, it goes to the main page. If you want to sign up click a floating button.
  1. using System;    
  2. using Android.App;    
  3. using Android.OS;    
  4. using Android.Runtime;    
  5. using Android.Support.Design.Widget;    
  6. using Android.Support.V7.App;    
  7. using Android.Views;    
  8. using Android.Widget;    
  9. using SignLoginScreen.Resources.activitys;    
  10.     
  11. namespace SignLoginScreen    
  12. {    
  13.     [Activity(Label = "@string/app_name", Theme = "@style/AppTheme.NoActionBar", MainLauncher = true)]    
  14.     public class MainActivity : AppCompatActivity    
  15.     {    
  16.     
  17.         protected override void OnCreate(Bundle savedInstanceState)    
  18.         {    
  19.             base.OnCreate(savedInstanceState);    
  20.             Xamarin.Essentials.Platform.Init(this, savedInstanceState);    
  21.             SetContentView(Resource.Layout.activity_login    
  22.                 );    
  23.             var clickLogin = FindViewById<Button>(Resource.Id.button);    
  24.             var userMail = FindViewById<EditText>(Resource.Id.etPassword1);    
  25.             var userPWD = FindViewById<EditText>(Resource.Id.etPassword);    
  26.     
  27.             clickLogin.Click += delegate {    
  28.                 var emailText = Intent.GetStringExtra("eMail");    
  29.                 var pwdText = Intent.GetStringExtra("pwd");    
  30.                 if (emailText.ToString() == userMail.Text.ToString())    
  31.                 {    
  32.                     if(pwdText.ToString() == userPWD.Text.ToString())    
  33.                     {    
  34.                         Android.App.AlertDialog.Builder dialog1 = new Android.App.AlertDialog.Builder(this);    
  35.                         Android.App.AlertDialog alert1 = dialog1.Create();    
  36.                         alert1.SetTitle("Login Sucess");    
  37.                         var userNameIntent = Intent.GetStringExtra("userName");    
  38.                         alert1.SetMessage($"Hi {userNameIntent} Good Day");    
  39.                         alert1.SetButton("OK", (c, ev) =>    
  40.                         {    
  41.                             StartActivity(typeof(HomeActivity));    
  42.                         });    
  43.                         alert1.Show();    
  44.                     }    
  45.                     else    
  46.                     {    
  47.                         Android.App.AlertDialog.Builder dialog = new Android.App.AlertDialog.Builder(this);    
  48.                         Android.App.AlertDialog alert = dialog.Create();    
  49.                         alert.SetTitle("Failed");    
  50.                         alert.SetMessage($"Password Incorrect");    
  51.                         alert.SetButton("OK", (c, ev) =>    
  52.                         {    
  53.                             //   StartActivity(i);    
  54.                         });    
  55.                         alert.Show();    
  56.                         }    
  57.                 }    
  58.                 else    
  59.                 {    
  60.                     Android.App.AlertDialog.Builder dialog = new Android.App.AlertDialog.Builder(this);    
  61.                     Android.App.AlertDialog alert = dialog.Create();    
  62.                     alert.SetTitle("Login Failed");    
  63.                     alert.SetMessage("Enter Valid Credentials");    
  64.                     alert.SetButton("OK", (c, ev) =>    
  65.                     {    
  66.                      //   StartActivity(i);    
  67.                     });    
  68.                     alert.Show();    
  69.                 }    
  70.             };    
  71.             var fabClick = FindViewById<FloatingActionButton>(Resource.Id.floatingActionButton);    
  72.             fabClick.Click += FabClick_Click;    
  73.         }    
  74.     
  75.         private void FabClick_Click(object sender, EventArgs e)    
  76.         {    
  77.             StartActivity(typeof(signupActivity));    
  78.         }    
  79.     
  80.         public override bool OnCreateOptionsMenu(IMenu menu)    
  81.         {    
  82.             MenuInflater.Inflate(Resource.Menu.menu_main, menu);    
  83.             return false;    
  84.         }    
  85.     
  86.         public override bool OnOptionsItemSelected(IMenuItem item)    
  87.         {    
  88.             int id = item.ItemId;    
  89.             if (id == Resource.Id.action_settings)    
  90.             {    
  91.                 return true;    
  92.             }    
  93.             return base.OnOptionsItemSelected(item);    
  94.         }    
  95.         public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)    
  96.         {    
  97.             Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);    
  98.     
  99.             base.OnRequestPermissionsResult(requestCode, permissions, grantResults);    
  100.         }    
  101.     }    
  102. }   
Step 7 - SignupActivity.cs Code
 
Add another activity for the sign-up page. For that, Go to Solution Explorer >> Resources >> activities >> Add a new activity named as signup_activity.cs. Full source code is given below. Entered data will be validated and stored in Intent.
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Text;    
  5.     
  6. using Android.App;    
  7. using Android.Content;    
  8. using Android.OS;    
  9. using Android.Runtime;    
  10. using Android.Views;    
  11. using Android.Widget;    
  12.     
  13. namespace SignLoginScreen.Resources.activitys    
  14. {    
  15.     [Activity(Label = "signupActivity")]    
  16.     public class signupActivity : Activity    
  17.     {    
  18.         protected override void OnCreate(Bundle savedInstanceState)    
  19.         {    
  20.             base.OnCreate(savedInstanceState);    
  21.     
  22.             // Create your application here    
  23.             SetContentView(Resource.Layout.layout2);    
  24.             var imageButton = FindViewById<ImageButton>(Resource.Id.imageView2);    
  25.             var firstName = FindViewById<TextView>(Resource.Id.etPassword132);    
  26.             var lastName = FindViewById<TextView>(Resource.Id.txtLastName1);    
  27.             var emailText = FindViewById<TextView>(Resource.Id.txtEmail1);    
  28.             var pwdText = FindViewById<TextView>(Resource.Id.etPassword);    
  29.             var submitButton = FindViewById<Button>(Resource.Id.button);    
  30.             var displayalartText = new StringBuilder();    
  31.             displayalartText.Append(" inVaild this filed of");    
  32.             submitButton.Click += delegate    
  33.              {    
  34.                  string inputemail = lastName.Text.ToString();    
  35.                  if (inputemail == null)    
  36.                  {    
  37.                      displayalartText.Append(" Enter Email Id");    
  38.                  }    
  39.                  else    
  40.                  {    
  41.                      var emailValue = isValidEmail(inputemail);    
  42.                      if (emailValue != true)    
  43.                      {    
  44.                          displayalartText.Append(" Enter Email Id");    
  45.                      }    
  46.                  }    
  47.                  if (firstName == null)    
  48.                  {    
  49.                      displayalartText.Append(" Enter First Name");    
  50.                  }    
  51.                                                     
  52.                  if (pwdText == null)    
  53.                  {    
  54.                      displayalartText.Append(" Enter Last Name");    
  55.                  }    
  56.                     
  57.                  if (displayalartText.ToString() == " inVaild this filed of")    
  58.                  {    
  59.                      Intent i = new Intent(this, typeof(MainActivity));    
  60.                      //Add PutExtra method data to intent.      
  61.                      i.PutExtra("eMail", inputemail.ToString());    
  62.                      i.PutExtra("pwd", pwdText.Text.ToString());    
  63.                      i.PutExtra("userName", firstName.Text.ToString());    
  64.     
  65.                      //StartActivity      
  66.     
  67.                      Android.App.AlertDialog.Builder dialog = new AlertDialog.Builder(this);    
  68.                      AlertDialog alert = dialog.Create();    
  69.                      alert.SetTitle("Sucess");    
  70.                      alert.SetMessage("Sign Up Success");    
  71.                      alert.SetButton("OK", (c, ev) =>    
  72.                      {    
  73.                          StartActivity(i);    
  74.                      });    
  75.                      alert.Show();    
  76.    
  77.                      #region WithIcon Alert    
  78.                      //Android.App.AlertDialog.Builder dialog = new AlertDialog.Builder(this);    
  79.                      //AlertDialog alert = dialog.Create();    
  80.                      //alert.SetTitle("Title");    
  81.                      //alert.SetMessage("Complex Alert");    
  82.                      //alert.SetIcon(Resource.Drawable.alert);    
  83.                      //alert.SetButton("OK", (c, ev) =>    
  84.                      //{    
  85.                      //    // Ok button click task      
  86.                      //});    
  87.                      //alert.SetButton2("CANCEL", (c, ev) => { });    
  88.                      //alert.Show();    
  89.                      #endregion    
  90.     
  91.                  }    
  92.                  else    
  93.                  {    
  94.                      Android.App.AlertDialog.Builder dialog = new AlertDialog.Builder(this);    
  95.                      AlertDialog alert = dialog.Create();    
  96.                      alert.SetTitle("Failed");    
  97.                      alert.SetMessage("Sign Up Failed");    
  98.                      alert.SetButton("OK", (c, ev) =>    
  99.                      {    
  100.                          // Ok button click task      
  101.                      });    
  102.                      alert.Show();    
  103.                  }    
  104.              };    
  105.                 
  106.             imageButton.Click += ImageButton_Click;    
  107.         }    
  108.     
  109.         private void ImageButton_Click(object sender, EventArgs e)    
  110.         {    
  111.             StartActivity(typeof(MainActivity));    
  112.         }    
  113.         public bool isValidEmail(string email)    
  114.         {    
  115.             return Android.Util.Patterns.EmailAddress.Matcher(email).Matches();    
  116.         }    
  117.     }    
  118. }     
Step 8 - Output

Now, Rebuild and run your application. You will have the result like below.
 
Android Output
 
 How To Use Constraint Layout InXamarin.AndroidHow To Use Constraint Layout InXamarin.Android
 
Note
Import images, string, color, theme.
 
Thank for reading and if you have any suggestions comment below.
 
Reference Android Guide.


Similar Articles