Create a New Project

You'll need an Android Studio project to design, develop, and build your app.
So launch Android Studio and click on the Start new Android Studio project
button.

On the next screen, choose Add No Activity because we don't want to use any
of the templates offered by Android Studio. Then press Next to proceed.

You'll now see a form where you can enter important details about your app,
such as its name and package name. The name is, of course, the name your
users will see on their phones when they install your app.

The package name, on the other hand, is a unique identifier for your app on
Google Play. You must follow the Java package naming conventions while
specifying it. For example, if your app's name is MyFirstApp and you work for
an organization whose website address is example.com, the package name
would ideally be "com.example.myfirstapp".

Next, you must decide the programming language you want to use while
coding the app. For now, select Java and press Finish.

Android Studio will now take a minute or two to generate and configure the
project.

2. Create an Activity
An activity is one of the most important components of an Android app. It is
what allows you to create and display a user interface to your users. An app
can have one or more activities, each allowing the user to perform an action.
For example, an email client app can have three activities: one for the user to
sign up, one to sign in, and one to compose an email.
To keep this tutorial simple, we'll be creating an app with just one activity. To
create the activity, in the Project panel of Android Studio, right-click on app
and select New > Activity > Empty Activity.

In the dialog that pops up, type in MainActivity as the name of the activity,
check the Launcher Activity option, and press Finish.

Checking the Launcher Activity option is important because it is what allows

your users to open the activity using an Android launcher. As such, a launcher
activity serves as an entry point to your app.

3. Create a Layout
Each activity usually has at least one layout associated with it. When you
created your activity in the previous step, you also generated an empty layout
for it. To take a look at it, open the activity_main.xml file.

An activity's layout primarily consists of views and view groups. A view,

sometimes referred to as a widget, is an individual component of your user
interface. Buttons, text fields, labels, and progress bars are common
examples of views. A view group is a component that can serve as a container
for views. Usually, view groups also help you position and set the dimensions
of your views.

ConstraintLayout is one of the most powerful and flexible view groups

available today. By default, it is the root node of your activity's layout XML file.
It looks like this:

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

02 <androidx.constraintlayout.widget.ConstraintLayout

03 xmlns:android="https://schemas.android.com/apk/res/android"

04 xmlns:app="http://schemas.android.com/apk/res-auto"

05 xmlns:tools="http://schemas.android.com/tools"

06 android:layout_width="match_parent"

07 android:layout_height="match_parent"

08 tools:context=".MainActivity">

09

10 <!-- More code here -->

11

12 </androidx.constraintlayout.widget.ConstraintLayout>
We'll be creating a simple clock app in this tutorial. In addition to the local
time, it will be able to show the current time in two different countries: India
and Germany.

To allow the user to choose the country they're interested in, our layout will
have two Button views, one for Germany, and one for India. And to actually
show the time, our layout will have a TextClock view.

Accordingly, add the following code inside the ConstraintLayout:

01 <TextClock

02 android:id="@+id/my_clock"

03 android:layout_width="wrap_content"

04 android:layout_height="wrap_content"

05 app:layout_constraintBottom_toBottomOf="parent"

06 app:layout_constraintTop_toTopOf="parent"

07 app:layout_constraintLeft_toLeftOf="parent"

08 app:layout_constraintRight_toRightOf="parent"

09 android:format12Hour="h:mm:ss a"

10 android:textSize="32sp"/>

11

12 <Button

13 android:layout_width="match_parent"

14 android:layout_height="wrap_content"

15 app:layout_constraintBottom_toBottomOf="parent"
16 android:text="Time in Germany"

17 android:onClick="onClickGermany"

18 android:id="@+id/germany_button"/>

19

20 <Button

21 android:layout_width="match_parent"

22 android:layout_height="wrap_content"

23 app:layout_constraintBottom_toTopOf="@id/germany_button"

24 android:text="Time in India"

25 android:onClick="onClickIndia"

26 android:id="@+id/india_button"/>
Note that each view must have the layout_width and layout_height properties.
They decide how large the view is. Other properties such as
layout_constraintBottom_toBottomOf and layout_constraintLeft_toLeftOf are
necessary to position the view. With the above code, the TextClock view will be
placed at the center of the screen, and both the Button views towards the
bottom of the screen.

By default, the TextClock view only shows the hours and minutes. The
format12Hour property, however, allows you to change that. In the above code,
its value is set to h:mm:ss a. This tells the TextClock view that it should display
the hours, minutes, seconds, and also an AM/PM suffix.

Also note that each Button view has an onClick property. This property is used
to assign click event handlers to the buttons.

The handlers don't exist yet, but you can ask Android Studio to generate them
for you. To do so, hover over the name of the handler until you see a red light
bulb appear beside it. Then click on the light bulb and select the second
option, the one with the yellow light bulb.

At this point, you can try pressing Shift-F10 to run the app. If there are no
errors in your XML code, you should see something like this on your phone or
emulator:
Although the buttons don't work yet, the TextClock view should show the local
time, updating itself every second.

4. Implement Event Handlers

When you generated event handlers for the two buttons, Android Studio added
two methods to your activity's Java file, MainActivity.java. If you open it, you
should find the following code in it:

1 public void onClickGermany(View view) {

3 }

4
public void onClickIndia(View view) {
5

6 }

7
Inside the event handlers, all we need to do is change the time zone of the
TextClock view. But how do you reference a view that's in your layout XML file
from inside your Java file? Well, you just use the findViewById() method.

Once you have a reference to the TextClock view, you can call its setTimeZone()
method to change its time zone. So add the following code inside the
onClickGermany() method:

1 TextClock clock = findViewById(R.id.my_clock);

2 clock.setTimeZone("Europe/Berlin");
Similarly, add the following code inside the onClickIndia() method:

1 TextClock clock = findViewById(R.id.my_clock);

2 clock.setTimeZone("Asia/Kolkata");

If you're wondering what R is, it's an auto-generated class that contains,

among other things, the IDs of all the views you have in your layouts. The
findViewById() method expects you to use this class while passing an ID to it.

At this point, you can press Shift-F10 again to re-run the app. You should now
be able to click on the buttons to change the clock's time zone.

Conclusion
You just created your first fully functional, native app for Android! I encourage
you to make a few changes to it. For instance, you could try using other time
formats or time zones. You could also try changing the positions of the
buttons and the clock view.