Chapter 4: UI Components and Controls

UI Components in Android

UI (User Interface) Components or controls and also known as UI elements, these controls are the input controls of the user interface.

Android provides the wide variety of controls that we can use in our Applications such as, Buttons, Textview, Edittext, Checkbox, Toggle button, Radio button, Seek bar and many more.

TextView: This control is used to display the text.
Button: This control is used to click and perform an action.
RadioButton: This control is used to either check or uncheck, for example select either male or female.
CheckBox: This control is used to check or check, for example to select the contents from a list.
ToggleButton: This control is used to on\off, with light indicator.
SeekBar: This control is used to provide visual feedback for the on going tasks.
EditText: This control is used to give input, it is the predefined subclass of TextView that includes rich editing capabilities.
Spinner: This control is used to select one value from a drop down list.
TimePicker: This control is used to select time from the system either AM or PM and in 24 hour mode or 12 hour.
DatePicker: this control is used to select the date of the day.

Create UI Controls:

To create a UI control you have define a view or control in its layout file and assign it a unique id to capture it from layout, as follows:

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"    
xmlns:tools="http://schemas.android.com/tools"    
android:layout_width="match_parent"    
android:layout_height="match_parent"    
android:orientation="vertical"    
tools:context="com.example.hss_24.helloworld.MainActivity">
    
<TextView        
android:id="@+id/textView"        
android:layout_width="wrap_content"        
android:layout_height="wrap_content"        
android:text="I am a TextView"        
android:textAppearance="?android:attr/textAppearanceLarge" />

<Button        
android:id="@+id/button"        
android:layout_width="wrap_content"        
android:layout_height="wrap_content"        
android:text="New Button" />

</LinearLayout>