In the demo, you will see how to achieve the signup design, given below, via the .cs file of Android layout.

layout

So, let’s begin.

Create a new Project

Open Visual Studio and go to File -> New ->Project.

Project

Choose the template as Android Blank App.

Blank App

Click OK.

Once the project is created, open the highlighted files, as shown in below image.

files

Remove the default codes and change the layout from Linear to Relative.

Note: I will discuss more about layouts in my upcoming articles.

Now, your .axml file and cs file will look like this:

code

code

Now, let’s see how to design the layout from the .cs file. In order to create a signup page, we need a few controls -- TextView control for Signup title, Name, Email Address, and Password, and TextField control for Name, EmailAddress, and Password.

A Button control.

Write the following code in your .cs file.

Code

  1. using Android.App;
  2. using Android.Graphics;
  3. using Android.OS;
  4. using Android.Widget;
  5. namespace DesignAnApp {
  6. [Activity(Label = "DesignAnApp", MainLauncher = true, Icon = "@drawable/icon")]
  7. public class MainActivity : Activity {
  8. RelativeLayout relativeLayout;
  9. TextView SignupView;
  10. TextView nameView;
  11. TextView EmailView;
  12. TextView PasswordView;
  13. EditText NameText;
  14. EditText EmailText;
  15. EditText PasswordText;
  16. Button SignupButton;
  17. protected override void OnCreate(Bundle bundle) {
  18. base.OnCreate(bundle);
  19. //create a new instance of RelativeLayout
  20. relativeLayout = new RelativeLayout(this);
  21. //set a background color
  22. relativeLayout.SetBackgroundColor(Color.CadetBlue);
  23. //TextView implementation
  24. SignupView = new TextView(this);
  25. SignupView.Text = "Sign up for free";
  26. SignupView.Id = 1;//we will be needing this id
  27. nameView = new TextView(this);
  28. nameView.Text = "Name";
  29. nameView.Id = 2;
  30. EmailView = new TextView(this);
  31. EmailView.Text = "Email Address";
  32. EmailView.Id = 3;
  33. PasswordView = new TextView(this);
  34. PasswordView.Text = "Password";
  35. PasswordView.Id = 4;
  37. //EditText implementation
  38. NameText = new EditText(this);
  39. NameText.Id = 11;
  40. EmailText = new EditText(this);
  41. EmailText.Id = 12;
  42. PasswordText = new EditText(this);
  43. PasswordText.Id = 13;
  44. SignupButton = new Button(this);
  45. SignupButton.Text = "Sign up";
  47. //add layout rules for SignUp TextView
  48. RelativeLayout.LayoutParams SignUpViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  49. //to align the SignUpTextView to center.
  50. SignUpViewLayoutparams.AddRule(LayoutRules.CenterHorizontal);
  52. //add layout rules Name TextView
  53. RelativeLayout.LayoutParams NameViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  54. //in order to specify the layout rules, AddRule is used.
  55. //the below code states, set the layout for the NameView below the SignupView
  56. NameViewLayoutparams.AddRule(LayoutRules.Below, SignupView.Id);
  57. NameViewLayoutparams.AddRule(LayoutRules.AlignLeft);
  58. //add layout rules for Name EditText
  59. RelativeLayout.LayoutParams NameEditLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  60. NameEditLayoutparams.AddRule(LayoutRules.Below, nameView.Id);
  61. NameEditLayoutparams.AddRule(LayoutRules.AlignLeft);
  63. //add layout rules for Email TextView
  64. RelativeLayout.LayoutParams EmailViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  65. EmailViewLayoutparams.AddRule(LayoutRules.Below, NameText.Id);
  66. EmailViewLayoutparams.AddRule(LayoutRules.AlignLeft);
  68. //add layout rules for Email EditText
  69. RelativeLayout.LayoutParams EmailEditTextLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  70. EmailEditTextLayoutparams.AddRule(LayoutRules.Below, EmailView.Id);
  71. EmailEditTextLayoutparams.AddRule(LayoutRules.AlignLeft);
  73. //add layout rules for Password TextView
  74. RelativeLayout.LayoutParams PasswordViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  75. PasswordViewLayoutparams.AddRule(LayoutRules.Below, EmailText.Id);
  76. PasswordViewLayoutparams.AddRule(LayoutRules.AlignLeft);
  78. //add layout rules for Password EditText
  79. RelativeLayout.LayoutParams passwordEditTextLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  80. passwordEditTextLayoutparams.AddRule(LayoutRules.Below, PasswordView.Id);
  81. passwordEditTextLayoutparams.AddRule(LayoutRules.AlignLeft);
  83. //add layout rules for Button Control
  84. RelativeLayout.LayoutParams ButtonLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
  85. ButtonLayoutparams.AddRule(LayoutRules.Below, PasswordText.Id);
  86. ButtonLayoutparams.AddRule(LayoutRules.CenterHorizontal);
  87. ButtonLayoutparams.AddRule(LayoutRules.CenterVertical);
  89. //add controls to the layout
  90. relativeLayout.AddView(SignupView, SignUpViewLayoutparams);
  91. relativeLayout.AddView(nameView, NameViewLayoutparams);
  92. relativeLayout.AddView(NameText, NameEditLayoutparams);
  93. relativeLayout.AddView(EmailView, EmailViewLayoutparams);
  94. relativeLayout.AddView(EmailText, EmailEditTextLayoutparams);
  95. relativeLayout.AddView(PasswordView, PasswordViewLayoutparams);
  96. relativeLayout.AddView(PasswordText, passwordEditTextLayoutparams);
  97. relativeLayout.AddView(SignupButton, ButtonLayoutparams);
  99. //pass the relative layout object as the ContentView for our android activity
  100. SetContentView(relativeLayout);
  101. }
  102. }
  103. }
Output

We got the result as expected.

But, we need to make a few changes.
  1. We need to transform the SignUp textview to large.
  2. We need to transform the rest of the textview to medium.
  3. We need to expand the EditText layout to cover the entire horizontal frame of their area.
  4. We need to make the password invisible.
  5. We need to add an event for our button control.

We will see all the above things, in the next article.