Tag: full-stack

Creating a native Android app is more manageable now with all features and functionality made available by the Android Software Development Kit or SDK. If it is your first time trying to create an android app, and you don’t know how to write your first full-stack Android app, we are here to help.

This tutorial will show you how to write a simple android app while introducing you to essential Android-specific concepts such as event handlers, layouts, and activities.

How to get started 

One of the prerequisites of becoming an Android developer is familiarity with either Java or Kotlin. Both these programming languages are for Android development. Here are two resources to learn to program for Android:

Learn Java for Android Development: Introduction to Java

Learn Kotlin for Android

Both the courses are free and provide code-based learning, so you can quickly start.

The overall app layout can be designed with Wireframing software like Pencil, but as it is your first app, let’s keep it simple. You can sketch the app’s workflow in a notebook to get started quickly.

Planning the layout of the app you build is important because it decides where all the components will go. Here is a complete wireframe design of a native Android app:

It is an example of a to-do app screen. All the elements on the task screen are laid out. Next, you can create a mockup of the screen with all the design elements to decide what the app will look like. Here is a mockup of the above app:

You can use any industry software like Adobe XD to create mockups.

The following two steps are essential before you start with app development.

1. Install and set the latest version of Android Studio
2. A device or emulator running Android Marshmallow or higher

Here is a complete guide on setting up and creating your first project in Android Studio.

Front-end

The frontend components of an Android app are the elements displayed on the screen. An Android developer creates the frontend for an application by:

1. Creating an Activity
2. Creating a Layout

An activity is one of the most important components of Android app development. Creating action is the first step toward displaying a user interface to the app users. An Android app can have one or more activities. For instance, an email client app usually has three actions – first for users to sign up, second for signing in, and third for composing an email.

To create an Activity for your project:

• Open Project panel in Android Studio
• Right-click on your app
• Select New > Activity > Empty Activity

A dialog box will pop up like this:

Put the Activity name as MainActivity, and don’t forget to check the Launcher Activity and press Finish.

Launcher Activity allows users to open the activity using the Android launcher. 

Each app Activity has at least one layout associated with it. When you create an activity in the step above, the Android Studio auto-generated an open layout for it. For the above activity, a markup file called activity_main.xml will be created.

By default the content of the files will be like this:

<?xml version=”1.0″ encoding=”utf-8″?>

<androidx.constraintlayout.widget.ConstraintLayout

   xmlns:android=”https://schemas.android.com/apk/res/android“

   xmlns:app=”http://schemas.android.com/apk/res-auto“

   xmlns:tools=”http://schemas.android.com/tools“

   android:layout_width=”match_parent”

   android:layout_height=”match_parent”

   tools:context=”.MainActivity”>

    <!– More code here –>

   </androidx.constraintlayout.widget.ConstraintLayout>

Here you will add the elements you want to display on the app screen. Below is the code to display a simple clock app displaying time of India and Germany. The app will have two button layouts. Here is how the XML file code change when we add the layout elements:

<TextClock

   android:id=”@+id/my_clock”

   android:layout_width=”wrap_content”

   android:layout_height=”wrap_content”

   app:layout_constraintBottom_toBottomOf=”parent”

   app:layout_constraintTop_toTopOf=”parent”

   app:layout_constraintLeft_toLeftOf=”parent”

   app:layout_constraintRight_toRightOf=”parent”

   android:format12Hour=”h:mm:ss a”

   android:textSize=”32sp”/>

<Button

   android:layout_width=”match_parent”

   android:layout_height=”wrap_content”

   app:layout_constraintBottom_toBottomOf=”parent”

   android:text=”Time in Germany”

   android:onClick=”onClickGermany”

   android:id=”@+id/germany_button”/>

<Button

   android:layout_width=”match_parent”

   android:layout_height=”wrap_content”

   app:layout_constraintBottom_toTopOf=”@id/germany_button”

   android:text=”Time in India”

   android:onClick=”onClickIndia”

   android:id=”@+id/india_button”/>

 You can adjust the layout_width and layout_height properties of each view and set color and other design elements.

After making the necessary changes, press Shift-F10 to run the app. If your layout code does not have any errors, a screen like this will be displayed:

But still, the button clicks won’t be functional at this point.

Back-end

If you are a full-stack developer, you understand how the back-end differs from the front-end development. The Android App view above has the frontend elements, buttons, and clock displayed to the users. However, the functionality of the buttons, i.e., when users tap ‘Time In India’ or ‘Time in Germany’, is not operational.

In Android app development, the navigation between two layouts is handled by the backend process, usually Java.

We generate event handlers for the two buttons in Android Studio by generating a MainActivity.java file. In this file, the following code will be present:        

public void onClickGermany(View view) {   

}

public void onClickIndia(View view) {   

}

Here all we need to do is change the TextClock view time on the button tap. How do you reference a layout in an XML file from inside a Java file?

We use findViewById() method for this. Here’s how you associated the XML layout with the Java event handler:

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

clock.setTimeZone(“Europe/Berlin”);

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

clock.setTimeZone(“Asia/Kolkata”);

The R class here is autogenerated and contains all the views’ IDs. Press Shift-F10 again to re-run the app. Now button clicks must produce the desired results.

Publishing the app on Google Play Store 

Before publishing the app on the Play Store, ensure that it complies with all the Play Policies, Google has laid out.

You need to have a Google Play Developer Account (require a one-time $25 joining fee) to access the Google Play Console. From the Console, you can upload your Android app, which lets you upload your Android app as a .aab file (Android App Bundle).

Conclusion

Building your first full-stack Android app does not require you to have pro-Android developer experience. We hope this guide will help you start from scratch as you learn more proficient ways to create Android apps.

Talent500 is one of the largest talent acquisition platforms global startups and Fortune 500 companies use. Join our elite pool of talent and discover career redefining opportunities.