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

Android User Interface: How to Build

This article explains about the various controls of Android App UI and the usage of them, just like how to build an user interface in Android.

An Android app usually comprises of a User Interface (UI) and an activity that gives functionality to the UI. The UI comprises of several related components, such as buttons, text boxes, labels, and images, which collectively form the front end of an app.

Objectives

  • Design the UI
  • View the UI on a device

Designing the UI

Android-enabled devices are well known for their unique and intuitive UI, which has led to the popularity of Android over other mobile platforms. The UI of an Android app can be developed by using any of the following two methods:

Java programming: In this method, the UI is created using Java code. The UI and the code that provides functionality to the UI reside in the same Java file.

XML file: In this method, the UI is defined in an XML file and the code that provides functionality to the UI is written in a separate .java file. Defining the UI in an XML file enables you to separate the UI from the code, thereby providing flexibility and scalability to your app. It also allows you to reuse the XML file containing the layout for other apps. The UI of an Android app comprises of the following two types of components:

  • Views
  • View groups

View groups and views are related to each other in a hierarchal manner, as shown in the following figure:

The Hierarchy Between View Groups and Views

Figure 1 : The Hierarchy Between View Groups and Views

The preceding figure shows the hierarchal relationship between views and view groups. View groups act as containers (or parent) for views and other view groups. On the other hand, views are atomic and cannot contain other objects.

Using Views

The visual components in Android are known as views, which are similar to the controls in traditional desktop environment. In other words, views are the UI elements in an Android app.

The Viewclass of the android.viewpackage is the basic building block of an Android app’s UI. The View class is the parent for all widgets, such as buttons, labels, text boxes, and so on. Android widgets are controls or UI components that allow the users to interact with the app. Android provides the capability of creating a rich UI comprising of various widgets. In Android, the widgets are classes inside the android.widgetpackage. Some commonly used widgets in Android apps are:

  • TextView
  • EditText
  • Button
  • ImageButton

Each widget has certain attributes that enable you to customize the widget according to your requirements.

The TextView Widget

The TextView widget is used to display text to the user. It is similar to the label control in Java. However, text views in Android can be editable as well. The TextViewclass is used to implement a TextView widget. To use the TextView widget, you need to include the <TextView> tag in the XML file for your UI, as shown in the following markup:

<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="0dip" android:textColor="#00ff00" android:typeface="serif" android:textStyle="bold" android:textSize="25sp" android:text="@string/textview" android:gravity="center" android:layout_weight="1"> </TextView>

In the preceding markup, the attributes, android:layout_widthand android:layout_heightcan take the following three values:

  • wrap_content: This value specifies that the width/height of a view should only be big enough to wrap its contents.
  • match_parent: This value specifies that the width/height of a view should be as big as its parent (minus padding).
  • fill_parent: This value specifies that a view should expand to take as much space as is available within its parent.

The attribute android:idcan take value @+id.This value specifies that the id textView1is created in your app’s namespace. If you have used @android:id/textView1, it refers to id textView1in the framework’s namespace. The Android framework's namespace refers to the android.Rclass that contains the subclasses, such as layout, id, menucontaining predefined objects, which may be represented as android:text1, android:list,and so on. The app's namespace refers to the objects contained in the your_package_name.Rclass and contains subclasses, such as id, layout, menuand so on. The preceding markup creates the TextView widget, which appears as shown in the following figure:

The TextView Widget

Figure 2: The TextView Widget

In the preceding example:

android:textColor="#00ff00" sets the text color of the text view. Here, the hex value, 00ff00specifies a color code. The hex values are represented as AARRGGBB and RRGGBB (R -red, G -green and B -blue). The following table describes the color code string:

Hex Code #AARRGGBB Description of Each Hex Value for the Color Code
AA Alpha value / Opacity for the color. This value ranges from 0
RR Alpha value / Opacity for the color. This value ranges from 0
GG Alpha value / Opacity for the color. This value ranges from 0
BB Alpha value / Opacity for the color. This value ranges from 0

Table 1: The Description of Color Code String

android:gravity="center"attribute aligns the TextView widget to the center of the screen.

android:typeface="serif" and android:textSize="25sp"attributes change the typeface and text size. Here, spstands for scale-independent pixels. This unit is used to specify font sizes. spdefines text size according to the user’s font settings. It also adjusts the font size according to the visibility setting of the screen. Another unit called density-independent pixels (dip or dp) is used to specify the size of views. 1 dp is defined as 1 pixel of the screen. It is independent of the screen resolution. Thus, views defined in dp are automatically scaled to the same size for all screen resolutions.

android:textStyle="bold"attribute makes the text bold.

android:layout_weight="1" fills the complete screen because there is no other element. If there were more elements, this attribute would equally allocate screen area to all of them.

The EditText Widget

An EditText widget has rich editing capabilities. It is similar to the text area control in Java. The EditText class is used to implement the EditText widget. It is a predefined subclass of the TextViewclass. To use the EditText widget, you need to include the <EditText> tag in the XML file for your UI, as shown in the following markup:

<EditText android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#7e90a2" android:typeface="serif" android:textStyle="bold" android:textSize="50sp" android:text="@string/TypeHere" android:hint="@string/Type" android:gravity="center" > </EditText> 

The preceding markup creates the EditText widget, as shown in the following figure:

 The EditText Widget

Figure 3 : The EditText Widget

The android:gravity="center"attribute sets the "Type" text at the center of the edit text.

The Button Widget

The Button widget displays a push-button control. It is similar to the button control in Java. In order to perform an action, the user can click or tap the push-button. The Buttonclass is used to implement the Button widget.

To use the Button widget, you need to include the <Button> tag in the XML file for your UI, as shown in the following markup:

<Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#00ff00" android:typeface="serif" android:textStyle="bold" android:textSize="25sp" android:text="@string/Clickme." android:background="#0000ff">
</Button> 

The preceding markup creates the Button widget, as shown in the following figure:

The Button Widget

Figure 4 : The Button Widget

The android:background="#0000ff" sets the button color to blue and the text color is changed to green using the android:textColor="#00ff00" attribute.

The ImageButton Widget

The ImageButton widget displays a button with an image instead of text. A user can perform actions on the image button similar to the Button widget. If you do not specify an image source for the image button, the ImageButton widget appears similar to a standard Button widget. You can set the image for a Button widget using an XML file or Java code. The ImageButtonclass is used to implement an ImageButton widget. To use the ImageButton widget, you need to include the tag in the XML file for your UI, as shown in the following markup:

<ImageButton android:id="@+id/ imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" android:contentDescription="@string/ desc."> </ImageButton> 

The preceding markup creates the ImageButton widget, which appears as shown in the following figure:

The ImageButton Widget

Figure 5 : The ImageButton Widget

The android:src="@drawable/icon"specifies the image source. In this case, it is the icon.pngfile located in the res/drawablesfolder.

Conclusion

Well, so at the end of this article we are now familiar with the various UIs of Android. There are so many other UI are also there which I will bring to you in my next article. After creating the UI, we need to associate it with an project in order to use it as an Android app.



Certified Trainer for Windows 8 Mobile App Development, IBM CE Project Trainer With IBM DB2, RAD, RSA, Certified Trainer for ZEND (PHP), Certified PHP and MySql trainer, Certified trainer of Diploma in Oracle 10g (DBA) as per Orac...

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