Create And Design A User Interface For Android Application Via Xamarin

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



So, let’s begin.

Create a new Project

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



Choose the template as Android Blank App.



Click OK.

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



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:





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

using Android.App;
using Android.Graphics;
using Android.OS;
using Android.Widget;
namespace DesignAnApp {
    [Activity(Label = "DesignAnApp", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity {
        RelativeLayout relativeLayout;
        TextView SignupView;
        TextView nameView;
        TextView EmailView;
        TextView PasswordView;
        EditText NameText;
        EditText EmailText;
        EditText PasswordText;
        Button SignupButton;
        protected override void OnCreate(Bundle bundle) {
            base.OnCreate(bundle);
            //create a new instance of RelativeLayout
            relativeLayout = new RelativeLayout(this);
            //set a background color
            relativeLayout.SetBackgroundColor(Color.CadetBlue);
            //TextView implementation
            SignupView = new TextView(this);
            SignupView.Text = "Sign up for free";
            SignupView.Id = 1;//we will be needing this id
            nameView = new TextView(this);
            nameView.Text = "Name";
            nameView.Id = 2;
            EmailView = new TextView(this);
            EmailView.Text = "Email Address";
            EmailView.Id = 3;
            PasswordView = new TextView(this);
            PasswordView.Text = "Password";
            PasswordView.Id = 4;

            //EditText implementation
            NameText = new EditText(this);
            NameText.Id = 11;
            EmailText = new EditText(this);
            EmailText.Id = 12;
            PasswordText = new EditText(this);
            PasswordText.Id = 13;
            SignupButton = new Button(this);
            SignupButton.Text = "Sign up";

            //add layout rules for SignUp TextView
            RelativeLayout.LayoutParams SignUpViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            //to align the SignUpTextView to center.
            SignUpViewLayoutparams.AddRule(LayoutRules.CenterHorizontal);

            //add layout rules Name TextView
            RelativeLayout.LayoutParams NameViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            //in order to specify the layout rules, AddRule is used.
            //the below code states, set the layout for the NameView below the SignupView
            NameViewLayoutparams.AddRule(LayoutRules.Below, SignupView.Id);
            NameViewLayoutparams.AddRule(LayoutRules.AlignLeft);
            //add layout rules for Name EditText
            RelativeLayout.LayoutParams NameEditLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            NameEditLayoutparams.AddRule(LayoutRules.Below, nameView.Id);
            NameEditLayoutparams.AddRule(LayoutRules.AlignLeft);

            //add layout rules for Email TextView
            RelativeLayout.LayoutParams EmailViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            EmailViewLayoutparams.AddRule(LayoutRules.Below, NameText.Id);
            EmailViewLayoutparams.AddRule(LayoutRules.AlignLeft);

            //add layout rules for Email EditText
            RelativeLayout.LayoutParams EmailEditTextLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            EmailEditTextLayoutparams.AddRule(LayoutRules.Below, EmailView.Id);
            EmailEditTextLayoutparams.AddRule(LayoutRules.AlignLeft);

            //add layout rules for Password TextView
            RelativeLayout.LayoutParams PasswordViewLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            PasswordViewLayoutparams.AddRule(LayoutRules.Below, EmailText.Id);
            PasswordViewLayoutparams.AddRule(LayoutRules.AlignLeft);

            //add layout rules for Password EditText
            RelativeLayout.LayoutParams passwordEditTextLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            passwordEditTextLayoutparams.AddRule(LayoutRules.Below, PasswordView.Id);
            passwordEditTextLayoutparams.AddRule(LayoutRules.AlignLeft);

            //add layout rules for Button Control
            RelativeLayout.LayoutParams ButtonLayoutparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WrapContent, RelativeLayout.LayoutParams.WrapContent);
            ButtonLayoutparams.AddRule(LayoutRules.Below, PasswordText.Id);
            ButtonLayoutparams.AddRule(LayoutRules.CenterHorizontal);
            ButtonLayoutparams.AddRule(LayoutRules.CenterVertical);

            //add controls to the layout
            relativeLayout.AddView(SignupView, SignUpViewLayoutparams);
            relativeLayout.AddView(nameView, NameViewLayoutparams);
            relativeLayout.AddView(NameText, NameEditLayoutparams);
            relativeLayout.AddView(EmailView, EmailViewLayoutparams);
            relativeLayout.AddView(EmailText, EmailEditTextLayoutparams);
            relativeLayout.AddView(PasswordView, PasswordViewLayoutparams);
            relativeLayout.AddView(PasswordText, passwordEditTextLayoutparams);
            relativeLayout.AddView(SignupButton, ButtonLayoutparams);

            //pass the relative layout object as the ContentView for our android activity
            SetContentView(relativeLayout);
        }
    }
}

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.