Your First Kotlin Android App: An App From Scratch

Welcome to your first official code challenge in this course.

For this I want you to add and position a button with the text “Hit Me” written on it. Use what you learned about constraints from earlier episodes to position the button. Also make sure that it has a descriptive id and it uses a string resource.

And one other little extra challenge: Increase the size of the target text view so it stands out from other textviews. It should have a bigger text size so as to draw the player’s attention just like in the screenshot on the slide.

Now pause the video and give it a try on your own.

Not to worry if you get stuck. You can continue the video for the solution. Goodluck!!!

Alright, go ahead and drag in a button. Constrain the start and end of the button to its parent to center it horizontally on the screen. Then constrain its top to the bottom of the seekbar. And the bottom to its parent.

Next, give it a descriptive id of hitMeButton. After that, head over to strings.xml and create a new string resource for the button like so:

<string name="hit_me_button_text">HIT ME</string>

Then head back to the design layout. And select the picker beside the text attribute. This opens up the “Pick a Resource” dialog.

You can see the list of string resources we’ve declared in the strings.xml file. We can also see some other ones declared by other packages. Go ahead and select hit_me_button_text and click OK.

The button is now updated with the text “HIT ME”. You can go ahead and use a hard object to hit your computer screen at the location of the button to try out if it works.

Run your app. Cool!!! Our UI is now looking set. One final touch i’ll like to add would be to increase the size of the target value textview. If you figured out how to do that, Congrats!!!

If you didn’t just remember that the attributes panel gives you access to properties of selected views. First, select the target textview. Then open it up the attributes panel if its not open. Then search for textSize. Then select 24sp.

Notice that you use sp for text size instead of dp. You do this because you want the text to always scale based on the user’s device text size. So if the user increases the font size in android device settings, your text would change accordingly. Using dp would not scale the text.

Run your app once again to check it out. Cool!!! Everything displays correctly.