Android - SPLessons

Android Input Controls

Chapter 10

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Android Input Controls

Android Input Controls

Android Input Controls are the interactive components present in your application’s user interface. Buttons, text fields, seek bars, checkboxes, zoom buttons, toggle buttons, etc. are a few types of controls that you can use in UI. You can add as many controls as you desire in your application, by declaring the appropriate XML elements in a XML layout file, which is located in the res/layout directory of your project.

Android provides many input controls to help us build a more suitable graphical interface for our app. Most commonly used input controls are:

TextView : It is a component where we can display a text on the screen and android:text attribute is used to set the displayed text.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android" />

</LinearLayout>

EditText: This component is a subclass of TextView represents an editable text field. We can specify the type of the data that the user can fill in the EditText, by setting the suitable value in the android:inputType attribute. Attributes such as android:hint and android:ems can be used to define the default text and the width of the EditText respectively.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="password"
        android:inputType="textPassword" >

        <requestFocus />
    </EditText>

</LinearLayout>

CheckBoxIt is another UI component where you can provide a group (or not) of two-states option (checked or unchecked) and android:checked attribute can be set to true or false, in order to define the default selection.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <CheckBox
        android:id="@+id/chk1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Checkbox 1" />

    <CheckBox
        android:id="@+id/chk2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Checkbox 2"
        android:checked="true" />

</LinearLayout>

RadioButtons : This component allows the user to choose only one option from a set. To define the set, we put the RadioButtons into a RadioGroup and android:checked attribute is used to declare the default option.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/myRadioGroup"
        android:checkedButton="@+id/sound" >

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn1"
            android:checked="true"
            android:text="Radio Button1" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btn2"
            android:text="Radio Button2" />

    </RadioGroup>

</LinearLayout>

Button: It is another input control, where an action is launched when pressed. We can use android:onClick attribute to define the calling function of the Activity, when the user clicks it. Otherwise, we can handle the click event by using the appropriate listener.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click!"
        android:onClick="show" />

</LinearLayout>

In the above example, onclick of a button show() method of activity will be called.

ImageButtonIt is  a subclass of ImageView, which displays a button with an image instead of a text. To set the image, android:src XML element is used.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:background="@null" />

</LinearLayout>

ProgressBar: This component is used to show the progress state of an operation. We can define the style of the progress bar, by setting the respective XML element.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Switch: It represents on/off option that can be toggled by the user. Like Switch requires an API of Level 14 or higher and is like a ToggleButton. So, if the targeting SDKs are less than Level 14, it is recommended to use ToggleButton, android:textOn , and android:textOff attributes are used to define the text in on and off states respectively.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <ToggleButton
        android:id="@+id/toggleButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="turn_on"
        android:textOff="turn_off"
        android:checked="true" />

</LinearLayout>

Picker: It is a ready-to-use dialog where the user can select a value via swipe gesture. There is a DatePicker (month, day, year) and a TimePicker (hour, minute, AM/PM) respectively.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TimePicker
        android:id="@+id/timePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <DatePicker
        android:id="@+id/datePicker1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Spinner: It is a drop-down list of selection set, where the user can pick one. To handle the Spinner, ArrayAdapter should be called in the source code of the Activity. Click here for an example of spinner.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

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

</LinearLayout>

RatingBarIt is an extension of SeekBar and ProgressBar that provides rating with stars. We can use some attributes like android:numStars, android:stepSize and android:rating, in order to define the number of rating stars, rating step and the default rating of the displayed RatingBar.

Ex:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp" />

</LinearLayout>