The most popular mobile operating systems on the earth are apple’s iOS and Google’s Android. How to write your first App and run on iOS and Android?

FinClip Android engineer explains how to build an App from scratch, which is especially helpful for new developers.

Android article

Following the same logic as iOS app development, Android app development requires the following 5 steps:

  1. Development tools installation and configuration
  2. Setting up the development environment
  3. In Android Studio, create your first project
  4. Complete simple Hello World code
  5. Compile the APK file and get the app running on the phone

0X00 Development tools installed and configured

The first step is to download Android Studio from the Official Android website (click on the portal to download the link), or download it in China if you don’t know how to surf the Internet scientifically.

But want to become a professional Android research and development, or learn to scientific Internet

Select your own model after agreeing to the agreement

Here you can download the installation package according to your computer model (the browser will automatically follow the recommended link of the model, for example, mine is the MacBook with Intel chip). After downloading, just double click and follow the prompts to complete the installation step by step.

0X01 Setting up the Development Environment

Unlike Xcode, we also need to configure the local development environment before we write the Android application.

First, install JDK 8

First, you need to install JDK 8, which is the official environment for developing Android apps. Click here to download it. (My link also works on Macs, so you need to switch if your computer is different.)

At the second arrow, you can switch between different operating systems

After the download is complete, double-click the downloaded JDK-8U311-Macosx-x64.dmg, click Accept the license agreement, and click Install in the new Installation Type window.

A window appears saying setup is trying to install new software. Enter your password to allow this operation.

So we need to enter the administrator password again, click “Install software” again. Wait until the confirmation window is displayed to complete the installation.

Step 2: Configure the JDK environment

In the first step, we simply copied the JDK1.8 files to the operating system. However, other applications need to know exactly where the JDK1.8 environment exists, so we also need to configure the system’s environment variables.

But first, we need to know where the JDK directory is installed. Follow the path below to find the JDK home directory, as shown in the picture below:

The JDK installation directory/Library/Java/JavaVirtualMachines

The real directory that is to say, the JDK here/Library/Java/JavaVirtualMachines/jdk1.8.0 _111. JDK/Contents/Home,

Now that we know where the JDK is installed, let’s open the terminal (hold command and space on the keyboard, type terminal.app in the following popup and hit Enter) and start the configuration:

vi ~/.zshrc or vi ~/.bash_profile
Copy the code

Add this line at the end of the file:

Export JAVA_HOME = / Library/Java/JavaVirtualMachines jdk1.8.0 _111. JDK/Contents/HomeCopy the code

Then update the environment configuration with the source command

source ~/.zshrc or source ~/.bash_profile
Copy the code

Once configured, we can verify that the Java environment is configured correctly, still typing in the terminal

java -version
Copy the code

If the version number is correctly displayed, the configuration is successful

0X02 In Android Studio, create the first project

The first time you open Android Studio, you need to download the Android SDK and Gradle toolkits, so the first time you open Android Studio may be slow (reasonable Science will be faster). Start creating your first project.

Step 1: Create a new project

Click New Project on the screen

Select the Empty template Empty Activity in the middle

Enter project information here

After that, click Finish to complete the project creation.

0X03 Complete simple Hello World code

Let’s start with the project file structure of an Android app:

The Android page is composed of activities. The page is mainly divided into UI layout and logical processing. The UI layout is handled by the activity_main.xml file in the blue main directory in the figure above. The logical part is handled by the MainActivity file in com.myName.myApplication.

So we also need to modify the UI layout with the logic 2 files, first edit activity_main.xml:

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://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"> <Button Android :id="@+id/button" Android :layout_width="wrap_content" Android :layout_height="wrap_content" android:textAllCaps="false" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>Copy the code

Then edit MainActivity:

package com.myname.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        this.findViewById<Button>(R.id.button).setOnClickListener {
            Toast.makeText(MainActivity@this,"hello world",Toast.LENGTH_LONG).show()
        }
    }
}
Copy the code

Find the button object (findViewById(R.id.button)) and add a setOnClickListener to the button. When the button is triggered by the user, I’m going to call back to that method. Once the anonymous method is triggered, a string of hello World text is displayed via Toast.

0X04 Compile the APK file and get the application running on the phone

Step 1: Open developer mode on your Android phone and open USB debug in the Developer option

Make sure you turn on the back switch

The second step is to connect your computer to your phone through a cable

Android Studio automatically recognizes your phone model, and the launch button changes to a green, clickable pattern

Let’s select the APK file and click the green play button

Android Studio will compile and package the entire project, install the App on your phone, start the App and complete the process.

These processes are automated and the developer does not need to intervene. Compile packaging will be in after the completion of * * / MyApplication/app/build/outputs/apk/debug directory in the app – debug. The apk, it is also can be installed in the android mobile application installer.

Step 3, you are done, and you will see that the App has been opened successfully!

Clicking on the button will bring up the toast message below

If you follow this tutorial correctly, you have successfully created your first iOS and Android app. This tutorial is based on a MAC, but if you have a Windows or other operating system, you need to make some flexible configurations.