This is the first hands-on session of the first part of the Android Development (Getting Started) course, Layout and Interaction, directed by Lyla Fujiwara, on installing Android Studio and building your first Android App.
Install the Android Studio
After the first two lessons to see the emulations using XMLV, from now on, you can finally learn and practice Android with a real IDE: Android Studio.
Think of Android Studio as a Studio for developing Android apps, and the JDK as a toolbox. Therefore, you need to install the Java Development Kit (JDK) before installing Android Studio.
- Java is supported and maintained by OracleThe download pageSelect the corresponding package to download and install JDK, and then open Terminal and enter
java -versionVerify that the installation is successful. If yes, the following values are returned:
java version "9.0.1"
Java(TM) SE Runtime Environment (build 9.0.1+11)
Java HotSpot(TM) 64-Bit Server VM (build 9.0.1+11, mixed mode)
Copy the code- Android Studio is provided by Google. You can download and install Android Studio from the Android developer website.
Udacity provides an Android Studio installation troubleshooting manual for reference, and there are plenty of resources available online. Also, since I developed on a Mac, the following operations were done on a MacBook.
Make your first Android App
- Android Studio initial interface
Click on the first option “Start a new Android Studio Project “.
- New project configuration
(1) Application Name is displayed on the App bar, which is also the name displayed on the device after the App is installed; (2) Company Domain default if not available; By default, the application name and domain name are reversed to form the apK installation Package name, which can be changed. The installation Package name must be unique. (4) Project location The Project will be stored in the directory named as the application name, which can be modified.
- Select the App running device and the lowest SDK version
(1) Apps can be run on mobile phones and tablets, wearables, TVS, Android Auto and Android Things. Click “Help me Choose “to Help select the Minimum SDK version. For example, if YOU select API 15: Android 4.0.3 (IceCreamSandwich), all Android devices are supported, as shown in the following figure.
A lower version of the SDK or API supports more devices, but fewer features.
- Selecting project Templates
Android Studio provides a number of project templates that developers can build on. Select Empty Activity here.
- Name the project file
The project consists of many different types of files, such as image files, sound files, XML files, Java files, etc. You can change their names according to App requirements, and keep the default here. Click Finish.
- Wait until the status bar at the bottom is loaded and the project is created
It’s important to note that while Google is constantly working to improve the Android platform and add some great new features, which is great for developers, it can sometimes cause problems for education. More recently, Google introduced “Constrained Layout,” which contains a variety of different components that allow developers to quickly create adaptive UIs. However, in this course, you’ll use the simpler RelativeLayout and LinearLayout. Therefore, open the “app/SRC/main/res/layout/activity_main XML” will be the following code to replace the Android ConstraintLayout Studio automatically generated code.
<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.hsujin.helloworld.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
Copy the codeAndroid Studio’s interface looks complicated, but you don’t need to know all the buttons, just look them up when you use them. Here are three things to focus on:
- The Project TAB on the left shows the Project file tree. Double-click the file to open it in the middle.
- The file will be automatically saved, using CMD +shift+ Z and undo (CMD +shift+ Z).
- The Preview TAB on the right shows Preview effects in real time.
That’s it, the first Android App. From the Preview TAB on the right side of Android Studio, you can see that the App displays “Hello World!” The words are now installed to the actual Android device for verification.
First, open Developer Options on the phone and select USB Debugging. After the phone is connected (Windows requires a driver). When ready, click the green Play button on the toolbar at the top of Android Studio or the shortcut key “Shift +F10” to start the App. The device selection screen will appear later. Select the connected device and click OK.
If you want to use the emulator to simulate the App, click “Create New Virtual Device” on the Device selection screen above to Create a New Virtual Android Device. If the App does not open automatically after the virtual device is started, you can click the Run button (Shift +F10) again and select the virtual device. The running result is as shown in the picture below.
This method consumes a lot of computer performance and has bugs. To obtain reliable debugging results, it is recommended to use hardware debugging.
At this point, I did the first actual combat project – business information application. This is a simple XML exercise, the source code is as follows.
<? xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:src="@drawable/borgesbookshop" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:text="Borges Bookshop. A small, sophisticated independent literary bookstore."
android:textColor="@android:color/black"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="No bestsellers. Books are arranged alphabetically by author."
android:textColor="@android:color/black"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text=Address: 2nd Floor, 95 Yile Road, Haizhu District, Guangzhou city
android:textSize="15sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="Tel: 020-83340575"
android:textSize="15sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="Email: [email protected]"
android:textSize="15sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="Weibo: http://weibo.com/cantonbon"
android:textSize="15sp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Bo, n, n, n, n, n, n, n, n book, n shop"
android:textColor="@android:color/white"
android:textSize="34sp"
android:textStyle="bold" />
</RelativeLayout>
Copy the codeThe App effect is shown in the figure below.
Although this App is very simple, there are a few basic points that need to be noted.
- The text should be superimposed on the image, so the TextView should be placed below the ImageView. The Views placed first are placed at the bottom, and then stacked one after the other.
- In ImageView, the image borgesbookshop needs to be placed in the Drawable directory. Expand res (Resource) in the left project file tree of Android Studio. Right-click Drawable and click “Reveal in Finder” to jump to drawable. Note The file name must be lowercase letters or numbers, but cannot contain uppercase letters or symbols.
- Setting the width and height of the ImageView to “wrap_content” may fill up the screen on a small device such as a phone, but it still shows a large amount of white space on a large device such as a tablet. Therefore, it is recommended to set the width and height of the ImageView to “match_parent”. And used in conjunction with centerCrop.
- For some properties supported by higher apis, such as the fontFamily property can only be used with API 16 or higher. In this case, devices running API 15 or lower are not affected, and devices running API 16 or higher are valid for the property.
- For novices, it is a good practice to run the App to your phone for verification after each step.