android Studio.>

How to start

your first Android app

How to start your first Android app

Applied

 Use Android Studio to create a new project for an app .

 Given a user interface that uses the widgets described in this

chapter, use Android Studio to develop the layout for the user

interface.

Knowledge

 List and describe the three types of widgets presented in this

chapter.

 Describe why the display text for a user interface is typically

stored in a separate file (the strings.xml file) instead of being

stored directly in the layout file.

 Describe how the strings.xml file defines the display text for an

app.

 List and describe three common properties of a widget.

Applied

Use Android Studio to create a new project for an app.

Given a user interface that uses the widgets described in this chapter, use Android Studio to develop the layout for the user interface.

Knowledge

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

Describe why the display text for a user interface is typically stored in a separate file (the strings.xml file) instead of being stored directly in the layout file.

Describe how the strings.xml file defines the display text for an app.

List and describe three common properties of a widget.

 List the two most common units of measurement for Android

widgets and describe at least one typical use for each unit of

measurement.

 Describe how XML defines the layout of the user interface for an

app.

List the two most common units of measurement for Android widgets and describe at least one typical use for each unit of measurement.

Describe how XML defines the layout of the user interface for an app.

1. Start Android Studio.

2. If the Welcome page is displayed, select the “Start a new Android

Studio project” item. Otherwise, select the File NewNew

Project item from the menu system.

3. Enter a name for the application, project, and package.

4. Select minimum SDK for your project.

5. Select the Empty Activity template.

6. Enter a name for the activity.

Start Android Studio.

If the Welcome page is displayed, select the “Start a new Android Studio project” item. Otherwise, select the FileNewNew Project item from the menu system.

Enter a name for the application, project, and package.

Select minimum SDK for your project.

Select the Empty Activity template.

Enter a name for the activity.

 To add a widget, drag the widget from the Palette onto the layout.

 To align a widget, you can drag it to where you want it to be

aligned. This sets properties of the widget that begin with

“layout:” such as the layout:alignTop and layout:alignLeft

properties.

 To delete a widget, click on the widget in the graphical editor or

the Component Tree window and press the Delete key.

To add a widget, drag the widget from the Palette onto the layout.

To align a widget, you can drag it to where you want it to be aligned. This sets properties of the widget that begin with “layout:” such as the layout:alignTop and layout:alignLeft properties.

To delete a widget, click on the widget in the graphical editor or the Component Tree window and press the Delete key.

1. In the graphical editor for the layout, select the widget.

2. In the Properties window, click the button (…) to the right of the

text property.

3. In the Resources dialog box, click the New Resource button and

select the New String Value item. Or, if the string value is

already available, select the string and click the OK button.

4. In the New String Value Resource dialog box, enter a name and

value for the string and click the OK button.

1. In the graphical editor for the layout, select the widget.

2. In the Properties window, click the button (…) to the right of the text property.

3. In the Resources dialog box, click the New Resource button and select the New String Value item. Or, if the string value is already available, select the string and click the OK button.

4. In the New String Value Resource dialog box, enter a name and value for the string and click the OK button.

<resources>

<string name="app_name">Tip Calculator</string>

<string name="action_settings">Settings</string>

<string name="bill_amount_label">Bill Amount</string>

<string name="bill_amount">34.60</string>

<string name="tip_percent_label">Percent</string>

<string name="tip_percent">15%</string>

<string name="increase">+</string>

<string name="decrease"> -</string>

<string name="tip_amount_label">Tip</string>

<string name="tip_amount">$ 0.00</string>

<string name="total_amount_label">Total</string>

<string name="total_amount">$0.00</string>

</resources>

<resources>

<string name="app_name">Tip Calculator</string>

<string name="action_settings">Settings</string>

<string name="bill_amount_label">Bill Amount</string>

<string name="bill_amount">34.60</string>

<string name="tip_percent_label">Percent</string>

<string name="tip_percent">15%</string>

<string name="increase">+</string>

<string name="decrease">-</string>

<string name="tip_amount_label">Tip</string>

<string name="tip_amount">$0.00</string>

<string name="total_amount_label">Total</string>

<string name="total_amount">$0.00</string>

</resources>

res/values-fr/strings.xml

The location of the strings.xml file

res/values/strings.xml

res/values-fr/strings.xml

The location of the strings.xml file

res/values/strings.xml

Property Example settings

width match_parent

height match_parent

paddingTop @dimen/activity_vertical_margin

paddingLeft @dimen/activity_horizontal_margin

Property Example settings

width match_parent

height match_parent

paddingTop @dimen/activity_vertical_margin

paddingLeft @dimen/activity_horizontal_margin

Property Example settings

id @+id/billAmountLabel

width wrap_content

height wrap_content

layout:alignParentLeft true

layout:alignParentStart true

layout:alignParentTop true

layout:padding 10dp

text @string/bill_amount_label

textSize 20sp

textStyle bold

layout:marginLeft 130dp

ems 8

inputType numberDecimal

Property Example settings

id @+id/billAmountLabel

width wrap_content

height wrap_content

layout:alignParentLeft true

layout:alignParentStart true

layout:alignParentTop true

layout:padding 10dp

text @string/bill_amount_label

textSize 20sp

textStyle bold

layout:marginLeft 130dp

ems 8

inputType numberDecimal

Value Description

wrap_content Wraps the height or width so it is large enough to

display the widget.

match_parent Stretches the height or width to match the parent

container.

Common units of measurement

Name Abbreviation Typical uses

Density-independent pixels dp or dip margins, padding, etc.

Scale-independent pixels sp font sizes

Value Description

wrap_content Wraps the height or width so it is large enough to display the widget.

match_parent Stretches the height or width to match the parent container.

Common units of measurement

Name Abbreviation Typical uses

Density-independent pixels dp or dip margins, padding, etc.

Scale-independent pixels sp font sizes

<RelativeLayout

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"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".TipCalculatorActivity">

<!-- The bill amount -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/bill_amount_label"

android:id="@+id/billAmountLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:paddingTop="10dp" />

<RelativeLayout

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"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".TipCalculatorActivity">

<!-- The bill amount -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/bill_amount_label"

android:id="@+id/billAmountLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:paddingTop="10dp" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:inputType="numberDecimal"

android:ems="8"

android:id="@+id/billAmountEditText"

android:text="@string/bill_amount"

android:textSize="20sp"

android:layout_alignTop="@+id/billAmountLabel"

android:layout_toRightOf="@+id/billAmountLabel"

android:layout_toEndOf="@+id/billAmountLabel"

android:layout_marginLeft="16dp" />

<EditText

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:inputType="numberDecimal"

android:ems="8"

android:id="@+id/billAmountEditText"

android:text="@string/bill_amount"

android:textSize="20sp"

android:layout_alignTop="@+id/billAmountLabel"

android:layout_toRightOf="@+id/billAmountLabel"

android:layout_toEndOf="@+id/billAmountLabel"

android:layout_marginLeft="16dp" />

<!-- The tip percent -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_percent_label"

android:id="@+id/percentLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_alignBottom="@+id/percentDownButton"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_percent"

android:id="@+id/percentTextView"

android:layout_alignTop="@+id/percentLabel"

android:layout_alignLeft="@+id/billAmountEditText"

android:layout_alignStart="@+id/billAmountEditText"

android:textSize="20sp" />

<!-- The tip percent -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_percent_label"

android:id="@+id/percentLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_alignBottom="@+id/percentDownButton"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_percent"

android:id="@+id/percentTextView"

android:layout_alignTop="@+id/percentLabel"

android:layout_alignLeft="@+id/billAmountEditText"

android:layout_alignStart="@+id/billAmountEditText"

android:textSize="20sp" />

<Button

android:layout_width="45dp"

android:layout_height="45dp"

android:text="@string/decrease"

android:id="@+id/percentDownButton"

android:layout_below="@+id/billAmountEditText"

android:layout_toLeftOf="@+id/percentUpButton"

android:layout_toStartOf="@+id/percentUpButton"

android:textSize="20sp" />

<Button

android:layout_width="45dp"

android:layout_height="45dp"

android:text="@s tring/increase"

android:id="@+id/percentUpButton"

android:layout_alignTop="@+id/percentDownButton"

android:layout_alignRight="@+id/billAmountEditText"

android:layout_alignEnd="@+id/billAmountEditText"

android:textSiz e="20sp" />

<Button

android:layout_width="45dp"

android:layout_height="45dp"

android:text="@string/decrease"

android:id="@+id/percentDownButton"

android:layout_below="@+id/billAmountEditText"

android:layout_toLeftOf="@+id/percentUpButton"

android:layout_toStartOf="@+id/percentUpButton"

android:textSize="20sp" />

<Button

android:layout_width="45dp"

android:layout_height="45dp"

android:text="@string/increase"

android:id="@+id/percentUpButton"

android:layout_alignTop="@+id/percentDownButton"

android:layout_alignRight="@+id/billAmountEditText"

android:layout_alignEnd="@+id/billAmountEditText"

android:textSize="20sp" />

<!-- The tip amount -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_amount_label"

android:id="@+id/tipLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_marginTop="23dp"

android:layout_below="@+id/percentDownButton"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_amount"

android:id="@+id/tipTextView"

android:layout_alignTop="@+id/tipLabel"

android:layout_alignLeft="@+id/percentTextVi ew"

android:layout_alignStart="@+id/percentTextView"

android:textSize="20sp" />

<!-- The tip amount -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_amount_label"

android:id="@+id/tipLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_marginTop="23dp"

android:layout_below="@+id/percentDownButton"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/tip_amount"

android:id="@+id/tipTextView"

android:layout_alignTop="@+id/tipLabel"

android:layout_alignLeft="@+id/percentTextView"

android:layout_alignStart="@+id/percentTextView"

android:textSize="20sp" />

<!-- The total amount -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/total_amount_label"

android:id="@+id/totalLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_below="@+id/tipLabel"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_marginTop="24dp" />

<TextView

android:layout_widt h="wrap_content"

android:layout_height="wrap_content"

android:text="@string/total_amount"

android:id="@+id/totalTextView"

android:textSize="20sp"

android:layout_alignTop="@+id/totalLabel"

android:layout_align Left="@+id/tipTextView"

android:layout_alignStart="@+id/tipTextView" />

</RelativeLayout>

<!-- The total amount -->

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/total_amount_label"

android:id="@+id/totalLabel"

android:textSize="20sp"

android:textStyle="bold"

android:layout_below="@+id/tipLabel"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_marginTop="24dp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/total_amount"

android:id="@+id/totalTextView"

android:textSize="20sp"

android:layout_alignTop="@+id/totalLabel"

android:layout_alignLeft="@+id/tipTextView"

android:layout_alignStart="@+id/tipTextView" />

</RelativeLayout>

11/23/15 11:51 AM Chapter 2 slides Slide 1