Week 4

4.1 Task 1: Add images to the layout

1.1 Start the new project

  1. Start a new Android Studio project with the app name Droid Cafe.
  2. Choose the Basic Activity template, and accept the default Activity name (MainActivity). Make sure the Generate Layout file and Backwards Compatibility (AppCompat) options are selected.
  3. Click Finish.
  4. Open content_main.xml and click the Design tab (if it is not already selected) to show the layout editor.
  5. Select the “Hello World” TextView in the layout and open the Attributes pane.
  6. Change the textintro attributes as follows:

7. Delete the constraint that stretches from the bottom of the textintro TextView to the bottom of the layout, so that the TextView snaps to the top of the layout, and choose 8 (8dp) for the top margin as shown below.

8. In a previous lesson you learned how to extract a string resource from a literal text string. Click the Text tab to switch to XML code, and extract the "Droid Desserts" string in the TextView and enter intro_text as the string resource name.

1.2 Add the images

  1. To copy the images to your project, first close the project.
  2. Copy the image files into your project’s drawable folder. Find the drawable folder in a project by using this path: project_name > app > src > main > res > drawable.

3. Reopen your project.

4. Open content_main.xml file, and click the Design tab (if it is not already selected).

5. Drag an ImageView to the layout, choose the donut_circle image for it, and constrain it to the top TextView and to the left side of the layout with a margin of 24 (24dp) for both constraints.

6. In the Attributes pane, enter the following values for the attributes:

7. Drag a second ImageView to the layout, choose the icecream_circle image for it, and constrain it to the bottom of the first ImageView and to the left side of the layout with a margin of 24 (24dp) for both constraints.

8. In the Attributes pane, enter the following values for the attributes:

9. Drag a third ImageView to the layout, choose the froyo_circle image for it, and constrain it to the bottom of the second ImageView and to the left side of the layout with a margin of 24 (24dp) for both constraints.

10. In the Attributes pane, enter the following values for the attributes:

11. Click the warning icon in the upper left corner of the layout editor to open the warning pane, which should display warnings about hardcoded text:

12. Expand each Hardcoded text warning, scroll to the bottom of the warning message, and click the Fix button as shown below

Fixed Code :android:contentDescription="@string/donuts"android:contentDescription="@string/ice_cream_sandwiches"android:contentDescription="@string/froyo"

1.3 Add the text descriptions

  1. Drag a TextView element to the layout.
  2. Constrain the element’s left side to the right side of the donut ImageView and its top to the top of the donut ImageView, both with a margin of 24 (24dp).

3. Constrain the element’s right side to the right side of the layout, and use the same margin of 24 (24dp). Enter donut_description for the ID field in the Attributes pane. The new TextView should appear next to the donut image as shown in the figure below.

4. In the Attributes pane change the width in the inspector pane to Match Constraints:

5. In the Attributes pane, begin entering the string resource for the text field by prefacing it with the @ symbol: @d. Click the string resource name (@string/donuts) which appears as a suggestion:

6. Repeat the steps above to add a second TextView that is constrained to the right side and top of the ice_cream ImageView, and its right side to the right side of the layout. Enter the following in the Attributes pane:

7. Repeat the steps above to add a third TextView that is constrained to the right side and top of the froyo ImageView, and its right side to the right side of the layout. Enter the following in the Attributes pane:

4.1 Task 2: Add onClick methods for images

2.1 Create a Toast method

  1. To use string resources in Java code, you should first add them to the strings.xml file. Expand res > values in the Project > Android pane, and open strings.xml. Add the following string resources for the strings to be shown in the Toast message:

2. Open MainActivity, and add the following displayToast() method to the end of MainActivity (before the closing bracket):

2.2 Create click handlers

  1. Add the following showDonutOrder() method to MainActivity. For this task, use the previously created displayToast() method to display a Toast message:

2. Add more methods to the end of MainActivity for each dessert:

3. (Optional) Choose Code > Reformat Code to reformat the code you added in MainActivity to conform to standards and make it easier to read.

2.3 Add the onClick attribute

  1. Open the content_main.xml file, and click the Text tab in the layout editor to show the XML code.
  2. Add the android:onClick attribute to donut ImageView. As you enter it, suggestions appear showing the click handlers. Select the showDonutOrder click handler. The code should now look as follows:
<ImageView
android:id="@+id/donut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:contentDescription="@string/donuts"
android:onClick="showDonutOrder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textintro"
app:srcCompat="@drawable/donut_circle"
/>

3. (Optional) Choose Code > Reformat Code to reformat the XML code you added in content_main.xml to conform to standards and make it easier to read. Android Studio automatically moves the android:onClick attribute up a few lines to combine them with the other attributes that have android: as the preface.

4. Follow the same procedure to add the android:onClick attribute to the ice_cream and froyo ImageView elements. Select the showDonutOrder and showFroyoOrder click handlers. You can optionally choose Code > Reformat Code to reformat the XML code. The code should now look as follows:

<ImageView
android:id="@+id/ice_cream"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:contentDescription="@string/ice_cream_sandwiches"
android:onClick="showIceCreamOrder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/donut"
app:srcCompat="@drawable/icecream_circle"
/>

<ImageView
android:id="@+id/froyo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:contentDescription="@string/froyo"
android:onClick="showFroyoOrder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/ice_cream"
app:srcCompat="@drawable/froyo_circle"
/>

5. Run the app.

4.1 Task 3: Change the floating action button

3.1 Add a new icon

  1. Expand res in the Project > Android pane, and right-click (or Control-click) the drawable folder.
  2. Choose New > Image Asset. The Configure Image Asset dialog appears.

3. Choose Action Bar and Tab Icons in the drop-down menu at the top of the dialog. (Note that the action bar is the same thing as the app bar.)

4. Change ic_action_name in the Name field to ic_shopping_cart.

5. Click the clip art image (the Android logo next to Clipart:) to select a clip art image as the icon. A page of icons appears. Click the icon you want to use for the floating action button, such as the shopping cart icon.

6. Choose HOLO_DARK from the Theme drop-down menu. This sets the icon to be white against a dark-colored (or black) background. Click Next.

7. Click Finish in the Confirm Icon Path dialog.

3.2 Add an Activity

  1. Right-click (or Control-click) the com.example.android.droidcafe folder in the left column and choose New > Activity > Empty Activity.

2. Edit the Activity Name to be OrderActivity, and the Layout Name to be activity_order. Leave the other options alone, and click Finish.

3.3 Change the action

  1. Open MainActivity.
  2. Change the onClick(View view) method to make an explicit intent to start OrderActivity:
  3. Run the app. Tap the floating action button that now uses the shopping cart icon. A blank Activity should appear (OrderActivity). Tap the Back button to go back to MainActivity.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store