Breaking News
You are here : Home / Mobile Dev / Android / How To Build A Simple User Interface in Your First Android App
Creating Android Interface

How To Build A Simple User Interface in Your First Android App

A graphical user interface is quite essential for any application, thus it is imperative to make it as simple and easily-accessible as possible, without compromising on the superior functionalities of the application.It is assumed that you have already created your application in eclipse and run it successfully on both emulator and real device, and now you are looking for the steps to create a simple UI.

 

Creating Android Interface

Creating Android Interface

The GUI of an Android app is created by implementing the View and ViewGroup objects in a certain hierarchy, where View objects usually feature UI widgets and ViewGroup objects are invisible view containers that feature the pattern for every child view in which they are supposed to be laid out.

Simple Android User Interface

Simple Android User Interface

Here is a step-by-step guide to create a simple user interface in an Android Application.

# How To Create A Linear Layout

·         Access the res/layout/directory and open the xml file “fragment_main.xml”.

·         While creating the project, you must have chosen the BlankActivity template. This template holds the “fragment_main.xml” file featuring a root view – “RelativeLayout” and child view – “TextView”.

Here, you need to delete the TextView and edit the RelativeLayout element as “LinearLayout”, also add the “android:orientation” attribute with either horizontal or vertical value (whichever is applicable).

Android Layout Designs

Android Layout Designs

Further, the attributes “android:layout_width” and “android:layout_height” are essential to define the size of every view. And, since this is the root view in the layout, it must fill the complete screen area; this is why, they are set to “match_parent”.

Code Snippet :

 

# How To Insert A Text Field

The following steps will help you create a user-editable text field.

·         First, you need to insert an element “EditText” into the “LinearLayout” element. Here is the code that shows its declaration.

Code Snippet

 

There are four different attributes used while defining the properties of EditText object.

1.) android:id

2.) android:layout_width

3.) android:layout_height

4.) android:hint

 

 

# How To Add String Resources

For adding text in the user interface, you must define each string as a resource. By using string resources, you will be able to conveniently manage the entire text of the UI at a single location, thus, it will make updating and locating strings easier.

 

You can provide alternative definitions for every string resource and localize your application to different languages by externalizing the strings.

 

Your string resource files will be saved at location “res/values/strings.xml” by default. Now open the file and add a new string “edit_message” and give it a value “Enter a message”.

 

Similarly, add a “Send” string, this will be used for the button that you will add in the following step “button_send”.

# How To Insert A Button

For adding a button in the UI, create another element “Button” following the “EditText” element inside the “LinearLayout”.

Here, the wrap_content value for the attribute android:layout_width and android:layout_height will adjust the button size according to the button text. And since, the android:id attribute won’t be referenced from the activity code, it is not included here for adding a button.

# How To Adjust The Input Box Fit In The Screen Width

The layout that is defined till now includes two UI widgets EditText and Button that will appear as huge as it is necessary.

While this approach is ideal for the buttons,it is not true in the case of the text field; as here user might enter a longer text and thus, occupying the unused screen width for epitomizing the enter text would be a great idea.

For this, you can define a “weight” property via “attribute:layout_weight” attribute inside the “LinearLayout”. This property will hold a numeric value corresponding to the amount of space it will be consuming, relative to the sibling views. By default, the weight of all the views is set to zero.

To optimize the layout performance, it is advisable to set the width of the “EditText” as “0dp” instead of “wrap_content”.

# Complete code snippet for the layout file (including all the above defined parts)

 

The Android SDK Tools generate a default “Activity” class while creating the project. Hence, you can now execute the app and watch its results.

Conclusion:

Follow the above mentioned steps to create a simple and interactive user interface in your Android application.

Author Bio

Victoria Brinsley

Victoria Brinsley is a professional content writer for one of the leading provider of reputed Android Development Services from where you can hire skilled Android developers by contacting her.

Google+: https://plus.google.com/u/0/106028579566986454689/

 

Tags : ,

Leave a Reply

Want to join the discussion ? Feel Free to contribute !