Day 16: My Simple Android App Code

In this post you will get to know a example simple Android application I created for the needs of the Android development course I am completing. 




As you may or may now know, I am planning on completing all of the Android app development courses available at Udacity and I am currently finishing the first one (you can learn more about my Android app development resources in this post). There are now 20 Android app development courses out there, so I’m sure it might take a while to complete all of them. The course I am now completing is divided into more theoretical lessons and purely practical parts.

For the last few days I have been occupied with the last practice set for the course and created a working app from scratch. In this post I will tell you more about the app and show you its code. What I like the most about my new app is that I had to think of most of its code myself (the instructor in the course didn’t simply tell me step by step what to do). Let’s go through this once again.

About My Simple Android App

My app Court Counter is a simple basketball scoring app whose purpose is to keep track of the score of a basketball game.

If you are familiar with this type of a game (I wasn’t really aware of how scores are counted in this game before creating this app), you know that at one time you can get one, two or three points (depending on how you make the basket). That’s basically all you need to know to understand the logic behind the app.

This app lets you to keep track of the score for two teams (Team A and Team B) simultaneously.  Once the game is over you can compare the scores and reset them.

Simple Android App Code

It may turn out to be a very useful app if, for example, you are playing basketball with your friends and someone from your “audience” (another friend probably) wants to  monitor the game.

What My Simple Android App Does Exactly

Before I move on to planning XML (e.g. what types of views I will use and how I will style them), I need to determine exactly what my app will do (the below points are a bit like pseudo code for the app). Here is what the Court Counter app exactly does:

  1. It lets you keep the track of the scores of two teams: Team A and Team B.
  2. It displays the current score below each team name.
  3. The user can update the score of each team by either 1, 2 or 3 points.
  4. Each team has its three buttons for, respectively, increasing its score by 1, 2 or 3 points.
  5. Once the button is clicked, 1, 2 or 3 is added to the current score of the team.
  6. Once the game is over, the user can reset the scores of both teams with the RESET button.

My Simple Android App

Planning My App

Normally, in the planning stage of the app I would also draw its outline like I did in my post about my Android app development workflow. However, as building this app was part of the course, the course instructor showed me how the app should look in the very beginning of this practice set.

That’s why in the planning stage I had to think of how I would style XML (activity_main.xml) the and what I will have to add to the  MainActivity.java file so that the app also works.

Planning XML

The Udacity course put a lot of emphasis on XML and how to correctly format it when developing apps so this task was really easy. After seeing how the app should look finally (this was shown at the beginning of this practice set in the course), I instantly knew what I would need:

  • Three Buttons for Team A. The buttons will have to display three different texts like: +3 POINTS, +2 POINTS and FREE THROW.
  • Three Buttons for Team B. The buttons will have to display three different texts like: +3 POINTS, +2 POINTS and FREE THROW.
  • One RESET Button. 
  • Two TextViews on the left part of the app on the screen (for Team A): one displaying the name of the team and the other its current score.
  • Two TextViews on the right part of the app on the screen (for Team B). one displaying the name of the team and the other its current score.
  • A total of  seven Buttons.
  • A total of four TextViews.
  • No ImageViews. 
  • I would have to make use of nested ViewGroups to place the views inside other views to get the desired layout.
  • I will need to use both LinearLayout and RelativeLayout.
  • I will have to adjust font size of TextViews.
  • I will have to change the default style of buttons and the top bar of the app (so that it’s pink without changing the background color anywhere in the activity_main.xml file).
  • I will have adjust attributes, such as, padding or margin of most of these views so that they are where they are.

I have already written several posts of Android XML formatting (take a look to better understand the above terms if you aren’t familiar with them yet):

Planning Java

What you can see in the above screenshot of my app in Android Studio is just its XML. However, in order for the app to work some Java coding has to be used. My knowledge of Java is still very fresh but based on what I have already learned I know that for this app I will need:

  • Two variables (for Team A and Team B) with the global scope (i.e. defined at the beginning of file MainActivity.java, not within a given method). I named them: scoreTeamA and scoreTeamB
  • The initial values of these variable will have to be 0.
  • Two methods for displaying the current score for each team. I named these methods: displayForTeamA and displayForTeamB
  • Two methods for increasing the current score by one (one for each team). I named these methods: incrementByOne and increaseByOne
  • Two methods for increasing the current score by two (one for each team).  I named these methods: incrementByTwo and increaseByTwo
  • Two methods for increasing the current score by three (one for each team).  I named these methods: incrementByThree and increaseByThree
  • One methods for resetting the current score  of both teams (i.e. changing its value back to 0). The name of the method: resetAll

That is basically all I needed to plan to be able to create a working app. Take a look at its whole code below (I will soon set up Github but for now I will simply paste the code within the post).

Below are the few posts on Java I have already created:

My Simple Android App Code

If you want to copy and paste this code into a new app, remember to change the name of the app in file activity_main.xml “tools:context=”com.example.android.courtcounter.MainActivity” and in  “package com.example.android.courtcounter;” in MainActivity.java or otherwise the app won’t work. 

This is the content of file activity_main.xml which is responsible for the looks of the app.

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

<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:orientation="vertical"
    tools:context="com.example.android.courtcounter.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="Team A" />

            <TextView
                android:id="@+id/team_a_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="0"
                android:textSize="45dp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="incrementByThree"
                android:text="+3 points" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="incrementByTwo"
                android:text="+2 points" />

            <Button
                android:id="@+id/free_throw"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="incrementByOne"
                android:text="FREE THROW" />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginTop="20dp"
            />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="Team B" />

            <TextView
                android:id="@+id/team_b_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="0"
                android:textSize="45dp" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="increaseByThree"
                android:text="+3 points" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="increaseByTwo"
                android:text="+2 points" />

            <Button
                android:id="@+id/free_throw"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:onClick="increaseByOne"
                android:text="FREE THROW" />

        </LinearLayout>
    </LinearLayout>

    <Button
        android:id="@+id/reset_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="25dp"
        android:onClick="resetAll"
        android:text="RESET"
        />

</RelativeLayout>

This is the content of file MainActivity.java which acts as the engine of the app.

package com.example.android.courtcounter;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

 int scoreTeamA = 0;
 int scoreTeamB =0;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 }

 /**
 * Displays the given score for Team A.
 */
 public void displayForTeamA(int score) {
 TextView scoreView = (TextView) findViewById(R.id.team_a_score);
 scoreView.setText(String.valueOf(score));

 }

 /**Increment by three */
 public void incrementByThree(View view) {
 scoreTeamA = scoreTeamA + 3;
 displayForTeamA(scoreTeamA);
 }

 /**Increment by two */
 public void incrementByTwo(View view) {
 scoreTeamA = scoreTeamA + 2;
 displayForTeamA(scoreTeamA);
 }

 /**Increment by one */
 public void incrementByOne(View view) {
 scoreTeamA = scoreTeamA + 1;
 displayForTeamA(scoreTeamA);
 }

 /**
 * Displays the given score for Team B.
 */
 public void displayForTeamB(int score) {
 TextView scoreView = (TextView) findViewById(R.id.team_b_score);
 scoreView.setText(String.valueOf(score));

 }

 /**Increment by three */
 public void increaseByThree(View view) {
 scoreTeamB = scoreTeamB + 3;
 displayForTeamB(scoreTeamB);
 }

 /**Increment by two */
 public void increaseByTwo(View view) {
 scoreTeamB = scoreTeamB + 2;
 displayForTeamB(scoreTeamB);
 }

 /**Increment by one */
 public void increaseByOne(View view) {
 scoreTeamB = scoreTeamB + 1;
 displayForTeamB(scoreTeamB);
 }

 /**Reset */
 public void resetAll(View view) {
 scoreTeamA = 0;
 scoreTeamB = 0;
 displayForTeamA(scoreTeamA);
 displayForTeamB(scoreTeamB);
 }
}

Bonus: Changing The Default Color Of Buttons

You can also easily change the default color of buttons and the upper bar of your app by modifying file styles.xml (it’s in app > res > values). However, this will only work (be visible) in Android devices with API: 23 (Android 6.0), so to check if it works you need to use the emulator or a relatively new phone.

Below is the content of my file styles.xml where I set color pink (#E91E63).

<resources>

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 <!-- Customize your theme here. -->
 <item name="colorPrimary">#E91E63</item>
 <item name="android:colorButtonNormal">#E91E63</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
 </style>

</resources>

That’s it. That’s one of the most advanced apps I have created so far. Now it’s time to go running and come back to Android app development in the evening (when I will learn more about Object Oriented Programming which is the last topic of the course I am now taking.

Add Comment