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

Advanced Android UI Elements

This Article explains about the advanced controls of Android UI design. This article contains most of the advanced UI elements of the Android Apps. While designing the UIs for an Android app.

This widget shows two states of a button; on (checked) or off (unchecked). This widget has a indicator, which displays its states using different lights. The default text on this button is "ON" for its checked state and "OFF" for its unchecked state. The ToggleButton class is used to implement a ToggleButton widget. To use the ToggleButton widget, you need to include the <ImageButton>tag in the XML file for your UI, as shown in the following markup:

  <ToggleButton android:id="@+id/ ToggleButton01" android:layout_width="match_parent" android:layout_height="wrap_content" android:textOff="Off Stage" android:textOn="On Stage"> </ToggleButton> 

The preceding markup creates the ToggleButton widget, which appears as shown in the following Figure 1:

Figure 1. The ToggleButton Widget in Off State

When you click the preceding button at run time, its state will change to the one shown in the following Figure 2:

Figure 2. The ToggleButton Widget in On State

You can use the attribute, android:checked="true", to set the toggle button in ON state in XML markup. In the previous example:

  • android:textOn="On Stage"attribute sets the button caption for the ON state.
  • android:textOff="Off Stage"attribute sets the button caption for the OFF state.

The RadioButton Widget

A RadioButton widget is a button with two states; checked or unchecked. The user can check the radio button by clicking it. However, a radio button cannot be unchecked after it has been checked. The RadioButtonclass is used to implement a RadioButton widget. To use the RadioButton widget, you need to include the <RadioButton>tag in the XML file for your UI, as shown in the following markup:

  <RadioButton android:id="@+id/ radioButton1" android:layout_width="match_parent" 
    android:layout_height="wrap_content" android:checked="true" android:text="@string/rb"> </RadioButton> 
  

The preceding markup creates the RadioButton widget, which appears as shown in the following Figure 3:

Figure 3. The RadioButton Widget

The attribute, android:checked="true" will set the radio button to checked state. By default, radio button is in unchecked state.

The RadioGroup Widget

To group multiple radio buttons together, Android provides the RadioGroup class that enables you to choose only one option at a time from the group of radio buttons. Checking a radio button of a radio group will uncheck the previous selection of that group. The RadioGroup class is used to implement the RadioGroup widget. To use the RadioGroup widget, you need to include the <RadioGroup>tag in the XML file for your UI, as shown in the following markup:

  <RadioGroup android:id="@+id/ radioGroup1" android:layout_height="wrap_content" 
     android:layout_width="match_parent">
   <RadioButton android:id="@+id/radio0" android:layout_height="wrap_content"     
     android:layout_width="wrap_content" android:text=" Hi! I'm radio button 1" 
     android:checked="true">
   </RadioButton>
   <RadioButton android:id="@+id/radio1" 
     android:layout_height="wrap_content"android:layout_width=
      "wrap_content"android:text=" Hi! I'm radio button 2"> 
  </RadioButton> 
  <RadioButton android:id="@+id/radio2" 
    android:layout_height="wrap_content"android:layout_width=
    "wrap_content"android:text=" Hi! I'm radio button 3"> 
  </RadioButton> 
  </RadioGroup> 

The preceding markup creates the RadioGroup widget, which appears as shown in the following Figure 4:

Figure 4. The RadioGroup Widget

The CheckBox Widget

The CheckBox widget is similar to a radio button. However, the only difference is that a check box can be unchecked by clicking it, unlike a radio button, which cannot be unchecked. A check box has two states, checked or unchecked. The CheckBox class is used to implement CheckBox widget. To use the CheckBox widget, you need to include the <CheckBox>tag in the XML file for your UI, as shown in the following markup:

  <CheckBox android:id="@+id/checkBox1" android:layout_width="match_parent" 
   android:layout_height="wrap_content" android:checked="true" 
   android:text="@string/cb"> </CheckBox> 

The preceding markup creates the CheckBox widget, which appears as shown in the following Figure 5:

Figure 5. The CheckBox Widget

By default, the check box is in unchecked state. In order to set its state to checked, you can use the android:checked="true" attribute.

The Spinner Widget

The Spinner widget is similar to a drop-down list. When the user taps on this widget, it shows a list of options to the user. The user can choose one option from this list. The Spinner class is used to implement the Spinner widget. To use the Spinner widget, you need to include the <Spinner> tag in the XML file for your UI, as shown in the following markup:

  <Spinner android:id="@+id/spinner1" android:layout_width="wrap_content" 
    android:layout_height="wrap_content" android:layout_weight="1"> </Spinner> 

The Spinner widget created by the preceding code does not contain any items. To populate the spinner widget, you need to use the Adapter class and the setAdapter(Adapter)method. This method dynamically populates the spinner with values from an array of values. On being populated, the Spinner widget appears as shown in the following Figure 6:

Figure 6. The Spinner Widget

Note: The objects of the Adapter class connect the data items stored in a data source, such as an array with views, such as Spinner or List view. These objects also provide access to the data items.

The ListView Widget

This widget displays a list to the user. It is similar to the list box control in Java. By default, a list view supports vertical scrolling. The ListView class is used to implement the ListView widget. To use the ListView widget, you need to include the <ListView> tag in the XML file for your UI, as shown in the following markup:

  <ListView android:id="@+id/listView1" android:layout_width="match_parent" 
    android:layout_height="match_parent" android:layout_height="wrap_content" 
    android:layout_weight="1"> </ListView> 

The ListView widget created by the preceding code does not contain any items. In order to add items to the list, the ListAdapter class is used. On being populated, the ListView widget appears as shown in the following Figure 7:

Figure 7. The ListView Widget

The preceding List View widget uses simple_list_item_1 as list style. Android provides other list styles that you can use. Some of these are simple_list_item_2, simple_list_item_checked, simple_list_item_multiple_choice, and simple_list_item_single_choice. Android also enables you to define your own list styles.

The ImageView Widget

This widget is used to display an image. This widget has the capability to load images from various resources, such as the drawables directory, Internet, and content providers. It adjusts its dimensions according to the size of the source image. Therefore, it has the capability to be used in any layout manager. The ImageView class provides various methods to perform operations such as scaling and tinting on images. The ImageView class is used to implement an ImageView widget.

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

  <ImageView android:id="@+id/ imageView1" android:layout_width="match_parent" 
    android:layout_height="wrap_content" android:src="@drawable/map"> </ImageView>

In the preceding markup, the android:src="@drawable/map" attribute refers to an image file named map.png stored in the drawables-hdpi directory of the project hierarchy. The preceding markup creates the ImageView widget, which appears as shown in the following Figure 8:

Figure 8. The ImageView Widget

You can use the android:tint="#ffffff" attribute to specify the tint color for the image. The preceding attribute will apply a white color overlay on the image. You can also use setTint(Color)method to set the shade or variety of colors programmatically. The following figure shows the effect of using tint on an Figure 9:

Figure 9. The ImageView Widget with Tint

The WebView Widget

This widget is used to display Web pages. You can use this widget to build your own Web browser or just to display a Web page in your activities. Also, it provides methods to navigate Web sites, zoom in and out from a Web page, and include text search capabilities.

Note: The WebView widget is based on a third party WebKit rendering engine to display content of Web pages. A WebKit engine is an open-source rendering engine that enables you to implement a set of standard Web browser features in a WebView widget. It supports features, such as rendering a Web page, navigation using hyperlinks, maintaining a back and forward list, and managing or browsing history.

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

  <WebView android:id="@+id/webView1" android:layout_width="match_parent" 
    android:layout_height="match_parent"> </WebView>

The preceding markup creates a WebView widget that can display a Web page. You can use the loadUrl(String)method of the android.webkit.WebView class to load a URL in the WebView widget. After loading a URL, the WebView widget appears as shown in the following Figure 10:

Figure 10. The WebView Widget

Conclusion:

In this article I have given all the information about the advanced UI elements of Android. To place all the elements in proper locations, we need to arrange their Layout . In my next article I am going to discuss about the Layouts of the android devices.



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