Demonstration Of Edit Text in Xamarin

This article describes how to create an Android project using a TextView, EditBox, Button and a a toast pop-up.

Introduction

Every application has some essential controls, whether it is a Web app or Desktop app or a Smart Phone app. And, they are as essential since you can't imagine a single app without them.

And in this demonstration we are taking on a few of them.

So, this time we have chosen the Edit Text Control.



So, what do we with an EditText (or a TextBox) in any application?

Right, we get the data the user has inserted. I know, it is something lame. Since this is a beginner's stage where we are learning how to accept the text.

So, let's start the edit text.

Procedures

Step 1

After creating a successful Blank Android Project, we will first design a XML page that describes the layout of your app's activity.



I would recommend you to do this by XML code. Since it will deal with the inner and outer of the UI.

Within that Liner Layout, create a TextView first then a EditBox and a Button.

So, it will be like the following:

<code>

  1. <code>  
  2. <?xml version="1.0" encoding="utf-8"?>  
  3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:orientation="vertical"  
  5.     android:layout_width="fill_parent"  
  6.     android:layout_height="fill_parent"  
  7.     android:minWidth="25px"  
  8.     android:minHeight="25px">  
  9.     <TextView  
  10.         android:id="@+id/myLabel"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:text="Put Your Name here :" />  
  14.     <EditText  
  15.         android:id="@+id/myEditBox"  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="wrap_content" />  
  18.     <Button  
  19.         android:id="@+id/myButton"  
  20.         android:layout_width="match_parent"  
  21.         android:layout_height="wrap_content"  
  22.         android:text="Hey! Click Me" />  
  23. </LinearLayout>  
  24. </code> 

Step 2

We have done the layout. Now to code the backend file. So, open your MainActivity.cs file that is in the root folder of your project.

Note: Delete the unused commands like Button and its event.

Before we code, grasp the concept first.

Whatever control we have in a XML page (in other words UI Page). In a C# file we will map every single control we have in a XML file.

It is not mandatory at all, but make sure those controls are mapped that you want to use in a C# file.



In .NET App development, we rarely do this because Visual Studio is quite intelligent in this.

So, first we will map our controls.

Since we have three controls here: TextView, EditBox and Button.

  1. //Intialize the Content Here  
  2.             myLabel = FindViewById<TextView>(Resource.Id.myLabel);  
  3.             myEditBox = FindViewById<EditText>(Resource.Id.myEditBox);  
  4.             myButton = FindViewById<Button>(Resource.Id.myButton); 

And, globally define the references of the controls.

  1. // Refrences  
  2.  TextView myLabel;  
  3. EditText myEditBox;  
  4. Button myButton; 

Step 3


We will now create the click event for that button. When we click on that, it will show the contents of the Edit Box.

// We will now code the Button's Click Event
  1. // Now, we will code the Button's Click Event  
  2. myButton.Click += myButton_Click; 
Note: Press <TAB> and <TAB>.

That will generate the event handler method.
  1. void myButton_Click(object sender, EventArgs e)  
  2.         {  
  3.             string message = "Hello !! "+myEditBox.Text.ToString()+" How are You Buddy.";  
  4.               
  5.             // Make a Toast PopUp Box  
  6.             Toast.MakeText(this, message,ToastLength.Long).Show();  
  7.         } 
Here, we have created a toast pop-up using the Toast class.

Output Window



Conclusion

Everything is easy here, we can do this in a single click when we are dealing with a native C# application. But, this time we have a Xamarin app. So, there is much more to do. Apart from this, if you experience any problem then try to solve it from the enclosed source file, or drop a message wherever you find me.

Until then, keep living your days.