Android Studio

Chapter 5

How to work with

layouts and widgets

Chapter 5

How to work with layouts and widgets

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.

Objectives

Applied

Use one or more linear layouts to align widgets in one or more rows or columns.

Use a table layout to align widgets in a table.

Use a frame layout to stack one widget on top of another.

Provide a custom layout for landscape orientation.

Use an editable text view to allow the user to use a soft keyboard to enter text and numbers.

Use a check box to allow the user to check or uncheck an option.

Use radio buttons to allow the user to select a single option from a group of options.

Use a spinner to allow the user to select one item from a list.

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.

Objectives (continued)

Use a seek bar to allow the user to specify a value by dragging a thumb to the right or left.

Use an image view to display an image.

Show or hide any widget.

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.

Use a web view to display web content.

Use a progress bar to show progress of an operation.

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.

Objectives (continued)

Knowledge

List and describe the four layouts presented in this chapter.

List and describe at least three of the widgets presented in this chapter.

Describe how the View hierarchy works.

List and describe some types of input that you can get with an editable text view.

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.

Name the type of image that the Android API documentation recommends for Android development.

Layouts covered in this book

Layout Lays out widgets…

RelativeLayout Relative to one another.

LinearLayout In a vertical or horizontal line.

TableLayout In a table.

FrameLayout In a stack where one widget is on top of the

other.

Layouts not covered in this book

Layout Why it isn’t covered in this book…

AbsoluteLayout Deprecated in Android 1.5 (API level 8).

GridLayout Introduced with Android 4.0 (API level 14).

Not compatible with ol der versions of Android

unless you include a support library.

Layouts covered in this book

Layout Lays out widgets…

RelativeLayout Relative to one another.

LinearLayout In a vertical or horizontal line.

TableLayout In a table.

FrameLayout In a stack where one widget is on top of the other.

Layouts not covered in this book

Layout Why it isn’t covered in this book…

AbsoluteLayout Deprecated in Android 1.5 (API level 8).

GridLayout Introduced with Android 4.0 (API level 14). Not compatible with older versions of Android unless you include a support library.

A list of widgets

TextView

EditText

Button

CheckBox

RadioButton

Spinner

ProgressBar

SeekBar

RatingBar

ImageView

ImageButton

DatePicker

TimePicker

CalendarView

ScrollView

WebView

A list of widgets

TextView

EditText

Button

CheckBox

RadioButton

Spinner

ProgressBar

SeekBar

RatingBar

ImageView

ImageButton

DatePicker

TimePicker

CalendarView

ScrollView

WebView

The View hierarchy

The View hierarchy

A linear layout with vertical orientation and two

buttons

A linear layout with vertical orientation and two buttons

The XML for the linear layout

<?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/calculateTipButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/calculate_tip" />

<Button

android:id="@+id/settingsButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/settings" />

</LinearLayout>

The XML for the linear layout

<?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/calculateTipButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/calculate_tip" />

<Button

android:id="@+id/settingsButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/settings" />

</LinearLayout>

Common attributes

for working with linear layouts

orientation

weight

gravity

Common attributes for working with linear layouts

orientation

weight

gravity

A horizontal layout where the buttons have no

weight

The orientation attribute for the layout

android:orientation="horizontal"

A horizontal layout where the buttons have no weight

The orientation attribute for the layout

android:orientation="horizontal"

A horizontal layout where the buttons have

equal weight

The weight attribute for both buttons

android:weight="1"

A horizontal layout where the buttons have equal weight

The weight attribute for both buttons

android:weight="1"

A vertical layout where the buttons are

centered horizontally

The gravity attribute for both buttons

android:gravity="center"

A vertical layout where the buttons are centered horizontally

The gravity attribute for both buttons

android:gravity="center"

A table layout with two rows and four columns

Common attributes

layout_span

A table layout with two rows and four columns

Common attributes

layout_span

The XML for the table layout

<?xml version="1.0" encoding="utf -8"?>

<TableLayout xmlns:android=

"http://schemas.android.com/apk/res/android"

android:layout_width=" match_parent"

android:layout_height="match_parent" >

<TableRow >

<TextView

android:text="@string/bill_amount_label"

<!-- TextView widget attributes --> />

<EditText

android:id="@+id/billAmo untEditText"

android:text="@string/bill_amount"

android:layout_span="3"

<!-- EditText widget attributes -->

<requestFocus />

</EditText>

</TableRow>

The XML for the table layout

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android=

"http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<TableRow >

<TextView

android:text="@string/bill_amount_label"

<!-- TextView widget attributes --> />

<EditText

android:id="@+id/billAmountEditText"

android:text="@string/bill_amount"

android:layout_span="3"

<!-- EditText widget attributes -->

<requestFocus />

</EditText>

</TableRow>

The XML for the table layout (continued)

<TableRow>

<TextView

android:text="@string/tip_percent_label"

<!-- TextView widget attributes --> />

<TextView

android:id="@+id/percentTextView"

android:text="@string/tip_percent"

<!-- TextView widget attributes --> />

<Button

android:id="@+id/percentDownButton"

android:text="@string/decrease"

<!-- Button widget attributes --> />

<Button

android:id="@+id/percentUpButton"

android:text="@string/increase"

<!-- Button widget attributes --> />

</TableRow>

</TableLayout>

The XML for the table layout (continued)

<TableRow>

<TextView

android:text="@string/tip_percent_label"

<!-- TextView widget attributes --> />

<TextView

android:id="@+id/percentTextView"

android:text="@string/tip_percent"

<!-- TextView widget attributes --> />

<Button

android:id="@+id/percentDownButton"

android:text="@string/decrease"

<!-- Button widget attributes --> />

<Button

android:id="@+id/percentUpButton"

android:text="@string/increase"

<!-- Button widget attributes --> />

</TableRow>

</TableLayout>

A frame layout that displays an image behind

some text

A frame layout that displays an image behind some text

The XML for the frame layout

<?xml version="1.0" encoding="utf -8"?>

<FrameLayout xmlns:android=

"http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/photo"

android:src="@drawable/restaurant" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:text="@string/welcome"

android:textColor="#ffffff"

android:textSize="30sp" />

</FrameLayout>

The XML for the frame layout

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=

"http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/photo"

android:src="@drawable/restaurant" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:text="@string/welcome"

android:textColor="#ffffff"

android:textSize="30sp" />

</FrameLayout>

Nested linear layouts

Nested linear layouts

The XML for nested linear layouts

<?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"

android:padding="10dp" >

<!-- the first row -->

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<!-- widgets go here -->

</LinearLayout>

The XML for nested linear layouts

<?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"

android:padding="10dp" >

<!-- the first row -->

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<!-- widgets go here -->

</LinearLayout>

The XML for nested linear layouts (continued)

<!-- the second row -->

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<!-- widgets go here -->

</LinearLayout>

</LinearLayout>

The XML for nested linear layouts (continued)

<!-- the second row -->

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<!-- widgets go here -->

</LinearLayout>

</LinearLayout>

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

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

The XML for landscape orientation

<?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="horizontal" >

<Button

android:id="@+id/calculateTipButton"

android:layout_width="match_parent"

android:layout_height="wra p_content"

android:layout_weight="1"

android:text="@string/calculate_tip" />

<Button

android:id="@+id/settingsButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layou t_weight="1"

android:text="@string/settings" />

</LinearLayout>

The XML for landscape orientation

<?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="horizontal" >

<Button

android:id="@+id/calculateTipButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="@string/calculate_tip" />

<Button

android:id="@+id/settingsButton"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="@string/settings" />

</LinearLayout>

Two text views and two editable text views

Two text views and two editable text views

The XML for an editable text view for an email

address

<EditText

android:id="@+id/emailEditText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ems="10"

android:inputType="textEmailAddress">

<requestFocus />

</EditText>

The XML for a n editable text view for a

password

<EditText

android:id="@+id/passwordEditText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ems="10"

android:inputType="textPassword" />

The XML for an editable text view for an email address

<EditText

android:id="@+id/emailEditText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ems="10"

android:inputType="textEmailAddress">

<requestFocus />

</EditText>

The XML for an editable text view for a password

<EditText

android:id="@+id/passwordEditText"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ems="10"

android:inputType="textPassword" />

Two attributes of an EditText widget

inputType

lines

Two attributes of an EditText widget

inputType

lines

Some common values for the inputType attribute

text

textPersonName

textEmailAddress

textPassword

textMultiline

number

numberDecimal

phone

date

time

Some common values for the inputType attribute

text

textPersonName

textEmailAddress

textPassword

textMultiline

number

numberDecimal

phone

date

time

The soft keyboard for an editable text view for

an email address

The soft keyboard for an editable text view for an email address

Some common values

for the windowSoftInputMode attribute

stateHidden

stateVisible

stateUnchanged

The activity element in the Android manifest

<activity

android:name=".TipCalculatorActivity"

android:label="@string/title_activity_tip_calculator"

android:windowSoftInputMode="stateUnchanged" >

Some common values for the windowSoftInputMode attribute

stateHidden

stateVisible

stateUnchanged

The activity element in the Android manifest

<activity

android:name=".TipCalculatorActivity"

android:label="@string/title_activity_tip_calculator"

android:windowSoftInputMode="stateUnchanged" >

A check box

A common XML attribute for check boxes

checked

The XML code

<CheckBox

android:id="@+id/rememberPercentCheckBox"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:checked="true"

android:text="@string/remember_percent" />

A check box

A common XML attribute for check boxes

checked

The XML code

<CheckBox

android:id="@+id/rememberPercentCheckBox"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:checked="true"

android:text="@string/remember_percent" />

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

}

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

}

Three radio buttons in a radio group with

vertical orientation

horizontal orientation

Three radio buttons in a radio group with

vertical orientation

horizontal orientation

The XML code for three radio buttons

<RadioGroup

android:id="@+id/roundingRadioGroup"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical" >

<RadioButton

android:id="@+id/noRoundingRadioButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:checked="true"

android:text="@string/round_n o" />

<RadioButton

android:id="@+id/roundTipRadioButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/round_tip" />

The XML code for three radio buttons

<RadioGroup

android:id="@+id/roundingRadioGroup"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical" >

<RadioButton

android:id="@+id/noRoundingRadioButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:checked="true"

android:text="@string/round_no" />

<RadioButton

android:id="@+id/roundTipRadioButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/round_tip" />

The XML code for three radio buttons

(continued)

<RadioButton

android:id="@+id/roundTotalRadioButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/round_total" />

</RadioGroup>

The XML code for three radio buttons (continued)

<RadioButton

android:id="@+id/roundTotalRadioButton"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/round_total" />

</RadioGroup>

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

}

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

}

A spinner

A spinner

The XML code

<Spinner

android:id="@+id/splitSpinner"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

The array in the strings.xml file

<string-array name="split_array">

<item>Split the bill? - No</item>

<item>Split the bill? - 2 ways</item>

<item>Split the bill? - 3 ways</item>

<item>Split the bill? - 4 ways</item>

</string-array>

The XML code

<Spinner

android:id="@+id/splitSpinner"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

The array in the strings.xml file

<string-array name="split_array">

<item>Split the bill? - No</item>

<item>Split the bill? - 2 ways</item>

<item>Split the bill? - 3 ways</item>

<item>Split the bill? - 4 ways</item>

</string-array>

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

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

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<CharSequence> 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);

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<CharSequence> 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);

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();

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();

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

<SeekBar

android:id="@+id/percentSeekBar"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:max="30"

android:progress="15" />

<TextView

android:id="@+id/percentTextView"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="@string/percent" />

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

<SeekBar

android:id="@+id/percentSeekBar"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:max="30"

android:progress="15" />

<TextView

android:id="@+id/percentTextView"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:text="@string/percent" />

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();

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();

An image

An image

Types of images supported by Android

 PNG (recommended)

 JPG (acceptable)

 GIF (discouraged)

Types of images supported by Android

PNG (recommended)

JPG (acceptable)

GIF (discouraged)

The location of the image file

res/drawable-mdpi/restaurant.jpg

Four qualifiers for the drawable folder

Qualifier Description

xhdpi Extra high-density screen (approximately 320dpi).

hdpi High-density screen (approximately 240dpi).

mdpi Medium-density screen (approximately 160dpi).

ldpi Low-density screen (approximately 120dpi).

The location of the image file

res/drawable-mdpi/restaurant.jpg

Four qualifiers for the drawable folder

Qualifier Description

xhdpi Extra high-density screen (approximately 320dpi).

hdpi High-density screen (approximately 240dpi).

mdpi Medium-density screen (approximately 160dpi).

ldpi Low-density screen (approximately 120dpi).

Two attributes of an ImageView widget

contentDescription

src

The XML code

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/photo"

android:src="@drawable/restaurant" />

Two attributes of an ImageView widget

contentDescription

src

The XML code

<ImageView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/photo"

android:src="@drawable/restaurant" />

A layout with three rows

The same layout with one row hidden

A layout with three rows

The same layout with one row hidden

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 / sp lit;

perPersonLabel.setVisibility(View.VISIBLE);

perPersonTextView.setVisibility(View.VISIBLE);

}

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);

}

A scrollable layout

A scrollable layout

The XML for vertical scroll bars

<ScrollView xmlns:android=

"http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height=" wrap_content">

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="10dp" >

<!-- All table rows and widgets go here -->

</TableLayout>

</ScrollView>

The XML for vertical scroll bars

<ScrollView xmlns:android=

"http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="10dp" >

<!-- All table rows and widgets go here -->

</TableLayout>

</ScrollView>

Types of scroll bars

Widget name Scroll bar type

ScrollView Vertical

HorizontalScrollView Horizontal

Types of scroll bars

Widget name Scroll bar type

ScrollView Vertical

HorizontalScrollView Horizontal

11/18/15 9:40 AM Chapter 5 slides Slide 1

The Android manifest

An element that must be added just before the application

element

<uses-permission android:name="android.permission.INTERNET" />

An attribute that you often want to add to the activity

element

<activity

android:name="com.murach.books.MainActivity"

android:label="@string/title_activity_main"

android:configChanges="keyboardHidden|

orientation|screenSize" >

The Android manifest

An element that must be added just before the application element

<uses-permission android:name="android.permission.INTERNET" />

An attribute that you often want to add to the activity element

<activity

android:name="com.murach.books.MainActivity"

android:label="@string/title_activity_main"

android:configChanges="keyboardHidden|

orientation|screenSize">

The layout of the activity

<FrameLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.murach.books.MainActivity">

<WebView

android:layout_width="match_parent"

android:layout_height="match_parent"

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

<ProgressBar

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/progressBar"

android:layout_gravity="center" />

</FrameLayout>

The layout of the activity

<FrameLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.murach.books.MainActivity">

<WebView

android:layout_width="match_parent"

android:layout_height="match_parent"

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

<ProgressBar

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/progressBar"

android:layout_gravity="center" />

</FrameLayout>

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;

}

});

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;

}

});

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/");

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/");