Scribd
Upload
102 views

Gui Widgets PDF

This document summarizes common Android GUI widgets including: 1. Buttons, ImageButtons, and ImageViews which are used to display clickable or non-clickable images and text. 2. EditTexts, CheckBoxes and RadioButtons which allow for text input or toggling options on or off. 3. Spinners which display a drop-down list of selectable options. 4. Examples are provided for setting attributes in XML layout files and handling click events for buttons and selections for spinners in Java code.

Uploaded by

alolmani_oop
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
102 views

Gui Widgets PDF

This document summarizes common Android GUI widgets including: 1. Buttons, ImageButtons, and ImageViews which are used to display clickable or non-clickable images and text. 2. EditTexts, CheckBoxes and RadioButtons which allow for text input or toggling options on or off. 3. Spinners which display a drop-down list of selectable options. 4. Examples are provided for setting attributes in XML layout files and handling click events for buttons and selections for spinners in Java code.

Uploaded by

alolmani_oop
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

CS 193A

GUI Widgets

This document is copyright (C) Marty Stepp and Stanford Computer Science.
Licensed under Creative Commons Attribution 2.5 License. All rights reserved.
Recall: Android widgets

Analog/DigitalClock Button Checkbox Date/TimePicker

EditText Gallery ImageView/Button ProgressBar

RadioButton Spinner TextView MapView, WebView


Button (link)
A clickable widget with a text label

● key attributes:
android:clickable="bool" set to false to disable the button
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:text="text" text to put in the button

● represented by Button class in Java code


Button b = (Button) findViewById(R.id.theID);
...
ImageButton
A clickable widget with an image label

● key attributes:
android:clickable="bool" set to false to disable the button
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:src="@drawable/img" image to put in the button
(must correspond to an image resource)

● to set up an image resource:


– put image file in project folder app/src/main/res/drawable
– use @drawable/foo to refer to foo.png
● use simple file names with only letters and numbers
ImageView
Displays an image without being clickable

● key attributes:
android:id="@+id/theID" unique ID for use in Java code

android:src="@drawable/img" image to put in the screen


(must correspond to an image resource)

● to change the visible image, in Java code:


– get the ImageView using findViewById
– call its setImageResource method and pass R.drawable.filename
EditText (link)
An editable text input box

● key attributes:
android:hint="text" gray text to show before user starts to type
android:id="@+id/theID" unique ID for use in Java code
android:inputType="type" what kind of input is being typed;
number,phone,date,time,...
android:lines="int" number of visible lines (rows) of input
android:maxLines="int" max lines to allow user to type in the box
android:text="text" initial text to put in box (default empty)
android:textSize="size" size of font to use (e.g. "20dp")

– others: capitalize, digits, fontFamily, letterSpacing,


lineSpacingExtra, minLines, numeric, password,
phoneNumber, singleLine, textAllCaps, textColor, typeface
CheckBox (link)
An individual toggleable on/off switch

● key attributes:
android:checked="bool" set to true to make it initially checked
android:clickable="bool" set to false to disable the checkbox
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:text="text" text to put next to the checkbox

● In Java code:
CheckBox cb = (CheckBox) findViewById(R.id.theID);
cb.toggle();
cb.setChecked(true);
cb.performClick();
RadioButton (link)
A toggleable on/off switch; part of a group

● key attributes:
android:checked="bool" set to true to make it initially checked
android:clickable="bool" set to false to disable the button
android:id="@+id/theID" unique ID for use in Java code
android:onClick="function" function to call in activity when clicked
(must be public, void, and take a View arg)
android:text="text" text to put next to the button

● need to be nested inside a RadioGroup tag in XML


so that only one can be selected at a time
RadioGroup example
<LinearLayout ...
android:orientation="vertical"
android:gravity="center|top">
<RadioGroup ...
android:orientation="horizontal">
<RadioButton ... android:id="@+id/lions"
android:text="Lions"
android:onClick="radioClick" />
<RadioButton ... android:id="@+id/tigers"
android:text="Tigers"
android:checked="true"
android:onClick="radioClick" />
<RadioButton ... android:id="@+id/bears"
android:text="Bears, oh my!"
android:onClick="radioClick" />
</RadioGroup>
</LinearLayout>
Reusing onClick handler
// in MainActivity.java
public class MainActivity extends Activity {

public void radioClick(View view) {


// check which radio button was clicked
if (view.getId() == R.id.lions) {
// ...
} else if (view.getId() == R.id.tigers) {
// ...
} else {
// bears ...
}
}
Spinner (link)
A drop-down menu of selectable choices

● key attributes:
android:clickable="bool" set to false to disable the spinner
android:id="@+id/theID" unique ID for use in Java code
android:entries="@array/array" set of options to appear in spinner
(must match an array in strings.xml)
android:prompt="@string/text" title text when dialog of choices pops up

● also need to handle events in Java code (see later)


– must get the Spinner object using findViewById
– then call its setOnItemSelectedListener method (see example)
String resources
● Declare constant strings and arrays in res/values/strings.xml:
<resources>
<string name="name">value</string>
<string name="name">value</string>

<string-array name="arrayname">
<item>value</item>
<item>value</item>
<item>value</item> <!-- must escape ' as \' in values -->
...
<item>value</item>
</string-array>
</resources>

● Refer to them in Java code:


– as a resource: R.string.name, R.array.name
– as a string or array: getResources().getString(R.string.name),

getResources().getStringArray(R.array.name)
Spinner example
<LinearLayout ...>
<Spinner ... android:id="@+id/tmnt"
android:entries="@array/turtles"
android:prompt="@string/choose_turtle" />
<TextView ... android:id="@+id/result" />
</LinearLayout>

● in res/values/strings.xml:
<resources>
<string name="choose_turtle">Choose a turtle:</string>
<string-array name="turtles">
<item>Leonardo</item>
<item>Michelangelo</item>
<item>Donatello</item>
<item>Raphael</item>
</string-array>
</resources>
Spinner event example
// in MainActivity.java
public class MainActivity extends Activity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Spinner spin = (Spinner) findViewById(R.id.tmnt);


spin.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> spin, View v, int i, long id) {
TextView result = (TextView) findViewById(R.id.turtle_result);
result.setText("You chose " + spin.getSelectedItem());
}

public void onNothingSelected(AdapterView<?> parent) {} // empty


});
}
}
TMNT app exercise
● Write an app to select TMNT characters from a spinner.
– When a character is selected, an image about
that character and other information
is presented to the user.
– Assume that relevant image files are
already available for each character.
ScrollView
A container with scrollbars around
another widget or container

<LinearLayout ...>
...
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView ... android:id="@+id/turtle_info" />
</ScrollView>
</LinearLayout>
List (link)
A visible menu of selectable choices

● lists are more complicated,


so we'll cover them later ...

You might also like