How do I create an Android application

2 First app

Status: 07/21/2018

We program our first app and get to know basic terms that we will expand later.

The simplest possible app consists of a Activity and one View. In the view we define the graphical user interface (the screen), i.e. which components (buttons, texts, etc.) are visible. In the activity, which consists of Java code, we place the Functionality e.g. which actions are carried out when you press a button.

First, we create a first project and use it to explain the concepts of activity and view. In the end, our first project should look like this:

With File> New> New Project ... let's create a new project.

To do this, enter a name, the storage location (directory, usually the same name as the project) and the "domain". The domain is then read backwards and used as the package name, e.g. the domain becomes the package de.hsa:

Then place the Minimum requirements for your project. Android is available in many versions. The higher you go, the more features you can use, but Android devices with older versions cannot play your app.

Then give Empty Activity at. The other options generate additional code that can be confusing at the beginning:

Just leave the default values ​​in here:

2.1.1 Project view

Now the "normal" project view opens with a large code area on the right, which is of course still empty.

If you do not have a pane on the left, click on project on the left edge of the overall window.

In the left part of the window you can see your project and the corresponding directories, here we have expanded some:

The project view is one simplified View of your directories. Android Studio wants to make it easier for you to navigate. In the next section, we'll see what that looks like on disk.

2.1.2 On the hard drive

Where are the directories on the hard drive? If you go to your project directory you will see:

So you can see that the project view in Android Studio is simplified. On the hard drive, you must first enter app / src / main go inside.

It is also useful to take a look at the directory app / src / main / res:

Here are the so-called resources (Eng. resources), this also includes pictures and videos that you deposit here - pictures e.g. under drawable.

An Android app is basically a collection of activities. One can get one Activity as a screen page on the smartphone. If you click or swipe to another page, you are in the next activity.

Now open the code from in the directory (and the package you have specified). You will now see Java code, and in particular the OnCreate () method. This is your entry point!

As you can see, an Activity is a Java class, more precisely a Subclass the given Android class or (stands for app compatibility). This activity is the Entry point into the app. Unlike a traditional Java program, there is no static method. Instead, the method in MainActivity is called when the app is started.

Own code usually insert within, but below the first two lines.

Take a look at the API of the class. You can see there that the class also descends from the abstract class (see API). We will come across this class more often when it comes to "transferring" the activity of a method.

The activity that is started at the beginning of an app is also called Root Activity. A surprising number of apps only consist of this one activity, as it is common to have many "small" applications on mobile devices that take on a specific task. Each activity has a corresponding graphical user interface, which can be called a View designated.

If you have several activities within the app, you can use the Intentsto get from one activity to the next (see module Intents). In the following, however, we assume an app with a single activity.

The graphical user interface consists of Componentsthat one in one layout arranges. The view is specified in the form of an XML document (e.g.) that is available in the directory:

In Android Studio you will first see the Design view of the file. This view allows graphic editing of the layout:

At the bottom left you can see two tabs named design and text. If you click on "Text" you will see that Text view the XML file. It is often necessary to view the file in order to check details and to better understand how the layout works.

2.3.1 Excursus: XML

XML is a way of presenting structured data. An XML document consists of Elements, where each element has an opening and a closing Day (is pronounced in English, i.e. / täg /) has. For example there could be a foo element:

One element can have other elements contain:

An element can Attributes that are always in the opening day:

Sometimes it is not necessary to have an opening and a closing tag. The element basically only consists of one day. Then you signal this with a slash at the end:

Such a day is also called one Empty day.

For a full description of XML, see Chapter 1 of my web technologies script.

2.3.2 Text view

Let's go back to our text view of the layout. The file that is created by default looks like this. It has two elements (ConstraintLayout and TextView), where TextView is included in ConstraintLayout.

Delete the existing TextView element by typing

  • in the Design view click the element and press the delete key or
  • in the Text view the TextView block, i.e. everything from "

Then drag a button from the in the design view palette (Bar to the left of the graphic window) and position it in the middle. In the right bar you can change the text of the button to "Hello". You can also change the text size in the "textSize" field, e.g. to "30sp".

If you're in the Text view you can also use the Preview activate (button is on the far right in the edge of the overall window) so that you can see both XML and GUI. In this way you can also observe which changes occur when you edit in the XML.

When you start your project, you can

  • run the app on a real Android smartphone or tablet or
  • start the app on a simulated device on the computer

We're looking at option two and launching the app on what is called a emulator. To do this, you have to install the devices for the emulator (various smartphone and tablet models).

If you want to start your app on a real device, you have to switch the device to Development mode move and that USB debugging activate (there are many instructions on this on the net). Then connect the device to the computer using a USB cable. Android Studio will then start using your smartphone / tablet run offer as an option.

We see here that our Button has slid to the top left. That means we have to deal with that complex theme layout set apart, which is exacerbated by the many different screen sizes and the difference in portrait / landscape orientations. More on this in a separate chapter.

We would now like to use the app to interact, i.e. that an action by the user causes a reaction in the app. As a small example, we would like the Text of the button changes to "world".

Let's look at "activity_main" the Text view at. We see the button in this snippet:

That is important ID of the button.

We need this if we are in the code of want to access it. But how can we access a component from the Java code that is defined in some XML file? The answer is that Class R, which Android generates automatically and which allows access to the IDs of the components via static variables.

In the method

let's use the method to fish out the correct component. The expression "" returns the ID of the button.

UPDATE: Since API 26, the method no longer requires casting. Then it becomes:

Then we attach a piece of code to this Button object for execution. We use a so-called "anonymous inner class", which we will talk about later:

Due to the position of the code snippet "halloButton.setText (" World ")" within an inner class, we have to make the variable halloButton "final". The complete code is:

If you now start the app and click on the button, you will see that the text is changed to "World". Your first interaction!

Each app consists of a number of Activities. You can initially think of every activity as a screen of an app. Every activity has one View, these are all graphic components (buttons, texts, images) and the associated layout.

In the simplest case, we take the one given activity. She is ours Entry point, the functionality of the app is programmed here in Java. We define the layout in the XML file belonging to the activity. There is also a graphic editor to help us do this (design view).

We usually test our apps with one emulator. This is a program that simulates a smartphone or tablet on our computer. However, we can also test on real end devices that we connect via USB cable and which are previously inserted into the Development mode were switched.

interaction means that our app is based on a Action of the user reacts, e.g. to touching a button. To do this, we refer to the Java object of the button using the method and the Class Rwhich contains the IDs of all components. Then we "hang" a so-called Listener to the Button object using the method. In the listener code, we can, for example, change graphical components, e.g. write new text in a text component.

(A) Hello button

Create a project where you can incorporate and test all the steps in this chapter, i.e. you have your first app with a hello button. When clicked, the button changes its font to "World".

(B) Second button

Add a second button added.

Change the label of the button to "OK".

Change that ID of the button to "okButton".

Let the following code execute when the button is pressed:

Start your app and see what happens when you press the button.

(C) text field

Insert Text field (TextView), e.g. with the text "My first app", and place the text field above the button. What happens if you run the app in the emulator?

Prof. Dr. Michael Kipp
Augsburg University of Applied Sciences
At the university 1
86161 Augsburg
Room J3.18
Tel: +49 821 5586 3509