Site icon Technopoints

Basic UI elements in Android

Basic UI elements in Android

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 id attribute 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
android:drawableBottom
android:drawableLeft
android:drawableRight
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 🙂

Exit mobile version