Widgets in Android

Wiktionary define widgets as any one of the components of a computer application's graphical user interface, such as a Cancel button or text input box that a user interacts with.

Some widgets can be inserted into graphical user interface through .xml file or .java file.

Widgets in Android includes the following:

Button, EditText, CheckBox, Spinner, RadioButton, DatePicker, TimePicker, ToggleButton, Toast, RatingBar, ProgressBar and many more.

Button: A button can be pressed or clicked by the user to perform a particular action. There are two types of button —text button and image button.

Button (Text Button)

 

In the .xml file

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Submit"
    android:layout_centerInParent="true"
    android:id="@+id/submit"/>

In the .java file

Button submitButton = (Button) findViewById(R.id.submit);

submitButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //Do something when the button is clicked
    }
});

ImageButton

In the .xml file

<ImageButton
    android:layout_width="100dp"
    android:layout_height="70dp"
    android:layout_centerInParent="true"
    android:src="@android:drawable/ic_media_play"
    android:background="@color/colorAccent"
    android:id="@+id/play"/>

In the .java file

ImageButton playButton = (ImageButton) findViewById(R.id.play);

playButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //Do something when the button is clicked
    }
});

EditText: EditText is a widget that allows a user to enter texts. When a user clicks on it, the keyboard appears. It could be a single or multiple lines.

In the .xml file

<EditText
    android:layout_width="0dp"
    android:layout_weight="4"
    android:layout_height="wrap_content"
    android:hint="Rex Ben"
    android:inputType="text"
    android:id="@+id/edit_text_name"/>

In the .java file

//Get the reference of the EditText in the Java class
EditText editText = (EditText) findViewById(R.id.edit_text_name);
//Store the editText in a variable with the data type String
String name = editText.getEditableText().toString();

RadioButton: A radio button allows users to pick an option from a set. To make sure only one button is picked, you should group radio buttons into a radio group.

In your .xml file

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Do you like chocolate?"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" />

<RadioGroup
    android:id="@+id/radiGrp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp">

    <RadioButton
        android:id="@+id/yes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Yes"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

    <RadioButton
        android:id="@+id/no"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

    <RadioButton
        android:id="@+id/dont_know"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I don't know"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

</RadioGroup>

In your .java file

RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radiGrp);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup radioGroup, @IdRes int i) {
        switch (i){
            case R.id.yes:
                //Do something when yes is checked
                break;
            case R.id.no:
            //Do something when no is checked
            break;
            case R.id.dont_know:
            //Do something when I don't know is checked
            break;
        }
    }
});

CheckBox: Unlike radio button, checkbox allows users to pick one or more options from a set.

In your .xml file

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="Check your favourite snack(s)"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" />

<CheckBox
    android:id="@+id/cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="cake"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />
<CheckBox
    android:id="@+id/donut"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="donut"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />
<CheckBox
    android:id="@+id/cookies"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="cookies"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />

In your .java file

CheckBox cake = (CheckBox) findViewById(R.id.cake);
CheckBox donut = (CheckBox) findViewById(R.id.donut);
CheckBox cookies = (CheckBox) findViewById(R.id.cookies);

if (cake.isChecked() && donut.isChecked() && cookies.isChecked()) {
    //What should happen when all the three checkboxes are checked
} else if (cake.isChecked() && donut.isChecked()) {
    //what should happen when cake and donut are checked
} else if (cake.isChecked() && cookies.isChecked()) {
    //what should happen when cake and cookies are checked
}else if (donut.isChecked()&& cookies.isChecked()){
    //what should happen when donut and cookies are checked
}else if (cake.isChecked()){
    //what should happen when cake is checked only
}else if (donut.isChecked()){
    //what should happen when donut is checked only
}else if (cookies.isChecked()){
    //what should happen when cookies is checked only
}

Toggle Button: Toggle button allows users to change a setting between states. It is either on(true) or off(false).

In your .xml file

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/toggle"
    android:onClick="toggleBtn"/>

In your .java file

public class MainActivity extends AppCompatActivity {
    private ToggleButton toggleButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toggleButton = (ToggleButton) findViewById(R.id.toggle);

    }

    public void toggleBtn(View view) {
        if (toggleButton.isChecked()) {
            //Do something when is checked
        }else {
            //Do something else
        }

    }
}

Spinner: Spinner is a widget that allows users to pick one option from a drop down menu. There is a default value, when the user clicks on the spinner a dropdown menu appears with several values that a user can pick from.

In your .xml file

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

In your .java file

Spinner spinner = (Spinner) findViewById(R.id.spinner);
String [] languages = {"Chinese", "English", "French", "German"};
ArrayAdapter arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_dropdown_item_1line, languages);
spinner.setAdapter(arrayAdapter);

ProgressBar: As the name implies, it is a widget used to show progress of a given task.It can move circularly or horizontally. A progressBar can be set to determinate when the duration is fixed but indeterminate when the duration is not fixed (e.g. parsing JSON from the internet).

Circular ProgressBar

Horizontal ProgressBar

In your .xml file

<ProgressBar

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/progress"/>

    

    <ProgressBar

        android:layout_width="match_parent"

        android:layout_height="wrap_content" 

        style="@style/Widget.AppCompat.ProgressBar.Horizontal"

        android:indeterminateOnly="true"/>

RatingBar: RatingBar is an extension of SeekBar and ProgressBar that shows a rating in stars. This widget allows a user to rate your App or it can also be used to rate one’s performance.

In your .xml file

<RatingBar

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:numStars="6"

    android:rating="4"

    android:id="@+id/rating"/>

In your .java file

RatingBar ratingBar = (RatingBar) findViewById(R.id.rating);

ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {

    @Override

    public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {

        //What happen when the rating bar is changed

    }

});

Toast: Toast is a notification message that pops up for a stipulated period. For instance, you can use toast message to display where a user entry in a quiz is right or wrong. 

In your .java file

Toast toast = Toast.makeText(this, "First Activity launched", Toast.LENGTH_SHORT);

toast.show();

DatePicker: DatePicker is a widget that allow users to select the date. This date consists of day, month and year.

In your .xml file

<DatePicker

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/date"/>

In your .java file

DatePicker datePicker = (DatePicker) findViewById(R.id.date);

Calendar calendar = Calendar.getInstance();

datePicker.init(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH),

        calendar.get(Calendar.DAY_OF_MONTH), new DatePicker.OnDateChangedListener() {

    @Override

    public void onDateChanged(DatePicker datePicker, int i, int i1, int i2) {

        //Write your code

    }

});

TimePicker: TimePicker is a widget that allow users to select the time. It could be 24 hours or 12 hours(AM/PM). It consists of hours and minutes and clock format.

In your .xml file

<TimePicker

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:id="@+id/time"/>

In your .java file

TimePicker timePicker = (TimePicker) findViewById(R.id.time);

timePicker.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {

    @Override

    public void onTimeChanged(TimePicker timePicker, int i, int i1) {

        //Write your code

    }

});