Android UI Controls

I hope you are enjoying the android journey. This article is going to be very interesting because here, you will come across several UI controls. These UI controls are used to design an immersive, smooth and clean user interface. Each UI control has its feature and is used depending on our needs.

Through this article, you will understand almost all UI controls and how to use them with code snippets.

Android UI Elements

Below are the UI controls that we would be discussing through this article:

TextView
ImageView
EditText
Button
ImageButton
ToggleButton
RadioButton
RadioGroup
CheckBox
AutoCompleteTextView
ProgressBar
Spinner
TimePicker
DatePicker
SeekBar
AlertDialog
Switch

Remember, you can have your parent Layout as Linear Layout, Constraint Layout, Relative Layout, Frame Layout, or Coordinator Layout. Then, inside the parent layout, you can add these UI elements.

Each UI element has its specific attributes.

Some of the common attributes among the elements are as follows:

android:id: It is used to identify your UI element in your project uniquely.
android:height: It is used to set the vertical size of your element.
android:width: It is used to set the width of your element.
android:margin: It is used to provide margin around the elements.
android:padding: It is used to add padding around the content of the component.

There are many more attributes that are specific to specif elements. There you will get to know while we proceed in the course.

Now let’s see each of them in detail about their implementation.

1.TextView

It is used to display text on the screen. You need to use the <TextView> tag in your XML file. TextView can also be customized with different fonts, colors, and sizes, and it supports various text formatting options such as bold and italics.

You can see an example of this below.

Code: XML File

<TextView
         android:id = “@+id/TechVidvanTV”
         android:text = “TechVidvan Text View”
         //you can add other attributes here	
        />

Code: Activity File.

setContentView(R.layout.activity_main)
text_view_var = findViewByID(R.id.TechVidvanTV)

2. ImageView

It is used to display any pictures on the screen. You need to use the <ImageView> tag in your XML file. ImageView can handle various image formats and can be scaled to fit different screen sizes while maintaining the aspect ratio.

You can see an example of this below.

Code: XML File

<ImageView
         android:id = “@+id/TechVidvanIV”
         android:src = “Provide the path of your image here”
         //you can add other attributes here	
        />

Code: Activity File.

setContentView(R.layout.activity_main)
image_view_var = findViewByID(R.id.TechVidvanIV)

3. EditText

It is used to take user input. To implement this, you need to use the <EditText> tag in your XML file. EditText allows for various input types like text, number, password, email, etc., and supports input validation and customization.

You can see an example of this below.

Code: XML File

<EditText
         android:id = “@+id/TechVidvanET”
         android:hint = “Enter your Name”
         //you can add other attributes here	
        />

Code: Activity File.

setContentView(R.layout.activity_main)
edit_text_var = findViewByID(R.id.TechVidvanET)

4. Button

It is used to perform specific events based on the button press. You need to keep the <Button> tag in your XML to implement it. Buttons can be styled with different backgrounds, shapes, and colors to enhance user experience.

You can see an example of this below.

Code: XML File

<Button
 android:id = “@+id/TechVidvanButton”
 android:onClick = “PerformSomething”
 //you can add other attributes here	
/>

Code: Activity File.

setContentView(R.layout.activity_main)
button_var = findViewByID(R.id.TechVidvanButton)

5. ImageButton

It’s similar to a button, but here we have an image to handle events. If you press the image, then a particular task will be performed. You need to use the <ImageButton> tag in your XML file. ImageButton combines the functionality of buttons and images, making it useful for visually rich interfaces.

You can see an example of this below.

Code: XML File

<ImageButton
         android:id = “@+id/TechVidvanImageButton”
         android:onClick = “PerformSomething”
         //you can add other attributes here	
        />

Code: Activity File.

setContentView(R.layout.activity_main)
image_button_var = findViewByID(R.id.TechVidvanImageButton)

6. ToggleButton

It is a switch with two states, i.e., ON and OFF. Users can either make the toggle ON or OFF but not both. To implement this, you need to have a <ToggleButton> tag. ToggleButton is often used for settings and preferences in apps.

You can see an example of this below.

Code: XML File

<ToggleButton
 android:id = “@+id/TechVidvanToggle”
 android:checked = false
 android:textOff="Off"
 android:textOn="On"
 //you can add other attributes here	
/>

Code: Activity File.

setContentView(R.layout.activity_main)
toggle_var = findViewByID(R.id.TechVidvanToggle)

7. RadioButton

In Radio Button, Again, you can either check or uncheck it. To implement this, you need to use the <RadioButton> tag. RadioButton is typically used within a RadioGroup to allow a single selection from multiple options.

You can see an example of this below.

Code: XML File

<RadioButton
 android:id = “@+id/TechVidvanRadio”
 android:text = “TechVidvan’s Radio Button”
 android:checked = false
 //you can add other attributes here	
/>

Code: Activity File.

setContentView(R.layout.activity_main)
radio_button_var = findViewByID(R.id.TechVidvanRadio)

8. RadioGroup

RadioGroup consists of a group of Radio Buttons. Out of the available radio buttons, you are only allowed to select one. You need to use the <RadioGroup> tag. This grouping ensures that only one option is selected at a time, simplifying user choices.

You can see an example of this below.

Code: XML File

<RadioGroup android:orientation="horizontal">
   <RadioButton 
     android:id = “@+id/TechVidvanRadio1”
     android:text="Radio Button 1"
      />
   <RadioButton 
     android:id = “@+id/TechVidvanRadio2”
     android:text="Radio Button 2"
      />
<RadioButton 
     android:id = “@+id/TechVidvanRadio3”
     android:text="Radio Button 3"
      />
                  </RadioGroup>

Code: Activity File.

setContentView(R.layout.activity_main)
radio_button_1 = findViewByID(R.id.TechVidvanRadio1)
radio_button_2 = findViewByID(R.id.TechVidvanRadio2)
radio_button_3 = findViewByID(R.id.TechVidvanRadio3)

9. CheckBox

Similar to the radio button check box also has only two possibilities, either checked or unchecked. However, if you have a group of checkboxes, then you can select more than one checkbox. CheckBoxes are useful for multi-selection options in forms.

You can see an example of this below.

Code: XML File

<CheckBox
        android:id = “@+id/TechVidvanCheckBox”
        android:text = “TechVidvan’s Check Box”
        android:checked = false
        //you can add other attributes here	
       />

Code: Activity File.

setContentView(R.layout.activity_main)
check_box_var = findViewByID(R.id.TechVidvanCheckBox)

10. ProgressBar

Progress bars are required to update the user about the progress of any task. For example, if a user is downloading some file, we need to show them how much more is left.
Two types of a Progress bar are mentioned below:

Determinate Mode: Here, we can determine the portion of the completed task and display it.

Indeterminate Mode: Unlike determinate mode, we are not aware of the progress in an indeterminate way. The progress bar keeps on running continuously until the task is finished.

You can see an example of this below.

Code: XML File

<ProgressBar
       android:id = “@+id/TechVidvanProgressBar”
       //you can add other attributes here	
      />

Code: Activity File.

setContentView(R.layout.activity_main)
progress_bar_var = findViewByID(R.id.TechVidvanProgressBar)

11. AutoCompleteTextView

This is a special kind of edit text in which when the user enters something, he automatically gets suggestions. AutoCompleteTextView can be integrated with a data source like a database or an array to provide real-time suggestions.

12. Spinner

Android Spinner is like a dropdown that shows you an available list to pick from. Spinners are useful for compactly presenting multiple choices.

For example, you need to select your qualification. Then you need to display a known list of capabilities that he may have.

13. TimePicker

It is used to take time input from the user. The user can select a time from a 24-hour or 12-hour time picker. TimePicker can be used for scheduling and time-based input tasks in applications.

14. DatePicker

It is used to take dates as input from the user. The user can select the date from the date picker, which has a similar structure to that of a calendar. DatePicker is commonly used in forms requiring date input, like booking or scheduling apps.

15. SeekBar

Seek bar is similar to the progress bar but has a feature to drag the progress. The user can drag the progress to either left or right using his thumb. SeekBars are often used for volume control, brightness settings, or any input requiring a range of values.

16. AlertDialog

Alert Dialog is used to alert the user. The alert can be to take some confirmations or display specific warnings. AlertDialogs are useful for critical user decisions, confirmations, or error messages.

17. Switch

The switch has two states, either ON or OFF. The user can either leave it ON or OFF form but not both. Switches are commonly used for settings and toggles within an application, providing a clear indication of the state.

Summary

Through this article, you got to know about Android UI Controls. While going further, you got to know about the several UI elements, the parent layouts, and the attributes. Finally, you saw each aspect in detail, along with their code snippets. I hope you got enlightened by the article and will create some awesome UI.