Google’s Android Studio is a pretty awesome tool for building Android apps, but after building a times tables app in python and HTML, I’ll say doing an Android version was a bit more complicated. But with a little bit of knowledge about how the basics of Android Studio works along with some knowledge of Kotlin, you can have a basic app up and running in very little time. Today I’m building an app that is basically flash cards for times tables, with a couple different modes. I’ve split this up into two posts since there’s a fair amount of code.
When I wrote this, I was using Android Studio Arctic Fox | 2020.3.1 Patch 2.
The full code for this project is on my Github account:
https://github.com/jamesmcclay/android_kotlin_times_tables
Create a new project
We start by creating a new project, with an empty activity.
Give your project a name, and make sure to set the language as Kotlin. Click finish, and you have a brand new project!
Write the layout code
Android Studio takes you to the MainActivity.kt file off the bat, but we’re going to jump into the layout file and create the interface elements. At the top of the screen, you should see a tab that says activity_main.xml, that’s where we can create the first page elements of app.
Opening up activity_main.xml, you’ll need to click on “split” near the top right so you can see the code as well as a rending of it on a mock phone. There’s a bunch of code already in there but you can delete all that.
First I’m going to create a RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
If you just type “Re”, RelativeLayout will probably autopopulate and you can press enter to get it and a bunch of pre-written code for you. No need to type all that stuff.
Text items
Inside the RelativeLayout (between the opening and closing <RelativeLayout> tags), I’ll create some text. These will just be banners introducing the app and instructing the user to enter a table to practice. This can be done with the element TextView:
<TextView
android:id="@+id/textview_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="James McClay's\nTimes Tables!"
android:textAlignment="center"
android:textSize="32sp" />
<TextView
android:id="@+id/textview_select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textview_title"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:text="Practice all tables\n Or enter a table to practice:"
android:textAlignment="center"
android:textSize="24sp" />
I thought about commenting all these to explain what they’re doing, but it seems like they’re all pretty self-explanatory. It’s basically just putting some static text on the layout of the app, centering it, setting the font size, etc.
Next we’ll create a text entry field where the user can either leave it blank to practice all times tables or enter a specific one. This is done with the element EditText:
<EditText
android:id="@+id/edittext_timestable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textview_select"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:hint="All tables"
android:inputType="number"
android:textAlignment="center"
android:textSize="24sp" />
All elements have been given an "@+id", and using layout_below we can tell elements to go below another one.
Button and radio group
Next we’ll need a start button to send the user to the view that shows times tables questions. A button can be created with Button:
<Button
android:id="@+id/button_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/edittext_timestable"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="Start!" />
Finally, we’ll create a RadioGroup to hold two radio button buttons. I thought having a normal, sequential mode as well as a random mode would be beneficial. The RadioGroup means that only one RadioButton can be selected in the group. Also, RadioButtons have a special property called onClick, where you can specify what function to run when one of the buttons is clicked and selected.
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button_start"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
>
<RadioButton
android:id="@+id/radio_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onRadioButtonClicked"
android:text="Normal Mode"
/>
<RadioButton
android:id="@+id/radio_random"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onRadioButtonClicked"
android:text="Random Mode" />
</RadioGroup>
Remember, all of that stuff went in-between the RelativeLayout tags. Ok, now we’re ready for the Kotlin code.
onCreate function
You will probably need to add a snippet of code to your app’s build.gradle file so you can “bind” your Kotlin code to the layout file. Be careful – there are two of these files. You want the one that is inside “app” directory, not the one that’s in the root directory. In build.gradle, in the android block, paste this snippet and sync gradle:
buildFeatures {
viewBinding = true
}
Next let’s write our code in the onCreate function that’s given to us by Android Studio:
class MainActivity : AppCompatActivity() {
var mode: String = "normal" //represents what radio button user selected
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val binding = ActivityMainBinding.inflate(layoutInflater) //bind to layout file
setContentView(binding.root)
val button = binding.buttonStart //get the start button
button.setOnClickListener {
val theIntent = Intent(this, TableActivity::class.java)
var table = binding.edittextTimestable.text.toString() // get what table the user entered
if (table == "") {
table = "0" //if the user entered nothing, meaning all tables, set to 0 so toInt() won't fail.
}
theIntent.putExtra("mode", mode) // send mode to next screen
theIntent.putExtra("table", table) // send table to next screen
startActivity(theIntent)
}
}
}
I’ve created a global variable (I believe the Kotlin word is “property”) called mode to hold what radio button the user selected. The Intent stuff is just standard boilerplate code to send the user to the next screen. The next screen’s activity will be called TableActivity, which this bit Intent(this, TableActivity::class.java) has TableActivity in it.
You’ll notice we’ve attached mode and table to the intent so the next screen’s code can access it. You can see where table is retrieved and set, but you might be wondering how mode is set. We’ll do that next.
onRadioButtonClicked function
I took this code directly from the Android Studio documentation, and substituted my radio button id’s and mode property. We specified the onRadioButtonClicked function in the Radio Button XML code earlier.
fun onRadioButtonClicked(view: View) {
if (view is RadioButton) {
// Is the button now checked?
val checked = view.isChecked
// Check which radio button was clicked
when (view.getId()) {
R.id.radio_normal ->
if (checked) {
this.mode = "normal"
}
R.id.radio_random ->
if (checked) {
this.mode = "random"
}
}
}
}
This basically just runs some logic to see which button is clicked, and then set the value of mode.
Try it out!
The app looks pretty good so far!
On the next post – I’ll build the screen where the user can actually practice times tables. Happy coding!