Directory Image
This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Privacy Policy.

Android tutorials: build your first app

Author: Navneet Goel
by Navneet Goel
Posted: May 12, 2017

Smartphones. They can easily be called the most insaely popular and fastly growing invention of the 21st century. Nearly 2 billion people across the globe use smartphones. Smartphones run on various Operating systems, and one of the most widely used is 'ANDROID'. The Androidâ„¢ Operating system was created and developed by global search engine company Google. Easy to use, quick to respond, Android is very widely used. It runs on 'App'. An Android App or Android Application, is a mobile application designed to run on Android devices. The uses for Android apps range from music to science, from games to photography, from religion to dictionary, from Maths to History. There's an app for almost everything- you name it. According to stats, there are more than 2.8 million android apps available in market. And in this Android Tutorial, we will teach you how to make your own first android app.

This Android Tutorial is meant to only teach you the basics of Android app development. There are many android tutorials available online, and offline, which go in to much more depth, but if you are a beginner, then this Android Tutorial is perfect for you. By the end of this Android Tutorial, you will have learned how to make a simple android application using App Studio. Most of the Android Tutorials available online teach you on App Studio, as it is very easy to use. The first and foremost step in this Android Tutorial is, Install App Studio, if you do not have it already. To make this android tutorial easier for you to understand, we have discussed the process into four major parts-

1. WRITING A NEW PROJECT

The first step to create your own android app in this Android Tutorial, is to create a new project in the App Studio. To ensure that you learn from this Android Tutorial, follow each and every step given below carefully.

Step one - Create a new project in Android Studio. In the welcome window of the App, click on file, and then Click on 'New Project'.

Step 2. After completing Step 1 successfully, you will move to the New Project screen. In new project screen, enter the following

Application name : "AppOne."

Company Domain : "xyzdemo.com"

Then in the location option, choose any location you want to save your project in, and then Click 'Next'.

Step3. After this you will be followed into the Targeted Android devices screen. Since this Android Tutorial is for basic level, you should keep the options as default and Click 'Next'. You will learn more about the SDK versions in advanced android tutorials later.

Step4. In this step you will enter the 'Add an Activity to Mobile' screen. Select "Empty Activity" and then click on the Next button.

Step5.Then you will see the 'Customize the Activity' window. Here, in this window, do not change the default values and click on the Finish bottom. After processing, Android Studio will open the IDE. Make sure you check the important files once again thoroughly.

Make sure the Project screen is appearing (click on View, then on Tool Windows, and them onProject) and the Android view is selected from the drop-down list at the top of that window. You will then see the following:

App> java> com.xyzdemo.appone> MainActivity.java

This is the main activity window, the official beginning of your App. When you will have built your App and run it, the system will launch a demo if this activity.

App> res> layout> activity_main.xml This XML file defines the layout for the activity's User Interface. It contains a text View element with the text "This is my First App!".app> manifests> AndroidManifest.xml. The manifest file will define and describe the app's components.

Gradle Scripts> build.gradle

You'll see two files with this name: one for the project and one for the "app" module.

2. RUNNING YOUR APP ON A REAL ANDROID DEVICE FOR THE FIRST TIME.

In the first major step of this Android tutorial we taught you how to develop an App that will say "This is my first Android App!". Now to run this small basic app on an actual android device, carefully read the following steps, and execute them without any mistakes:

Step 1. Connect your android device to your development machine with a USB cable.

Step 2. Enable USB debugging on the android device you are using by going to Settings> Developer options. Now you can run the app using Android Studio as follows:

  1. In App 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 screen, select your device, and then click on 'OK'. Android Studio will then install your newly made app on your connected android device and then it will run it.

You'll see "This is my First Android App!" On your connected Android Device!

3. BUILDING A USER INTERFACE FOR YOUR APP.

In this part of your Android Tutorial to build your first App you will learn to build an interface for your app. In the first two parts, you learned to command, and Run, and now it's time to adda an interface and change your App's look! Stay tuned to the android tutorial and follow the below procedure to learn the basics of UI development for Android Applications. Since this Android Tutorial is a basic one, we will teach you how to add a text box, and how to add a button.

In this lesson, you'll use the Android Studio Layout Editor to create a layout that includes a text box and a button. The user interface for an Android app is built using a hierarchy of layouts (View Group objects) and widgets (View objects).

Layouts are invisible containers that control how its child views are positioned on the screen. UI components like buttons and text boxes are widgets. Illustration of how View group objects form branches in the layout and contain View objects 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-dropping views. Open the Layout Editor Note: This lesson expects you are using Android Studio 2.3 or higher and you've followed the previous lesson to create your Android project. To get started, set up your workspace as follows:

  1. In Android Studio's Project screen, click on the following, 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 Projection 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 Show Blueprint so only the blueprint layout is visible.
  5. Make sure Show Constraints is on. The tooltip in the toolbar should read hide Constraints (because they're now showing).
  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).
  8. Click Device in Editor in the toolbar and select Pixel XL.
  9. The Layout Editor showing activity_main.xml 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), 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. The text box is constrained to the top and left of the parent layout

  1. First, you need to remove what's already in the layout. So click Text View in the Component Tree window, and then press Delete.
  2. From the Palette window on the left, click Text in the left pane, and then drag Plain Text into the design editor and drop it near the top of the layout. This is an Edit Text Widget that accepts plain text input.
  3. 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 to 75% or higher using the buttons in the toolbar.
  4. 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).
  5. Similarly, create a constraint from the left side of the view to the left side of the layout

Add a button.

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

  1. From the palettes window, click widgets in the left pane, and then drag Button into the design editor and drop it near the right side.
  2. Create a constraint from the left side of the button to the right side of the text box.
  3. 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 baseline Constraint, 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. 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.
  4. YOU ARE AN APP DEVELOPER NOW!

This Android Tutorial was a basic one, and now you have an android application that displays "This is my first Android App!" And also has a text box and a button! As you will take more android tutorials, you will get more involved into android app development and learn more about it. (For example, the buttons and text box have not been assigned any activity yet, but you can develop them to make them do anything you want!) And now, finally, this Android Tutorial has come to an end, and you can proudly say that you are the developer of an Android App! Now go ahead, take many more android tutorials, practice a lot, and soon you might be programming the next big APP of the world! Happy programming!!!

About the Author

Navneet is a Digital Marketing and Coding enthusiast with the heart of an entrepreneur. Passed out of Nsit Delhi in 2014, He is currently working in a multinational company as an R&D Engineer and used to write Android Tutorials in free time.

Rate this Article
Leave a Comment
Author Thumbnail
I Agree:
Comment 
Pictures
Author: Navneet Goel

Navneet Goel

Member since: May 12, 2017
Published articles: 1

Related Articles