Build Your First Android App: A Time Zone Converter

Project Setup

Let’s start by installing the latest version of Android Studio. When you’re done, create a new project:

  • Fill in the project name: Time Zone Converter
  • Add your company or personal domain in reverse order (com.dragosholban)
  • Select the location for you new project and click “Next”

In the next screen you will have to choose the device type and the minimum Android version for your application. Just select the phone & tablet form factor. For the minimum SDK,  I chose API 16: Android 4.1 (Jelly Bean) which, at the moment of writing, covers 99% of the active devices.

Click next, then select the Basic Activity option. This will come with a floating button that we need later in the project.

Click next once again, then, on this last screen leave the default options and click on “Finish”.

Android Studio will take some time to build you project, then you’ll be ready to run your first “Hello World” Android app.

[screenshot]

Add Some Widgets To Your App

It’s now time to start changing the starter boilerplate to match our needs. First remove the “Hello World” text by selecting it and pressing delete.

Now, from the Palette, drag a SeekBar into the center of the screen. From the sides of the SeekBar drag to the side of the screen to create left and right constraints of 8dp. Then change the widget’s layout_with to match_constraint.

Next drag a TextView just under the SeekBar, create the same left and right constraints, set the layout_width to match_constraint as above and the textAlignment to center.

Before going into the code, check that the above widgets have the default ids of seekBar and textView.

First Lines of Code

Open the MainActivity.java file and add to the end of the onCreate method the code to get a hold of the new widgets that you just added:

SeekBar seekBar = findViewById(R.id.seekBar);
TextView textView = findViewById(R.id.textView);

Now, having the seekBar and the textView in our code, we will add a listener to the seekBar that will execute some code each time it’s value will be changed by the user:

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
  @Override
  public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
    textView.setText(Integer.toString(seekBar.getProgress()));
  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {

  }

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {

  }
});

For this to work, you will need to go back and add the final keyword to the textView definition:

final TextView textView = findViewById(R.id.textView);

Now run the app again in the simulator or on your phone. If drag seek bar around you will that the text view shows you numbers from 0 to 100. These are the default limits set for the seek bar.

Add a New Activity

Let’s now add a new activity (screen) to our app. We will use this to choose the user’s time zone (or the source time zone) from which we will make the conversion.

From the File menu, choose New -> Activity -> Empty Activity. Name this TimeZoneActivity and click Finish. You’ll get a new TimeZoneActivity.java file and one activity_time_zone.xml layout file.