Android

Designing User Interface With Views In Android Applications

Overview

So far, we have learned about various layouts that you can use to place your views in an activity. We have also learned about techniques that we can use to fit to different screen resolutions and sizes. Given below are some useful links.

  1. Android Programming - Day One 
  2. Android Programming - Day Two
  3. How To Display A Dialog Windows In Android
  4. How To Display A Progress Dialog Window In Android
  5. Intent In Android
  6. Return Data Using Intent Object In Android Applications
  7. Passing Data Using An Intent Object In Android Applications
  8. Fragments In Android Applications
  9. Adding Fragments Dynamically In Android Application
  10. Fragment Life Cycle In Android Application
  11. Interaction Between Two Fragments
  12. Calling In Built Functions in Android Application
  13. Intent Object and Intent Filters in Android Application
  14. Displaying Notifications in Android Applications
  15. User Interface in Android Applications
  16. Orientation, Anchoring, Resizing And Repositioning Of Views In Android Application
  17. Activity Behavior When Screen Orientation Changes in Android Application 
  18. Persevere with State Information during Changes in Configuration
  19. Detect Orientation Changes and Controlling the Orientation of the Activity
  20. Utilizing the Action Bar in Android Application
  21. Activities Interact with User in Android Application
  22. How Activities Interact With Users In Android Applications

Introduction

In this article, you will learn about basic Views with their event handling that you can use to design the user interface for Android applications.

In Android applications, various types of ViewGroups are used to design UI.

  1. Basic Views
  2. Picker Views
  3. List Views
  4. Specialized Fragments
  5. Analog and Digital Clock Views

In Android applications, the following are Basic Views.

  • TextView
  • EditText
  • Button
  • ImageButton
  • CheckBox
  • ToggleButton
  • RadioButton
  • RadioGroup

Implementation

Create a new Android project called AppView. By default, it creates main.xml file located in the res/layout folder, which contains a <TextView> element.

  1. <LinearLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.   
  5.     android:layout_width="fill_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:orientation="vertical"  
  8.     tools:context=".MainActivity">  
  9. <TextView android:text="@string/hello_world"   
  10.     android:layout_width="fill_content"  
  11.     android:layout_height="wrap_content" />  
  12. </LinearLayout >  

The TextView is used to display text/caption to the user. This is the most basic View and very frequently used in an application.

The next View is a subclass of TextView and it is EditText. This View allows the user to edit the text displayed.

  1. <EditText   
  2. android:layout_width="fill_parent"   
  3. android:layout_height="wrap_content"  
  4. android:id="@+id/txtUserName" />     

Button represents a push-button widget.

  1. <Button  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/btnAdd"  
  5.    android:text="Add"/>  

ImageButton is similar to Button View except that it displays an image with text.

  1. <ImageButton  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/imgButton"  
  5.    android:src="@drawable/abc_ic_menu_copy_mtrl_am_alpha"  
  6. />  

CheckBox is a type of button that has two states; i.e., checked or unchecked.

  1. <CheckBox  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/chkIndia"  
  5.    android:text="India"  
  6. />  
  7. <CheckBox  
  8.    android:layout_width="fill_parent"  
  9.    android:layout_height="wrap_content"  
  10.    android:id="@+id/chkUS" style="?android:attr/starStyle"  
  11.    android:text="US"  
  12. />  

RadioGroup and RadioButton, both have two states: either checked or unchecked. A RadioGroup is used to group together one or more RadioButton Views, thereby allowing only one RadioButton to be checked within the RadioGroup.

  1. <RadioGroup  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:orientation="vertical"  
  5.    android:id="@+id/rdoGroup">  
  6. <RadioButton  
  7.    android:id="@+id/rbMale"  
  8.    android:layout_width="fill_parent"  
  9.    android:layout_height="wrap_content"  
  10.    android:text="Male"/>  
  11. <RadioButton  
  12.    android:id="@+id/rbFemale"  
  13.    android:layout_width="fill_parent"  
  14.    android:layout_height="wrap_content"  
  15.    android:text="Female"/>  
  16. </RadioGroup>  

ToggleButton displays checked/unchecked states using a light indicator.

  1. <ToggleButton  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/toggleButton"/>  

Now, add some code as below to handle View events for elements, like Button, CheckBox etc.

  1. Button buttonAdd = (Button) findViewById(R.id.btnAdd);  
  2. buttonAdd.setOnClickListener(new View.OnClickListener()  
  3.   {  
  4.     @Override  
  5.     public void onClick(View view)  
  6.     {  
  7.         DisplayMessage("You have clicked the Add button");  
  8.     }  
  9. });  

Write a common method to display the text message as below.

  1. private void DisplayMessage(String textMessage) {  
  2.     Toast.makeText(getBaseContext(), textMessage, Toast.LENGTH_SHORT).show();  
  3. }  

Now, run the application by pressing F11.

To handle the View events for element CheckBox, add the below code.

  1. CheckBox checkBox = (CheckBox) findViewById(R.id.chkIndia);  
  2. checkBox.setOnClickListener(new View.OnClickListener()  
  3. {  
  4.     @Override  
  5.     public void onClick(View view)  
  6.     {  
  7.         if (((CheckBox) view).isChecked()) DisplayMessage("India check box is checked");  
  8.         else DisplayMessage("India check box is unchecked");  
  9.     }  
  10. });  

Now, run the application by pressing F11. For example, I have checked the India CheckBox.

Now, uncheck the India CheckBox.

Explanation

Run the application by pressing F11 and see the result of the above implemented code.

All the Views are relatively straightforward because they are listed using the <LinearLayout> element. So, they are stacked on top of each other when they are displayed in the activity.

  1. <Button  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/btnAdd"  
  5.    android:text="Add"/>  
  6.   
  7. <Button  
  8.    android:layout_width="wrap_content"  
  9.    android:layout_height="wrap_content"  
  10.    android:id="@+id/btnSearch"  
  11.    android:text="Search"/>  

In the above code for first Button, the layout_width attribute is set to fill_parent so that its width occupies the entire width of the screen.

But for the second Button, the layout_width attribute is set to wrap_content so that its width will be the width of its content.

The ImageButton displays a button with an image. The image is set through the src attribute.

  1. <ImageButton  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/imgButton"  
  5.    android:src="@drawable/abc_ic_menu_copy_mtrl_am_alpha"  
  6. />  

EditText displays a rectangular region where the user can enter some text. Set the attribute of layout_height to wrap_content so that if the user enters a long string of text, its height will automatically be adjusted to fit the content.

  1. <EditText  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/txtUserName"  
  5. />  

The CheckBox displays a checkbox that users can tap on to check or uncheck.

  1. <CheckBox  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/chkIndia"  
  5.    android:text="India"  
  6. />  
  7. <CheckBox  
  8.    android:layout_width="fill_parent"  
  9.    android:layout_height="wrap_content"  
  10.    android:id="@+id/chkUS" style="?android:attr/starStyle"  
  11.    android:text="US"  
  12. />  

In the above code, style attribute is set to display another image rather than default one.

There is RadioGroup that encloses two RadioButtons. This is very important because radio buttons are usually used to present multiple options to the user for selection. When a RadioButton in a RadioGroup is selected, all the other RadioButtons are automatically unselected.

  1. <RadioGroup  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:orientation="vertical"  
  5.    android:id="@+id/rdoGroup">  
  6. <RadioButton  
  7.    android:id="@+id/rbMale"  
  8.    android:layout_width="fill_parent"  
  9.    android:layout_height="wrap_content"  
  10.    android:text="Male"/>  
  11. <RadioButton  
  12.    android:id="@+id/rbFemale"  
  13.    android:layout_width="fill_parent"  
  14.    android:layout_height="wrap_content"  
  15.    android:text="Female"/>  
  16. </RadioGroup>  

In the above code, RadioButtons are displayed vertically. To display the list horizontally, just change the orientation attribute to horizontal. If you change the orientation attribute to horizontal, you will have to change the layout_width attribute to wrap_content.

The ToogleButton displays a rectangular button that users can toggle either ON or OFF, by tapping.

  1. <ToggleButton  
  2.    android:layout_width="fill_parent"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/toggleButton"/>  

In the above code, each element has the id attribute with a particular value as we can see for the Button View.

  1. <Button  
  2.    android:layout_width="wrap_content"  
  3.    android:layout_height="wrap_content"  
  4.    android:id="@+id/btnSearch"  
  5.    android:text="Search"/>  

The id attribute is an identifier for a View so that it may later be retrieved using the View.findViewById() methods.

To handle View events for Button element, add the code given below.

  1. Button buttonAdd=(Button) findViewById(R.id.btnAdd);  

The setOnClickListener() method registers a callback to be invoked later when the View is clicked.

  1. buttonAdd.setOnClickListener(new View.OnClickListener() {  
  2.     @Override  
  3.     public void onClick(View view) {  
  4.         DisplayMessage("You have clicked the Add button");  
  5.     }  
  6. });  

The onClick() method is called when the View is clicked.

The next element is CheckBox for which code is added to handle their View events. To determine the state of the CheckBox, you must have to typecast the argument of the onClick() method to a CheckBox and then click its isChecked() method to see if it is clicked or not.

  1. CheckBox checkBox = (CheckBox) findViewById(R.id.chkIndia);  
  2. checkBox.setOnClickListener(new View.OnClickListener() {  
  3.     @Override  
  4.     public void onClick(View view) {  
  5.         if (((CheckBox) view).isChecked()) DisplayMessage("India check box is checked");  
  6.         else DisplayMessage("India check box is unchecked");  
  7.     }  
  8. });  

Conclusion

In this article, you learned how to design user interface with Views in Android Application. In the next article, I will explain how to use Picker Views when designing user interfaces in Android applications.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs