Usually when I’m working out in the gym I like to listen to my favourite podcasts. You get a ton of useful information and those boring breaks become more entertaining. You can even say I’m working out my brain while my body rests before the next set.
I noticed that counting my sets takes away my attention from the conversation I was listening, at times I even forget what set I just done. Since I have my android phone with me at all times I though why don’t I build a simple counter app that helps me count my sets.
I had a look around at the Google Play app store for counter, surley there is no shortage of counter apps. I downloaded one that was simple and it does what it suppose to do. The only problem with it was I also wanted the app to show me my resting time. Thats when I thought to myself, hey I’m a developer why don’t a build one.
So heres my journey building an android app with a clock and also how I went around publishing the app to the Google Play app store.
Assets
For this app to work I will be creating these elements:
- Button +
- Button –
- Label (to display count of sets)
- Clock (to display the time)
To the lab
Ok , lets begin building our app! For this I will need to download new Android Studio from android’s official website. You may also use Eclipse with an android extension, but I will be using Android Studio.
I’m using Apple Mac therefore I’m gonna download mac version of the app. During the installation you might get an error about the Java and Java SDK not being installed. Follow the prompts and install the necessary software.
Once you have instilled all the tools, launch the Android Studio on you machine.
When you see a welcome screen click on a Start a new Android Studio Project.
The next screen is self explanatory, this is where we configure our app.
‘Application name’ can be anything you like so is the ‘Company Domain’.
On the next step lets configure compatibility of our app with android devices. Select your preferred SDK for the devices you are targeting and press ‘next’ to continue.
We are getting closer, lets select an empty canvas to begin with.
On the next screen we are asked to configure our canvas, lets give it a name.
Finally click finish.
Creating Emulator
Configuring software emulator
Once android studio is up and running lets configure our emulator so we can test run our app.
There are two ways that you setup this. Using software emulator or hardware (aka your phone). We are going to do both. Software emulator is what you will be working with most of the time. The hardware emulator comes into play once we are ready to publish our app to the google play store.
Find and click the ‘Play’ button on the toolbar.
Once pressed, you should see a screen like the one shown below.
As you can see we don’t have any emulators detected. So lets go ahead and create one. Click on the ‘Create New Emulator’ button to begin the process which will launch a screen shown below.
Select a device that you wish to use to preview your app and click ‘Next’. On the following screen you will need to select and download the API version compatible with the android operating system installed on your device or devices that you targeting. I’m going with ‘Marshmallow’ release as I keep my phone system up-to-date.
And heres the last step before your virtual device is fully configured.
Configuring hardware emulator
The process of setting up your phone as a test device begins with connecting your phone to the computer using a USB cable. Once connected first thing first lets enable Developer tools on your phone. On Android 4.2 and newer, Developer tools is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options. Easy peasy.
Test run
Lets test our emulator to see if everything has been configured correctly. Once confirmed we may continue to build our app. Press the play on the toolbar to see available emulators. You should see something like this.
Theres a chance you might encounter this error:
Failed to load the LayoutLib: com/android/layoutlib/bridge/Bridge: Unsupported major.minor version 52.0
To fix it, change Android rendering version from N with older one and the problem will disappear.
Creating UI (User Interface)
Believe it or not this is the easy part.
To create UI in Android Studio is extremly simple, to begin find and double-click on activity_main.xml file. File is located under app>res>layout.
Next drag and drop text clock, text view and two buttons onto the emulator. Below is the screenshot of how I arranged my buttons and other elements.
On the right theres a sidebar with properties for elements you have just added. First lets increase the font size, so we can see the digits on the clock. Find a property ‘textSize’ and set it to whatever you want, I’m gonna set mine to 100dp. Next arrange buttons on screen the way you like it.
It’s time assign some events to our buttons. Both buttons simply gonna take the value of our text field and depending where we are calling the add or minus function we gonna manipulate the number and set it back to the text field.
Our code goes in the file called ‘MainActivity.java’ and you can find it under ‘app>java>co.apps.digital.gymapp>MainActivity’.
This is what the code looks like.
package co.apps.digital.gymapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView)findViewById(R.id.textView);
Button buttonAdd = (Button)findViewById(R.id.button);
buttonAdd.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
int count;
count = Integer.parseInt(textView.getText().toString());
count ++;
textView.setText(String.valueOf(count));
}
});
Button buttonSub = (Button)findViewById(R.id.button2);
buttonSub.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
int count;
count = Integer.parseInt(textView.getText().toString());
count –;
textView.setText(String.valueOf(count));
}
});
}
}
Once you are happy with the way things are arranged on your screen, lets press ‘play’ on the toolbar and see how things look on emulator and our phone. If everything works its time to publish our app to the Google Play app store!
Publishing your App
In order to publish our app, firstly, we need to register as a developer. It costs $25 to create an account.
Follow this link to register https://play.google.com/apps/publish/signup/
Once the registration process has been completed it’s time to publish our app! Click on ‘ Publish an Android App on Google Play‘ to begin the process.
