Introduction to Android Widgets
CSE 155 2024 Spring
Android Widgets
• UI widgets are the interactive components
in your app's user interface
• Android provides a wide variety of controls
you can use in your UI
• such as buttons, text fields, seek bars, check
box, zoom buttons, toggle buttons, and many
more
theiilab.com
2
Android Widgets
SeekBar
This is a TextView
TextView
Switch
Button
EditText
ImageButton
Spinner
Checkbox
RadioButton
ProgressBar
theiilab.com
ImageView
3
Understand View Object & View Group
• View Object: is created from the View class
and occupies a rectangular area on the screen
and is responsible for drawing and event
handling
• View is the base class for widgets, which are used
to create interactive UI components
• View Group: is a subclass of View and
provides an invisible container that holds
other Views or other ViewGroups and defines
their layout properties
Understand View Object & View Group
View Group
View Object
theiilab.com
5
How to Create a UI Widget
1
Assign a unique ID
android:id="@+id/text_id"
2
Define a widget in a layout (in res/layout/.xml file)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=”… …” >
<TextView
android:id="@+id/text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a TextView"/>
</LinearLayout >
3
Create an instance of the widget (in Acitvity)
TextView textView = findViewById(R.id.text_id);
theiilab.com
6
Toast1
Constant
Description
LENGTH_LONG
displays view for the long duration of time
LENGTH_SHORT
displays view for the short duration of time
In Activity
//Displaying Toast with Hello CSE 155 message
Context context = getApplicationContext();
CharSequence text = "Hello CSE 155!";
int duration = Toast.LENGTH_SHORT;
the instance of Context
the message to
display
duration
Toast toast = Toast.makeText(context, text, duration);
toast.show();
1
https://developer.android.com/guide/topics/ui/notifiers/toasts
ToggleButton1
Constant
Description
android:textOff
The text for the button when it is not checked
android:textOn
The text for the button when it is checked
In activity_main.xml
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton"
android:textOff="Off"
android:textOn="On” />
1
https://developer.android.com/develop/ui/views/components/togglebutton
ToggleButton1 - Add A Listener
In Activity
ToggleButton toggleButton = findViewById(R.id.toggleButton);
toggleButton.setOnCheckedChangeListener(new
CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
Toast.makeText(getApplicationContext(),
"Toggled",
Toast.LENGTH_LONG)
.show();
}
});
1
https://developer.android.com/develop/ui/views/components/togglebutton
Checkbox1
In activity_main.xml
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content”
android:onClick="onCheckboxClicked"
android:text="Pizza” />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content”
android:onClick="onCheckboxClicked"
android:text="Coffee"/>
<CheckBox
android:id="@+id/checkBox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content”
android:onClick="onCheckboxClicked"
android:text="Burger"/>
1
https://developer.android.com/develop/ui/views/components/checkbox
Checkbox1 – Add A Listener
public void onCheckboxClicked(View view) {
// Is the view now checked?
boolean checked = ((CheckBox) view).isChecked();
// Check which checkbox was clicked
switch(view.getId()) {
case R.id.checkBox:
if (checked) {
// Put some meat on the sandwich
}
else {
// Remove the meat
}
break;
case R.id.checkBox2:
...
break;
case R.id.checkBox3:
...
break;
}
}
1
In Activity
https://developer.android.com/develop/ui/views/components/checkbox
SeekBar1
Constant
Description
android:max
The maximum the progress bar can take
android:progress
The default progress value, between 0 and max
In activity_main.xml
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:max="200"
android:progress="50"/>
1
https://developer.android.com/reference/android/widget/SeekBar
SeekBar1 – Add A Listener
In Activity
SeekBar seekBar = findViewById(R.id.seekBar);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
Toast.makeText(getApplicationContext(),
"seekbar progress: " + seekBar.getProgress(),
Toast.LENGTH_SHORT).show();
}
});
1
https://developer.android.com/reference/android/widget/SeekBar
1
Spinner
In activity_main.xml
<Spinner
android:id="@+id/planets_spinner"
android:layout_width="200dp"
android:layout_height="wrap_content” />
In strings.xml
<resources>
<string-array name="planets_array">
<item>Mercury</item>
<item>Venus</item>
<item>Earth</item>
<item>Mars</item>
<item>Jupiter</item>
<item>Saturn</item>
<item>Uranus</item>
<item>Neptune</item>
</string-array>
</resources>
1
In Activity
Spinner spinner = (Spinner) findViewById(R.id.planets_spinner);
// Create an Adapter using the string array and a default spinner layout
ArrayAdapter<CharSequence> adapter =
ArrayAdapter.createFromResource(this,
R.array.planets_array,
android.R.layout.simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);
https://developer.android.com/develop/ui/views/components/spinner
Spinner1 - Add A Listener
In Activity
public class MainActivity extends Activity
implements AdapterView.OnItemSelectedListener {
...
public void onItemSelected(AdapterView<?> parent,
View view,
int pos, long id) {
// An item was selected. You can retrieve the selected item using
parent.getItemAtPosition(pos);
}
public void onNothingSelected(AdapterView<?> parent) {
// Another interface callback
}
}
Spinner spinner = (Spinner) findViewById(R.id.planets_spinner);
spinner.setOnItemSelectedListener(this);
1
https://developer.android.com/develop/ui/views/components/spinner
Further reading
https://developer.android.com/studio/intro
Further reading
https://developer.android.com/develop/ui/views/components/floating-action-button
Lab Assignment
Create custom (design) buttons