Task 8: Implement the second fragment

Congrats on reaching this point of the tutorial! Now we will implement the Random button and its functionality, so that it displays a number between 0 and the current count on a second screen:

The screen for the new fragment will have a heading and the aforementioned random number. In the design view your screen should look like this:

The %d is basically a placeholder for a number (d for decimal). The R is another placeholder.

Step 1: Add a TextView for the random number

• Open fragment_second.xml (app > res > layout > fragment_second.xml). Make sure you’re in the design view. Notice it has a ConstraintLayout that contains a TextView and a Button
• Remove the chain constraints between the TextView and the Button
• Add another TextView from the palette and drop it near the middle of the screen. This TextView will be used to display a random number between 0 and the current count from the first Fragment.
• Set the id to @+id/textview_random (textview_random in the Attributes panel).

• Constrain the top edge of the new TextView to the bottom of the first TextView, the left edge to the left of the screen, and the right edge to the right of the screen, and the bottom to the top of the Previous button.
• Set both width and height to wrap_content

• Set the textColor to @android:color/white, set the textSize to 72sp, and the textStyle to bold.
• Also set the text to “R”. This is just the placeholder until the actual number is generated.
• Finally, set the layout_constraintVertical_bias to 0.45

This TextView is constrained on all edges, so it's better to use a vertical bias than margins to adjust the vertical position, to help the layout look good on different screen sizes and orientations. 10. If you get a warning "Not Horizontally Constrained," add a constraint from the start of the button to the left side of the screen and the end of the button to the right side of the screen.

Here is the XML code for the TextView that displays the random number:

Step 2: Update the TextView to display the header

• In fragment_second.xml, select textview_second, which currently has the text "Hello second fragment. Arg: %1$s" in the hello_second_fragment string resource.
• If android: isn’t set, set it to the hello_second_fragment string resource

• Change the id to textview_header in the Attributes panel.
• Set the width to match_constraint, but set the height to wrap_content, so the height will change as needed to match the height of the content.
• Set top, left and right margins to 24dp. Left and right margins may also be referred to as "start" and "end" to support localization for right to left languages.
• Remove any bottom constraint.
• Set the text color to @color/colorPrimaryDark and the text size to 24sp.
• In strings.xml, change hello_second_fragment to "Here is a random number between 0 and %d."

Here is the XML code for the TextView that displays the heading:

Step 3: Change the background color of the layout

Give your new activity a different background color than the first activity:

• In colors.xml add a new color resource:

• In the layout for the second activity, fragment_second.xml, set the background of the NestedScrollView to the new color.

In the Attributes panel:

Good job! Our app now has a completed layout for the second fragment. But if you run your app and press the Random button, it may crash or not work. The click handler that Android Studio set up for that button needs some changes. In the next task, you will explore and fix this error.

Step 4: Examine the navigation graph

When you created your project, you chose Basic Activity as the template for the new project. When Android Studio uses the Basic Activity template for a new project, it sets up two fragments, and a navigation graph to connect the two. It also set up a button to send a string argument from the first fragment to the second. This is the button you changed into the Random button. And now you want to send a number instead of a string.

• Open nav_graph.xml (app > res > navigation > nav_graph.xml)

A screen similar to the Layout Editor in Design view appears. It shows the two fragments with some arrows between them. You can zoom with + and - buttons in the lower right, as you did with the Layout Editor.

• You can freely move the elements in the navigation editor. For example, if the fragments appear with SecondFragment to the left, drag FirstFragment to the left of SecondFragment so they appear in the order you work with them.

Step 5: Enable SafeArgs

SafeArgs is required to make the project work! To enable it we do the following:

• Check your project files on the bottom left. There is a tab written Gradle Scripts with a couple files. Open build.gradle.kts (Project: …). It should have the following code:

• Now open build.gradle.kts (Module :app). It should have the following code at the top:
  
  Keep the lines below untouched.
• After changing the Gradle settings, you have to sync them. Click Sync now on the top right hand side
  
  After a few moments, Android Studio should display a message saying that the sync was successful
• Now choose Build > Make Project on the top. This should rebuild everything so that Android Studio can find FirstFragmentDirections

Step 6: Create the argument for the navigation action

• In the navigation graph, click on FirstFragment, and look at the Attributes panel to the right. (If the panel isn't showing, click on the vertical Attributes label to the right.)
• In the Actions section, it shows what action will happen for navigation, namely going to SecondFragment
  
• Click on SecondFragment, and look at the Attributes panel. The Arguments section shows Nothing to show.
  
• Click on the + in the Arguments section.
• In the Add Argument dialog, enter myArg for the name and set the type to Integer, then click the Add button
  

Step 7: Send the count to the second fragment

The Next/Random button was set up by Android Studio to go from the first fragment to the second, but it doesn't send any information. In this step you'll change it to send a number for the current count. You will get the current count from the text view that displays it, and pass that to the second fragment.

• Open FirstFragment.java (app > java > com.example.myfirstapp > FirstFragment)
• Find the method onViewCreated() and notice the code that sets up the click listener to go from the first fragment to the second
• Replace the code in that click listener with a line to find the count text view, textview_first.
• Create an action with currentCount as the argument to actionFirstFragmentToSecondFragment()
• Add a line to find the nav controller and navigate with the action you created.

Here is the whole method with the updated code:


• Run your app. Click the Count button a few times. Now when you press the Random button, the second screen shows the correct string in the header, but still no count or random number, because you need to write some code to do that.

Step 8: Update SecondFragment to compute and display a random number

You have written the code to send the current count to the second fragment. The next step is to add code to SecondFragment.java to retrieve and use the current count.

• In the onViewCreated() method below the line that starts with super, add code to get the current count, get the string and format it with the count, and then set it for textview_header.
  
• Get a random number between 0 and the count.
  
• Add code to convert that number into a string and set it as the text for textview_random
  
• Run the app. Press the Count button a few times, then press the Random button. Does the app display a random number in the new activity?

Congratulations, you have built your first Android app!