Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create User Interface for Android 4.1

This tutorial will give you a brief insight into the process to create user interface for Android 4.1 devices making use of string resources as well.

We will create a simple hello world application here and in order to completely identify how to collate an application together, the need is to first create simplest of the application that would comprise of a TextView and a Button. Accessing the button will modify the text of the TextView. The below snapshot displays the application running in the emulator:

Representing the snapshot of the application running in the emulator

Figure 1: Representing the snapshot of the application running in the emulator

Creating the User Interface with Code

We will not see the steps to create the user interface in code. We all are aware that activities have a lifecycle. Post the initiation of the activity, its OnCreate method is called. This recognized as the proper place to operate and start of the application, example includes loading the user interface for the Activity.

Here for the purpose of our application, we would be requiring creating a Button and a TextView. Post the button been accessed by the user, we would need the TextView to display a message. In order to accomplish this, you need to open the Activity1.cs file and then replace the OnCreate method with the following code:

protected override void OnCreate (Bundle bundle)
{
    base.OnCreate (bundle);

    //Create the user interface in code
    var layout = new LinearLayout (this);
    layout.Orientation = Orientation.Vertical;

    var aLabel = new TextView (this);
    aLabel.Text = "Hello, Mono for Android";

    var aButton = new Button (this);      
    aButton.Text = "Say Hello";
    aButton.Click += (sender, e) => {
        aLabel.Text = "Hello from the button";
    };  
    layout.AddView (aLabel);
    layout.AddView (aButton);           
    SetContentView (layout);
}

Let us go ahead and try to see the explanation of the above code.

- First we came up with a LinearLayout and set its Orientation to Vertical with the below lines of code:

var layout = new LinearLayout (this);
layout.Orientation = Orientation.Vertical;

Android makes use of layout classes so as to group and position controls on the screen. The controls that we incorporated like the Button and the TextView, will be considered as the children of the layout. The LinearLayout class is deployed so as to align controls one after another. This would be done either horizontally or vertically much in the same way as we have done here. This is much identical to aa StackPanel in Silverlight.

- The next step we did was to create a Button and TextView, setting the Text property of each as displayed below:

var aLabel = new TextView (this);
aLabel.Text = "Hello, Mono for Android";
var aButton = new Button (this);      
aButton.Text = "Say Hello";

After the button is accessed by the user, we would require modifying the text of the TextView. As far as Mono for Android is concerned, we achieve this by making use of typical .NET event. In order to manage such an event, one can make use of an event handler that is considered to be an anonymous method or even a lambda expression as can be seen from the below example:

aButton.Click += (sender, e) => {
    aLabel.Text = "Hello from the button";
};

Also, we could utilize a C# 2.0 anonymous method with the below syntax:

aButton.Click += delegate(object sender, EventArgs e) {
    aLabel.Text = "Hello from the button";
};

- Now when the controls are generated or created and the event handler wired up, the next step would be to add them to the LinearLayout instance which is nothing but a subclass of ViewGroup. A ViewGroup is an ideal view that comprises of other views and identifies the process to display them. The ViewGroupclass comprise of an AddView method that can be called to incorporate to our controls like we did in this code:

layout.AddView (aLabel);
layout.AddView (aButton);

- The last and the final step in building our app is to come up with the layout to the screen. We did this by calling the Activity's SetContentViewmethod, passing it the layout as shown below:

SetContentView (layout);

Saving and then running the application by accessing the button will land us to the text change as seen in the snapshot.

Saving and then running the application
Figure 2: Saving and then running the application

Generating this sort of code displays the easiness for a .NET developer and familiarity to program the applications in Mono for Android. But it is really unique how Android takes care of the resources. In our example above we basically hard-coded all the strings and the time now is to utilize the Android resource system and exhibit how the programming process can be made more simpler.

Creating String Resources

As just discussed above, there is a unusual way deployed by Android to access its resources that are managed under the Resources folder in the Solution Explorer. In order to make them accessible from code, the created resources are modified for all resources that are included in the various Resources subfolders.

The example below will illustrate the place where hard-coded strings are replaced with string resources.

  • Under the Resources > values folder, open the file named Strings.xml.
  • This file comprises of the application’s string resources.
  • Replace the contents of the file with the following code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="helloButtonText">Say Hello</string>
    <string name="helloLabelText">Hello Mono for Android</string>
</resources>

Wondering where is the Resource class? Resource class is actually in the file Resource.designer.cs. For the reason that this is auto-generated, the attempt should never be made to change it manually. There will be a nested class named Strings generated in the Resource class for the strings we just added. The integer fields in this class recognize each string, as displayed in the below code:

public partial class String
{
    // aapt resource value: 0x7f040000
    public const int helloButtonText = 2130968576;

    // aapt resource value: 0x7f040001
    public const int helloLabelText = 2130968577;

    private String()
    {
    }
}

Now when we run the application, the outcome will be same using either of the techniques. It’s just that now we can very easily take care of the string values without needing to change them in code.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login