android app development for beginners
PropellerAds

Learn the simple step of developing your first Android App development for beginners. Or, if you want to learn more in this tutorial, you will be shown different info to build you already have skills.

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 the 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 app development for beginners 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 Project window, 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 Devices screen, keep the default values and click next.
  3. In the Add an Activity to Mobile screen, select Empty Activity and click next.
  4. In the Configure Activity screen, 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 of Android App development for beginners, 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 If you’re developing on Windows, you might need to install the appropriate USB driver for your device.
  2. Enable USB debugging in the Developer option 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 number 7 times.
  5. Return to the previous screen to find Developer options near 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 app module 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 as follows:
  1. In Android Studio, click the app module 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 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.

android app development for beginners

In this lesson of android apps development for beginners, 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 interfaces 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 View-Group 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-drop 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 (android apps development for beginners).

android app development for beginners

 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 Project window 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 Design tab 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 “Auto-connect# is off. The tooltip in the toolbar should read Turn on Auto-connect(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).

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 Constraint Layout, containing just one Text View object.

Constraint Layout 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.

Illustration of two views positioned inside Constraint Layout

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 TextView in the Component Tree window, and then press Delete.
  2. In the Palette, click Text to show the available text controls.
  3. Drag Plain Text into the design editor and drop it near the top of the layout. This is an EditTextwidget 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.

Android app development for beginners

 Add a button:
 The button is constrained to the right side of the text box and its baseline
  1. In the Palette, click Widgets.
  2. Drag Button into 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.

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.

Android app development for beginners

 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 editor at 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.

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 “editmessage” for the key name.
  2. Enter “Enter a message” for the value.
  3. Click OK.

Add another key named “buttonsend” with a value of “Send”.

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

  1. Click the text box in the layout and, if the Attributes window isn’t already visible on the right, click attributes on the right sidebar.
  2. Locate the text property (currently set to “Name”) and delete the value.
  3. Locate the hint property 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 text property (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.

The result of choosing to Create Horizontal Chain

Click to change the width to Match Constraints

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 Attributes window, 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 Constraint Layout, read Build a Responsive UI with Constraint Layout.

Android app development for beginners

 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 for android app development for beginners, 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 onClick 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 is 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:

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 Intent constructor takes two parameters:
    • A Context its first parameter (this is used because the Activity class is a subclass of Context)
    • The Class of 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. 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 Autoconnectin the toolbar (it should then be enabled,).
  3. In the Palette window, 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.

android app development for beginners
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. Android app development for beginners.

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! And, with this tutorial android app development for beginners, you can start building your android apps.

PropellerAds

LEAVE A REPLY

Please enter your comment!
Please enter your name here