0

Android Application Development tutorial and Tools for beginners

android consumption rate

Build Your First App

The following steps teach you how to build a simple Android app. You’ll learn how to create a “Hello World” project with Android Studio and run it. Then, you’ll create a new interface for the app that takes some user input and opens a second screen in the app.

But before you start, there are two fundamental concepts you should understand about Android apps:

Apps provide multiple entry points

Android apps are built as a combination of components that can be invoked individually. For example, an activity is a type of app component that provides a user interface.

The “main” activity is what starts when the user taps your app icon, but you can take the user straight into a different activity from other places, such as from a notification or even from a different app.

Other components such as broadcast receivers and services also allow your app to perform background tasks without a user interface.

After you build your first app, learn more about the other components at App Fundamentals.

Apps adapt to different devices

Android allows you to provide different resources for different devices. For example, you can create different layouts for different screen sizes. Then the system determines which layout to use based on the current device’s screen size.

If any of your app’s features need specific hardware, such as a camera, you can query whether the device has that hardware at runtime and then disable the corresponding features if not. You can also set some features as required so Google Play won’t allow installation on devices without them.

After you build your first app, learn more about device configurations at Device Compatibility.

With those basic concepts in mind, see below to start building your first app!

Create an Android Project

This lesson shows you how to create a new Android project with Android Studio and describes some of the files in the project.

First, be sure you have installed the latest version of Android Studio. Download Android Studio here.

In the Welcome to Android Studio window, click Start a new Android Studio project.

 

Or if you have a project opened, select File > New Project.

  1. In the Create New Projectwindow, enter the following values:
    • Application Name: “My First App”
    • Company Domain: “example.com”

You might want to change the project location. Also, if you want to write a Kotlin app, check the Include Kotlin support checkbox. Leave the other options as they are.

  1. Click Next.
  2. In the Target Android Devicesscreen, keep the default values and click Next.
  3. In the Add an Activity to Mobilescreen, select Empty Activity and click Next.
  4. In the Configure Activityscreen, keep the default values and click Finish.

After some processing, Android Studio opens the IDE.

Now take a moment to review the most important files.

First, be sure the Project window is open (select View > Tool Windows > Project) and the Android view is selected from the drop-down list at the top of that window. You can then see the following files:

app > java > com.example.myfirstapp > MainActivity

This is the main activity (the entry point for your app). When you build and run the app, the system launches an instance of this Activity and loads its layout.

app > res > layout > activity_main.xml

This XML file defines the layout for the activity’s UI. It contains a TextView element with the text “Hello world!”.

app > manifests > AndroidManifest.xml

The manifest file describes the fundamental characteristics of the app and defines each of its components.

Gradle Scripts > build.gradle

You’ll see two files with this name: one for the project and one for the “app” module. Each module has its own build.gradle file, but this project currently has just one module. You’ll mostly work with the module’s build.gradle file to configure how the Gradle tools compile and build your app. For more information about this file, see Configure Your Build.

To run the app, continue with this link  RUN YOUR ANDROID APP

In the previous lesson, you created an Android project that displays “Hello World!”. You can now run the app on a real device or an emulator.

Run on a real device

Set up your device as follows:

  1. Connect your device to your development machine with a USB cable. If you’re developing on Windows, you might need to install the appropriate USB driver for your device.
  2. Enable USB debuggingin the Developer options as follows.

First, you must enable the developer options:

  1. Open the Settings
  2. (Only on Android 8.0 or higher) Select System.
  3. Scroll to the bottom and select About phone.
  4. Scroll to the bottom and tap Build number7 times.
  5. Return to the previous screen to find Developer optionsnear the bottom.

Open Developer options, and then scroll down to find and enable USB debugging.

Run the app on your device as follows:

  1. In Android Studio, click the appmodule in the Project window and then select Run > Run (or click Run  in the toolbar).
  2. In the Select Deployment Target window, select your device, and click OK.

Android Studio installs the app on your connected device and starts it. You should now see “Hello World!” displayed in the app running on your device.

To start developing, continue to the next step

Run on an emulator

Run the app on an emulator as follows:

  1. In Android Studio, click the appmodule in the Project window and then select Run > Run (or click Run  in the toolbar).
  2. In the Select Deployment Target window, click Create New Virtual Device.
  3. In the Select Hardware screen, select a phone device, such as Pixel, and then click Next.
  4. In the System Image screen, select the version with the highest API level. If you don’t have that version installed, a Download link is shown, so click that and complete the download.
  5. Click Next.
  6. On the Android Virtual Device (AVD) screen, leave all the settings alone and click Finish.
  7. Back in the Select Deployment Target dialog, select the device you just created and click OK.

Android Studio installs the app on the emulator and starts it. You should now see “Hello World!” displayed in the app running on the emulator.

To start developing, continue on this link BUILD A SIMPLE USER INTERFACE

In this lesson, you’ll use the Android Studio Layout Editor to create a layout that includes a text box and a button. In the next lesson, you’ll make the app respond to the button tap by sending the content of the text box to another activity.

The user interface for an Android app is built using a hierarchy of layouts (ViewGroup objects) and widgets (View objects). Layouts are invisible containers that control how its child views are positioned on the screen. Widgets are UI components such as buttons and text boxes.

Android provides an XML vocabulary for ViewGroup and View classes, so most of your UI is defined in XML files. However, instead of teaching you to write some XML, this lesson shows you how to create a layout using Android Studio’s Layout Editor, which makes it easy to build a layout by drag-and-dropping views.

This lesson expects that you are using Android Studio 3.0 or higher and you’ve followed the previous steps to create your Android project.

 Open the Layout Editor

To get started, set up your workspace as follows:

  1. In Android Studio’s Project window, open app > res > layout > activity_main.xml.
  2. To make more room for the Layout Editor, hide the Projectwindow by selecting View > Tool Windows > Project (or click Project  on the left side of Android Studio).
  3. If your editor shows the XML source, click the Designtab at the bottom of the window.
  4. Click Select Design Surface and select Blueprint.
  5. Click Show in the Layout Editor Toolbar and make sure Show Constraints is checked.
  6. Make sure Autoconnect is off. The tooltip in the toolbar should read Turn On Autoconnect (because it’s now off).
  7. Click Default Margins in the toolbar and select 16 (you can still adjust the margin for each view later).

Click Device in Editor  in the toolbar and select 5.5, 1440 × 2560, 560dpi (Pixel XL).

Figure 3. The Layout Editor showing activity_main.xml

For additional information, see the introduction to the Layout Editor.

The Component Tree window on the bottom-left side shows the layout’s hierarchy of views. In this case, the root view is a ConstraintLayout, containing just one TextView object.

ConstraintLayout is a layout that defines the position for each view based on constraints to sibling views and the parent layout. In this way, you can create both simple and complex layouts with a flat view hierarchy. That is, it avoids the need for nested layouts (a layout inside a layout, as shown in figure 2), which can increase the time required to draw the UI.

Figure 4. Illustration of two views positioned inside ConstraintLayout

For example, you can declare the following layout (in figure 4):

  • View A appears 16dp from the top of the parent layout.
  • View A appears 16dp from the left of the parent layout.
  • View B appears 16dp to the right of view A.
  • View B is aligned to the top of view A.

In the following sections, you’ll build a layout similar to this.

Add a text box

  1. First, you need to remove what’s already in the layout. So click TextViewin the Component Tree window, and then press Delete.
  2. In the Palette, click Textto show the available text controls.
  3. Drag Plain Textinto the design editor and drop it near the top of the layout. This is an EditText widget that accepts plain text input.
  4. Click the view in the design editor. You can now see the resizing handles on each corner (squares), and the constraint anchors on each side (circles).

For better control, you might want to zoom in on the editor using the buttons in the Layout Editor Toolbar.

  1. Click-and-hold the anchor on the top side, and then drag it up until it snaps to the top of the layout and release. That’s a constraint—it specifies the view should be 16dp from the top of the layout (because you set the default margins to 16dp).
  2. Similarly, create a constraint from the left side of the view to the left side of the layout.

The result should look like the screenshot in figure 5.

 Add a button

Figure 6. The button is constrained to the right side of the text box and its baseline

  1. In the Palette, click Widgets.
  2. Drag Buttoninto the design editor and drop it near the right side.
  3. Create a constraint from the left side of the button to the right side of the text box.
  4. To constrain the views in a horizontal alignment, you need to create a constraint between the text baselines. So click the button, and then click Edit Baseline, which appears in the design editor directly below the selected view. The baseline anchor appears inside the button. Click-and-hold on this anchor and then drag it to the baseline anchor that appears in the text box.

The result should look like the screenshot in figure 6.

Note: You can also create a horizontal alignment using the top or bottom edges, but the button includes padding around its image, so the visual alignment is wrong if you align these views that way.

 Change the UI strings

To preview the UI, click Select Design Surface  in the toolbar and select Design. Notice that the text input is pre-filled with “Name” and the button is labeled “Button.” So now you’ll change these strings.

  1. Open the Project window and then open app > res > values > strings.xml.

This is a string resources file where you should specify all your UI strings. Doing so allows you to manage all UI strings in a single location, which makes it easier to find, update, and localize (compared to hard-coding strings in your layout or app code).

  1. Click Open editorat the top of the editor window. This opens the Translations Editor, which provides a simple interface for adding and editing your default strings, and helps keep all your translated strings organized.

Figure 7. The dialog to add a new string

Click Add Key  to create a new string as the “hint text” for the text box.

  1. Enter “edit_message” for the key name.
  2. Enter “Enter a message” for the value.
  3. Click OK.
  1. Add another key named “button_send” with a value of “Send”.

Now you can set these strings for each view. So return to the layout file by clickingactivity_main.xml in the tab bar, and add the strings as follows:

  1. Click the text box in the layout and, if the Attributeswindow isn’t already visible on the right, click Attributes  on the right sidebar.
  2. Locate the textproperty (currently set to “Name”) and delete the value.
  3. Locate the hintproperty and then click Pick a Resource  to the right of the text box. In the dialog that appears, double-click on edit_message from the list.
  4. Now click the button in the layout, locate the textproperty (currently set to “Button”), click Pick a Resource , and then select button_send.

Make the text box size flexible

To create a layout that’s responsive to different screen sizes, you’ll now make the text box stretch to fill all remaining horizontal space (after accounting for the button and margins).

Before you continue, click Show  in the toolbar and select Blueprint.

Figure 8. The result of choosing Create Horizontal Chain

Figure 9. Click to change the width to Match Constraints

Figure 10. The text box now stretches to fill the remaining space

  1. Select both views (click one, hold Shift, and click the other), and then right-click either view or select Chain > Create Horizontal Chain. The layout should appear as shown in figure 8.

chain is a bidirectional constraint between two or more views that allows you to lay out the chained views in unison.

  1. Select the button and open the Attributes Using the view inspector at the top of the Attributeswindow, set the right margin to 16.
  2. Now click the text box to view its attributes. Click the width indicator twice so that it is set to Match Constraints, as indicated by callout 1in figure 9.

“Match constraints” means that the width expands to meet the definition of the horizontal constraints and margins. Therefore, the text box stretches to fill the horizontal space (after accounting for the button and all margins).

Now the layout is done and should appear as shown in figure 10.

If it seems your layout did not turn out as expected, click below to see what the XML should look like and compare it to what you see in the Text tab. (If your attributes appear in a different order, that’s okay.)

See the final layout XML

For more information about chains and all the other things you can do with ConstraintLayout, read Build a Responsive UI with ConstraintLayout.

 Run the app

If your app is already installed on the device from the previous steps, simply click Apply Changes  in the toolbar to update the app with the new layout. Or click Run  to install and run the app.

The button still does nothing. To start another activity when the button is tapped, continue to this link START ANOTHER ACTIVITY

After completing the previous lesson, you have an app that shows an activity (a single screen) with a text field and a button. In this lesson, you’ll add some code to MainActivity that starts a new activity to display the message when the user taps send.

Note: This lesson expects you are using Android Studio 3.0.

Respond to the send button

Add a method to the MainActivity class that’s called by the button as follows:

In the file app > java > com.example.myfirstapp > MainActivity, add the sendMessage () method stub as shown below:

KOTLIN

JAVA

Class MainActivity: AppCompatActivity () {
    override fun onCreate (savedInstanceState: Bundle?)

 {super.onCreate (savedInstanceState)
        setContentView(R.layout.activity_main)
    }

 /** called when the user taps the Send button */
fun sendMessage (view: View) {
// Do something in response to button
}}

You may see an error because Android Studio cannot resolve the View class used as the method argument. So click to place your cursor on the View declaration, and then perform a Quick Fix by pressing Alt + Enter (or Option + Enter on Mac). (If a menu appears, select Import class.)

Now return to the xml file to call this method from the button:

  1. Click to select the button in the Layout Editor.
  2. In the Attributes window, locate the on Click property and select send Message [MainActivity] from the drop-down list.

Now when the button is tapped, the system calls the send Message () method.

Take note of the details in this method that are required in order for the system to recognize it as compatible with the android:onClick attribute. Specifically, the method has the following characteristics:

  • Public access
  • A void or, in Kotlin, an implicit unit return value
  • View as the only parameter (it is the View object that was clicked)

Next, you’ll fill in this method to read the contents of the text field and deliver that text to another activity.

Build an Intent

An Intent is an object that provides runtime binding between separate components, such as two activities. The Intent represents an app’s “intent to do something.” You can use intents for a wide variety of tasks, but in this lesson, your intent starts another activity.

In MainActivity, add the EXTRA_MESSAGE constant and the sendMessage() code, as shown here:

KOTLIN

JAVA

const val EXTRA_MESSAGE = “com.example.myfirstapp.MESSAGE”

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

    /** Called when the user taps the Send button */
    fun sendMessage(view: View) {
        val editText = findViewById<EditText>(R.id.editText)
val message = editText.text.toString()
val intent = Intent(this, DisplayMessageActivity::class.java).apply {
putExtra(EXTRA_MESSAGE, message)
}
startActivity(intent)

    }
}

Android Studio again encounters cannot resolve symbol errors, so press Alt + Enter (or Option + Return on Mac). Your imports should end up as the following:

KOTLIN

JAVA

import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.EditText

An error remains for DisplayMessageActivity, but that’s okay; you’ll fix that in the next section.

Here’s what’s going on in sendMessage():

  • The Intentconstructor takes two parameters:
    • Contextas its first parameter (this is used because the Activity class is a subclass of Context)
    • The Classof the app component to which the system should deliver the Intent (in this case, the activity that should be started).
  • The putExtra()method adds the EditText’s value to the intent. An Intent can carry data types as key-value pairs called extras. Your key is a public constant EXTRA_MESSAGE because the next activity uses the key to retrieve the text value. It’s a good practice to define keys for intent extras using your app’s package name as a prefix. This ensures the keys are unique, in case your app interacts with other apps.
  • The startActivity()method starts an instance of the DisplayMessageActivity specified by the Intent. Now you need to create that class.

Create the second activity

  1. In the Project window, right-click the app folder and select New > Activity > Empty Activity.
  2. In the Configure Activity window, enter “Display Message Activity” for Activity Name and click Finish (leave all other properties set to the defaults).

Android Studio automatically does three things:

  • Creates the DisplayMessageActivity
  • Creates the corresponding xml layout file.
  • Adds the required <activity>element in xml.

If you run the app and tap the button on the first activity, the second activity starts but is empty. This is because the second activity uses the empty layout provided by the template.

Add a text view

The new activity includes a blank layout file, so now you’ll add a text view where the message will appear.

  1. Open the file app > res > layout > activity_display_message.xml.
  2. Click Turn on Autoconnect in the toolbar (it should then be enabled, as shown in figure 1).
  3. In the Palettewindow, click Text and then drag a TextView into the layout—drop it near the top of the layout, near the center so it snaps to the vertical line that appears. Autoconnect adds left and right constraints to place the view in the horizontal center.
  4. Create one more constraint from the top of the text view to the top of the layout, so it appears as shown in figure 1.

Optionally, make some adjustments to the text style by expanding textAppearance in the Attributes window and change attributes such as text Size and text Color.

Display the message

Now you will modify the second activity to display the message that was passed by the first activity.

  1. In DisplayMessageActivity, add the following code to the onCreate()method:

KOTLIN

JAVA

Override fun onCreate (savedInstanceState: Bundle?) {
    super.onCreate (savedInstanceState)
    setContentView(R.layout.activity_display_message)

// Get the Intent that started this activity and extract the string
val message = intent.getStringExtra(EXTRA_MESSAGE)

// Capture the layout’s TextView and set the string as its text
val textView = findViewById<TextView> (R.id.textView).apply {
text = message
}
}

  1. Press Alt + Enter (or Option + Return on Mac) to import missing classes. Your imports should end up as the following:

KOTLIN

JAVA

import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView

Add up navigation

Each screen in your app that is not the main entry point (all screens that are not the “home” screen) should provide navigation so the user can return to the logical parent screen in the app hierarchy by tapping the Up button in the app bar.

All you need to do is declare which activity is the logical parent in the AndroidManifest.xml file. So open the file at app > manifests > AndroidManifest.xml, locate the <activity> tag for DisplayMessageActivity and replace it with the following:

<activity android:name=”.DisplayMessageActivity”
android:parentActivityName=”.MainActivity”>
<!– The meta-data tag is required if you support API level 15 and lower –>
<meta-data
android:name=”android.support.PARENT_ACTIVITY”
android:value=”.MainActivity” />
</activity>

The Android system now automatically adds the Up button in the app bar.

Run the app

Now run the app again by clicking Apply Changes in the toolbar. When it opens, type a message in the text field, and tap Send to see the message appear in the second activity.

That’s it, you’ve built your first Android app!

 

 

Please follow and like us:

Leave a Reply