Hey Technoz, Hope you are doing great. In this tutorial, we are going to discuss about basic User interface UI elements in android. We will see the following elements:
However, Let us see these elements one by one.
TextView
A TextView is an element which is use to display a text in android. A TextView can have number of attributes to make it appear special, and enhance its look. Here are some of mostly used attributes:
Note: Every attribute can have
idattribute to help it uniquely identify the element.
| Attributes | Explanation |
|---|---|
android:text |
It contains the actual text to be shown |
android:background |
It gives the background color to the TextView |
android:textSize |
This attribute decides the size of text |
android:drawableTop |
It puts a drawable image on the top, bottom, left and right of TextView respectively |
android:textStyle |
This attribute enables to give style to text like bold and italic |
A typical sample TextView element can be implemented as follows:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies:"
android:textSize="18sp"/>
EditText
An EditText is an element used to get the text input from the user. It can have following attributes:
| Attributes | Explanation |
|---|---|
android:hint |
It is a light text shown to the user for what type input the EditText accepts |
android:Text |
The values placed in this attribute will be placed directly in EditText |
android:inputType |
It is used to to state which type of input the TextView will carry |
android:focusable |
It accepts the boolean values. If set to true, it gains the focus automatically at the start of Activity. |
A Typical EditText is as follows:
<EditText
android:id="@+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"
android:inputType="textPersonName"
android:focusable="true"/>
Button
A button, is always, use to submit data or perform some action. However, It can have following attributes:
| Attributes | Explanation |
|---|---|
android:text |
It shows the text on the button |
android:onClick |
This attribute executes the method defined in this attribute, as soon as the button is clicked |
android:background |
It provides background to the button |
Thus. let us see the typical implementation of Button:
<Button
android:id="@+id/submitbtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit" />
RadioButton
RadioButton allows user to make single choice out of multiple options. It is generally used in online MCQ tests. For instance, The two or more RadioButtons are grouped into one RadioGroup. Selecting one RadioButton automatically deselects the other ones. So, Lets now see the most used attribute in RadioButtons, UI elements in android:
| Attributes | Explanation |
|---|---|
android:text |
It shows the text besides the RadioButton |
android:textSize |
This controls the size of the text |
Thus, a typical implementation of RadioButton is as follows:
<RadioGroup
android:id="@+id/groupgender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="rbtn">
<RadioButton
android:id="@+id/male"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Male"
android:textSize="18sp" />
<RadioButton
android:id="@+id/female"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Female"
android:textSize="18sp"/>
</RadioGroup>
CheckBox
A CheckBox is a widget used to select multiple options from multiple choices given. Lets see the following mostly used attributes:
| Attributes | Explanation |
|---|---|
android:text |
It shows the text besides the CheckBox |
android:textSize |
This controls the size of the text |
Furthermore, let us see the typical checkbox in xml:
<CheckBox
android:id="@+id/hobby1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Drawing"/>
Finally, We have now introduced to these basic UI elements in android. Now, we will implement them in our project.
Build a project
First of all, create a new android project, or add a new activity to an existing one. I have added a new Activity named BasicActivity. It will create both Java and XML files. Lets code activity_basic.xml as follows:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5sp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Basic Operations Tutorials"
android:textSize="25sp"
android:gravity="center_horizontal"
android:textStyle="bold"
android:layout_marginBottom="5sp"/>
<EditText
android:id="@+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"
android:inputType="textPersonName"
android:focusable="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender:"
android:textSize="18sp"/>
<RadioGroup
android:id="@+id/groupgender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="rbtn">
<RadioButton
android:id="@+id/male"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Male"
android:textSize="18sp" />
<RadioButton
android:id="@+id/female"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Female"
android:textSize="18sp"/>
</RadioGroup>
<TextView
android:layout_width="match_parent"
android:layout_height="1sp"
android:background="@color/colorAccent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies:"
android:textSize="18sp"/>
<CheckBox
android:id="@+id/hobby1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Drawing"/>
<CheckBox
android:id="@+id/hobby2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Photoraphy"/>
<CheckBox
android:id="@+id/hobby3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Reading"/>
<CheckBox
android:id="@+id/hobby4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dancing"/>
<CheckBox
android:id="@+id/hobby5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Singing"/>
<Button
android:id="@+id/submitbtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Output"
android:textSize="20sp"
android:gravity="center_horizontal"/>
<TextView
android:id="@+id/showname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="15sp"/>
<TextView
android:id="@+id/showgender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Gender"
android:textSize="15sp"/>
<TextView
android:id="@+id/showhobbies"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hobbies: "
android:textSize="15sp"/>
</LinearLayout>
</ScrollView>
Above all, We have included all elements in ScrollView, which acts as a root element. Generally, as the ScrollView can have only one child, we have wrapped in all the UI elements in android in linearLayout and set its orientation to vertical. so that elements will appear one by one top to bottom.
Subsequently, at this point you are able to see the elements in your design layout. However, they will not work for now. We will add java code to make them work. So, Lets code BasicActivity.java as follows:
package net.softglobe.tutorials;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
public class BasicActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_basic);
Button submitbtn = findViewById(R.id.submitbtn);
submitbtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//RadioButton Group
RadioGroup radioGroup = findViewById(R.id.groupgender);
//find the Radio Button which is checked
int selectedId = radioGroup.getCheckedRadioButtonId();
//finding RadioButton
RadioButton gender = findViewById(selectedId);
//Initializing EditText
EditText et_name = findViewById(R.id.et_name);
//Initializing TextViews
TextView tv_name = findViewById(R.id.showname);
tv_name.setText("Name: "+et_name.getText());
TextView tv_gender = findViewById(R.id.showgender);
if (selectedId == -1) {
tv_gender.setText("Gender: ");
} else {
tv_gender.setText("Gender: "+gender.getText());
}
//Initializing Checkboxes
CheckBox hobby1 = findViewById(R.id.hobby1);
CheckBox hobby2 = findViewById(R.id.hobby2);
CheckBox hobby3 = findViewById(R.id.hobby3);
CheckBox hobby4 = findViewById(R.id.hobby4);
CheckBox hobby5 = findViewById(R.id.hobby5);
String hobbies = "Hobbies: ";
if (hobby1.isChecked())
hobbies = hobbies+ hobby1.getText().toString()+" ";
if (hobby2.isChecked())
hobbies = hobbies+ hobby2.getText().toString()+" ";
if (hobby3.isChecked())
hobbies = hobbies+ hobby3.getText().toString()+" ";
if (hobby4.isChecked())
hobbies = hobbies+ hobby4.getText().toString()+" ";
if (hobby5.isChecked())
hobbies = hobbies+ hobby5.getText().toString()+" ";
TextView tv_hobbies = findViewById(R.id.showhobbies);
tv_hobbies.setText(hobbies);
}
});
}
}
So, the above code contains some comments to help the code understand well. However, I am explaining what we have done in above code.
Lets understand the code
To make all these basic UI elements in android work as per our requirement, we have initialized them when we are going to use them. We have initialized a button. The onClickListener is assigned to button, which on clicked, will execute the code wrapped in it. We are taking the name value from the EditText, gender value from Radiobutton, hobbies value from CheckBox. Finally, We click on the submit button. There are TextViews below to which we are assign the respective values and we can get the output there.
Furthermore, I am trying to explain the major things in above code. Each element is identified by findViewById()function in which the element is referenced using id defined in its xml file’s id attribute.
EditText: The EditText collects the name value entered by user.
RadioButton: At first, we initialize the RadioGroup. Furthermore, To know which button is selected by user, we use getCheckedRadioButtonId() method and it returns the integer value. We use that value to find the id of selected button with findViewById() method.
TextView: The TextView is initialized and we set values to TextView using setText() method.
CheckBox: The CheckBoxis initialized and we get the details whether the CheckBox is checked or not with a function isChecked().
That’s it! Now we have completed all the coding. So, have a look at the screenshot below.
Finally We have built our app using basic UI elements in android. To sum up, we have here studied and implemented all the basic UI elements. If you want to jump directly on the implementation, then you can always download the source code from the below link.
Download Source Code
That’s all for now. If you have any problems implementing the above tutorial, then please let me know in comment box below. Please subscribe to our email newsletter to stay updated for our new upcoming tutorials. Thank You 🙂