Unformatted Attachment Preview
Chapter 5
How to work with
layouts and widgets
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 1
Objectives
Applied
1. Use one or more linear layouts to align widgets in one or more
rows or columns.
2. Use a table layout to align widgets in a table.
3. Use a frame layout to stack one widget on top of another.
4. Provide a custom layout for landscape orientation.
5. Use an editable text view to allow the user to use a soft
keyboard to enter text and numbers.
6. Use a check box to allow the user to check or uncheck an
option.
7. Use radio buttons to allow the user to select a single option
from a group of options.
8. Use a spinner to allow the user to select one item from a list.
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 2
Objectives (continued)
9. Use a seek bar to allow the user to specify a value by dragging
a thumb to the right or left.
10. Use an image view to display an image.
11. Show or hide any widget.
12. Whenever necessary, display a vertical or horizontal scroll bar
to allow the user to scroll through any widgets that can’t be
displayed on the screen.
13. Use a web view to display web content.
14. Use a progress bar to show progress of an operation.
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 3
Objectives (continued)
Knowledge
1. List and describe the four layouts presented in this chapter.
2. List and describe at least three of the widgets presented in this
chapter.
3. Describe how the View hierarchy works.
4. List and describe some types of input that you can get with an
editable text view.
5. List the four qualifiers for the drawable folder of a project,
describe what the qualifiers stand for, and describe how they
work in general terms.
6. Name the type of image that the Android API documentation
recommends for Android development.
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 4
Layouts covered in this book
Layout
RelativeLayout
LinearLayout
TableLayout
FrameLayout
Lays out widgets…
Relative to one another.
In a vertical or horizontal line.
In a table.
In a stack where one widget is on top of the
other.
Layouts not covered in this book
Layout
AbsoluteLayout
GridLayout
Murach's Android Programming, C5
Why it isn’t covered in this book…
Deprecated in Android 1.5 (API level 8).
Introduced with Android 4.0 (API level 14).
Not compatible with older versions of Android
unless you include a support library.
© 2015, Mike Murach & Associates, Inc.
Slide 5
A list of widgets
TextView
EditText
Button
CheckBox
RadioButton
Spinner
ProgressBar
SeekBar
RatingBar
ImageView
ImageButton
DatePicker
TimePicker
CalendarView
ScrollView
WebView
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 6
The View hierarchy
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 7
A linear layout with vertical orientation and two
buttons
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 8
The XML for the linear layout
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 9
Common attributes
for working with linear layouts
orientation
weight
gravity
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 10
A horizontal layout where the buttons have no
weight
The orientation attribute for the layout
android:orientation="horizontal"
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 11
A horizontal layout where the buttons have
equal weight
The weight attribute for both buttons
android:weight="1"
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 12
A vertical layout where the buttons are
centered horizontally
The gravity attribute for both buttons
android:gravity="center"
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 13
A table layout with two rows and four columns
Common attributes
layout_span
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 14
The XML for the table layout
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
/>
Slide 15
The XML for the table layout (continued)
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 16
A frame layout that displays an image behind
some text
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 17
The XML for the frame layout
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 18
Nested linear layouts
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 19
The XML for nested linear layouts
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 20
The XML for nested linear layouts (continued)
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 21
A linear layout with landscape orientation and
two buttons
The location of the XML files
Portrait
res/layout/settings_activity.xml
Landscape
res/layout-land/settings_activity.xml
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 22
The XML for landscape orientation
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 23
Two text views and two editable text views
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 24
The XML for an editable text view for an email
address
The XML for an editable text view for a
password
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 25
Two attributes of an EditText widget
inputType
lines
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 26
Some common values for the inputType attribute
text
textPersonName
textEmailAddress
textPassword
textMultiline
number
numberDecimal
phone
date
time
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 27
The soft keyboard for an editable text view for
an email address
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 28
Some common values
for the windowSoftInputMode attribute
stateHidden
stateVisible
stateUnchanged
The activity element in the Android manifest
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 29
A check box
A common XML attribute for check boxes
checked
The XML code
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 30
Two common Java methods for check boxes
setChecked(boolean)
isChecked()
Two Java examples
Check or uncheck the box
rememberPercentCheckBox.setChecked(true);
Execute code if the box is checked
if (rememberPercentCheckBox.isChecked()) {
// code to execute when the box is checked
}
else {
// code to execute when the box is NOT checked
}
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 31
Three radio buttons in a radio group with
vertical orientation
horizontal orientation
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 32
The XML code for three radio buttons
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 33
The XML code for three radio buttons
(continued)
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 34
Two Java examples for radio buttons
Check or uncheck the radio button
roundTipRadioButton.setChecked(true);
Execute code if a radio button is checked
if (roundTipRadioButton.isChecked()) {
// code to execute when the button is checked
}
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 35
A spinner
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 36
The XML code
The array in the strings.xml file
Split the bill? - No
Split the bill? - 2 ways
Split the bill? - 3 ways
Split the bill? - 4 ways
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 37
Common methods of the ArrayAdapter class
createFromResource(context, arrayID, layoutID)
setDropDownViewResource(resourceID)
Common methods for spinners
setAdapter(arrayAdapter)
setSelection(index)
getSelectedItemPosition()
getSelectedItem()
Two Android resources for spinner layouts
android.R.layout.simple_spinner_item
android.R.layout.simple_spinner_dropdown_item
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 38
Java examples for spinners
Code that sets up the spinner
// get a reference to the spinner
splitSpinner = (Spinner)
findViewById(R.id.splitSpinner);
// create array adapter for specified array and layout
ArrayAdapter adapter =
ArrayAdapter.createFromResource(
this, R.array.split_array,
android.R.layout.simple_spinner_item);
// set the layout for the drop-down list
adapter.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
// set the adapter for the spinner
splitSpinner.setAdapter(adapter);
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 39
Java examples for spinners (continued)
Code that selects an item
splitSpinner.setSelection(0);
// select the first item
Code that gets the position of the selected item
int position = splitSpinner.getSelectedItemPosition();
Code that gets the selected text from the selected item
String selectedText = (String)
splitSpinner.getSelectedItem();
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 40
A seek bar and a text view
Two common XML attributes for seek bars
max
progress
The XML code for a seek bar and a text view
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 41
Two common Java methods for seek bars
setProgress(int)
getProgress()
Java examples
How to set progress
percentSeekBar.setProgress(20);
How to get progress
int percent = percentSeekBar.getProgress();
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 42
An image
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 43
Types of images supported by Android
• PNG (recommended)
• JPG (acceptable)
• GIF (discouraged)
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 44
The location of the image file
res/drawable-mdpi/restaurant.jpg
Four qualifiers for the drawable folder
Qualifier
xhdpi
hdpi
mdpi
ldpi
Murach's Android Programming, C5
Description
Extra high-density screen (approximately 320dpi).
High-density screen (approximately 240dpi).
Medium-density screen (approximately 160dpi).
Low-density screen (approximately 120dpi).
© 2015, Mike Murach & Associates, Inc.
Slide 45
Two attributes of an ImageView widget
contentDescription
src
The XML code
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 46
A layout with three rows
The same layout with one row hidden
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 47
A method of the View class
setVisibility(visibility)
Code that hides/shows the per person amount
int splitPosition =
splitSpinner.getSelectedItemPosition();
int split = splitPosition + 1;
float perPersonAmount = 0;
if (split == 1) { // no split - hide widgets
perPersonLabel.setVisibility(View.GONE);
perPersonTextView.setVisibility(View.GONE);
}
else { // split - show widgets
perPersonAmount = totalAmount / split;
perPersonLabel.setVisibility(View.VISIBLE);
perPersonTextView.setVisibility(View.VISIBLE);
}
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 48
A scrollable layout
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 49
The XML for vertical scroll bars
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 50
Types of scroll bars
Widget name
ScrollView
HorizontalScrollView
Murach's Android Programming, C5
Scroll bar type
Vertical
Horizontal
© 2015, Mike Murach & Associates, Inc.
Slide 51
A web view
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 52
The Android manifest
An element that must be added just before the application
element
An attribute that you often want to add to the activity
element
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 53
The layout of the activity
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 54
The package for working with web views
android.webkit
Code from the onCreate method of the activity
Get references to the web view and progress bar
WebView webView =
(WebView) findViewById(R.id.webView);
final ProgressBar progressBar =
(ProgressBar) findViewById(R.id.progressBar);
Enable JavaScript for the web view
webView.getSettings().setJavaScriptEnabled(true);
Load URLs in the web view, not in browser app
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view,
String url) {
return false;
}
});
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 55
Code from the onCreate method (continued)
Display the progress bar until the page is 100% loaded
webView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
if (progress == 100) {
progressBar.setVisibility(View.GONE);
}
else {
progressBar.setVisibility(View.VISIBLE);
}
}
});
Load the content from the specified URL into the web view
webView.loadUrl("http://www.murach.com/");
Murach's Android Programming, C5
© 2015, Mike Murach & Associates, Inc.
Slide 56
Chapter 8
How to work with
menus and preferences
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 1
Objectives
Applied
1. Given the specifications for a menu that contains one or more
items, define the menu and its items and handle the events that
occur when users select those items.
2. Given the specifications for the preferences for an app, use a
fragment to allow the user to set those preferences.
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 2
Objectives (continued)
Knowledge
1. Name and describe the most common type of menu.
2. Distinguish between an action item and the action overflow
item.
3. Describe how Android decides whether to display an item as
an action item or a menu item.
4. Explain how to use an intent to start an activity.
5. In general, explain how the Preferences API works and list one
of its benefits.
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 3
An activity with an options menu
that has two items
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 4
The same options menu displayed from an
action overflow icon
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 5
Two action items displayed as text
Two action items displayed as icons
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 6
One action icon and an overflow action icon
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 7
Three types of menus
• An options menu typically drops down from the action
overflow icon as shown earlier. However, it can also be
displayed across the bottom of the screen as shown earlier.
• A floating context menu appears as a floating list of menu
items when a user performs a long click on the widget.
Alternately, contextual action mode can display action items
that apply to the selected item or items.
• A popup menu usually appears as a list below a widget or
action item.
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 8
The file that contains the XML for the menu
res\menu\activity_tip_calculator.xml
The XML for the menu
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 9
Some attributes of a menu item
title
icon
showAsAction
orderInCategory
Typical values for the showAsAction attribute
always
never
ifRoom
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 10
The location of the icon files for the items
res\drawable-xhdpi\ic_settings.png
res\drawable-xhdpi\ic_about.png
A directory that has standard icons for API 23
\sdk\platforms\android-23\data\res\drawable-xhdpi
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 11
The code that displays the menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(
R.menu.activity_tip_calculator, menu);
return true;
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 12
The code that handles the menu item events
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_settings:
Toast.makeText(this, "Settings",
Toast.LENGTH_SHORT).show();
return true;
case R.id.menu_about:
Toast.makeText(this, "About",
Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 13
Code that starts a new activity
Two statements
Intent settings = new Intent(
getApplicationContext(), SettingsActivity.class);
startActivity(settings);
One statement
startActivity(new Intent(
getApplicationContext(), SettingsActivity.class));
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 14
Code that uses menu items to start new activities
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menu_settings:
startActivity(new Intent(
getApplicationContext(),
SettingsActivity.class));
return true;
case R.id.menu_about:
startActivity(new Intent(
getApplicationContext(),
AboutActivity.class));
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 15
The Settings activity
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 16
The dialog for the “Rounding?” item
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 17
The file that contains the XML for the
preferences
res\xml\preferences.xml
The XML for the preferences
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 18
Some attributes for all Preference elements
key
title
summary
defaultValue
Some attributes for a ListPreference element
dialogTitle
entries
entryValues
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 19
The SettingsFragment class
package com.murach.tipcalculator;
import android.os.Bundle;
import android.preference.PreferenceFragment;
public class SettingsFragment
extends PreferenceFragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Load the preferences from an XML resource
addPreferencesFromResource(R.xml.preferences);
}
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 20
The SettingsActivity class
package com.murach.tipcalculator;
import android.app.Activity;
import android.os.Bundle;
public class SettingsActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Display the fragment as the main content
getFragmentManager()
.beginTransaction()
.replace(android.R.id.content,
new SettingsFragment())
.commit();
}
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 21
How to work with preferences
Step 1: Define the instance variables
private SharedPreferences prefs;
private boolean rememberTipPercent = true;
private int rounding = ROUND_NONE;
Step 2: Set the default values (onCreate)
PreferenceManager.setDefaultValues(
this, R.xml.preferences, false);
Step 3: Get the SharedPreferences object (onCreate)
prefs = PreferenceManager.getDefaultSharedPreferences(this);
Step 4: Get the preferences (onResume)
rememberTipPercent = prefs.getBoolean(
"pref_remember_percent", true);
rounding = Integer.parseInt(
prefs.getString("pref_rounding", "0"));
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 22
Some methods of the SharedPreferences object
getBoolean(key, default)
getString(key, default)
getInt(key, default)
getLong(key, default)
getFloat(key, default)
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 23
Use the “Remember Tip Percent” preference
in the onResume method
if (rememberTipPercent) {
tipPercent = prefs.getFloat("tipPercent", 0.15f);
}
else {
tipPercent = 0.15f;
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 24
Use the “Rounding” preference
in the calculateAndDisplay method
float tipPercentToDisplay = 0;
if (rounding == ROUND_NONE) {
tipAmount = billAmount * tipPercent;
totalAmount = billAmount + tipAmount;
tipPercentToDisplay = tipPercent;
}
else if (rounding == ROUND_TIP) {
tipAmount = StrictMath.round(billAmount * tipPercent);
totalAmount = billAmount + tipAmount;
tipPercentToDisplay = tipAmount / billAmount;
}
else if (rounding == ROUND_TOTAL) {
float tipNotRounded = billAmount * tipPercent;
totalAmount = StrictMath.round(
billAmount + tipNotRounded);
tipAmount = totalAmount - billAmount;
tipPercentToDisplay = tipAmount / billAmount;
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 25
A Settings activity that uses categories
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 26
The XML for the preferences
...
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 27
A Settings activity that uses dependencies
The dependency attribute
dependency
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 28
The XML for the preferences
...
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 29
A class that works with preferences
package com.murach.tipcalculator;
import android.content.SharedPreferences;
import android.content.SharedPreferences.
OnSharedPreferenceChangeListener;
import android.os.Bundle;
import android.preference.Preference;
import android.preference.PreferenceFragment;
import android.preference.PreferenceManager;
public class SettingsFragment extends PreferenceFragment
implements OnSharedPreferenceChangeListener {
private SharedPreferences prefs;
private boolean rememberPercent;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
addPreferencesFromResource(R.xml.preferences);
prefs = PreferenceManager.getDefaultSharedPreferences
(getActivity());
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 30
A class that works with preferences (continued)
@Override
public void onResume() {
super.onResume();
rememberPercent = prefs.getBoolean(
"pref_remember_percent", true);
this.setDefaultPercentPreference(rememberPercent);
prefs.registerOnSharedPreferenceChangeListener(this);
}
private void setDefaultPercentPreference(
boolean rememberPercent) {
Preference defaultPercent =
findPreference("pref_default_percent");
if (rememberPercent) {
defaultPercent.setEnabled(false);
} else {
defaultPercent.setEnabled(true);
}
}
@Override
public void onPause() {
prefs.unregisterOnSharedPreferenceChangeListener(this);
super.onPause();
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 31
A class that works with preferences (continued)
@Override
public void onSharedPreferenceChanged(SharedPreferences prefs,
String key) {
if (key.equals("pref_remember_percent")) {
rememberPercent = prefs.getBoolean(key, true);
}
this.setDefaultPercentPreference(rememberPercent);
}
}
Murach's Android Programming, C8
© 2015, Mike Murach & Associates, Inc.
Slide 32