Android Studio – The IDE to build Android Apps – XSTutorials

Android Studio – The IDE to build Android Apps

In this article, you will learn the basics of Android Studio, its User Interface, commands, and features.

PLEASE NOTE: This tutorial has been written using Android Studio 3.5 and Java

The User Interface

When you first open Android Studio, you get the Welcome popup.

Android Studio’s Welcome popup window

The Configure button shows a dropdown list with a few useful options, most used one is the Check for updates one, where you can keep your Android Studio’s SDKs and version updated – Google frequently releases updates, so it’s always better to check it out once in a while.

The Configure list

Let’s explore this IDE’s UI and commands by creating a new app, so click the Start a new Android Studio project button and selecting the Empty Activity box from the Phone and Tablet list. Then click the Next button.

Create a New project

In the next screen:

  • Type a name for your Application
  • Type the package name – usually something like com.yourname.yourappname
  • Choose the location on your hard disk where you want to save the project folder
  • Select Java as language
  • Set the minimum API level to 21 (Android 5.0)
  • Check the Use androidx.* artifacts option
  • Click the Finish button
Configure your project

It may take up to a minute to Android Studio to create the project folder and build the necessary files. Once this process is done, here’s the window you’ll get:

The main Android Studio’s window

Let’s explore the main interface by starting from the top toolbar. It contains the following buttons:

  1. Open a project
  2. Save all files
  3. Sync with File System
  4. Browser arrows
  5. Make Project
  6. Open the Edit/Debug configurations dialog
  7. Open the Devices list
  8. Run app
  9. Apply Changes and restart Activity
  10. Apply Code changes
  11. Debug app
  12. Run app with Coverage
  13. Profile app
  14. Attach Debugger to Android Process
  15. Stop app
  16. Synch project with Gradle Files
  17. Show the AVD Manager
  18. Show the SDK manager
  19. Project Structure
  20. Run Anything
  21. Search everywhere
The Android Studio’s Top Toolbar

Below this Toolbar, you can see the Files navigation toolbar, where you can navigate between your files and folders:

Files navigation toolbar

The Project panel resides on the right side of the Android Studio’s window and it’s where you can view and select all the Java, XML and Gradle files to code your application, as well as renaming the package name.

The Project panel

The manifest folder contains the Manifest.xml file. The java folder hosts the Java files of your app. The res directory is where you can access the drawable images, layout and values files to design your application. The Gradle Scripts section is where you configure your package name, version number, and import third-party libraries.

On the bottom, you can see that the Build tab is open and shows its output:

The Build tab

You can open different tabs from the buttons on the very bottom fo the AS window – for instance, the Terminal, Logcat and Run tabs. The most used one if the Logcat, where you’ll check logs and errors while debugging your app.

The Editor area shows all the files you’ll open, in order for you to edit them as you wish:

Main Editor area

As you can see by the screenshot above, this area looks like a browser, it has got tabs on the top of it for you to easily switch between open files.

The Manifest file

Let’s now check the AndroidManifest.xml file, one of the most important files of any Android Studio project. Here you can add Activities, permissions and metadata code which will make your app able to run and install on devices.

Double-click on the manifest folder to open it in the Editor area.

The Manifest file

If you have to import permissions – like the INTERNET one, for instance – you have to declare them below the closure of the <manifest tag:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.yourname.yourapp">

// Internet permission
<uses-permission android:name="android.permission.INTERNET"/>

Instead, meta-data and services instancies should be placed below the main </acitvity tag:

    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>

// Importing AdMob ads meta-data 
<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="@string/ADMOB_APP_ID"/>

Activites must be declared at the bottom of the Manifest, like this:

<activity android:name=".Home"/>
<activity android:name=".Login"/>
<activity android:name=".SignUp"/>

The build.gradle file

This file is inside the Gradle Scripts folder and it’s the one you’ll edit to import third-party dependencies (libraries), set the SDK version, the App ID and version code.

The build.gradle (Module:app) file

Third-party libraries must be added inside the dependencies code. After you pasted some gradle link, Android Studio will ask you to sync Gradle:

TIP: You can rename the applicationID string only AFTER renaming the package name

One great thing about Android Studio is the code suggestion. A yellow bulb icon will show up in case of warnings, a red one in case of issues in the code.

The Bulb warning icon

If you click on the bulb icon, a dropdown list of options will appear, and you’ll just have to choose the one that fits your needs. It may be a suggestion for an updated version of a library, or the solution to fix an error.

The colors.xml file

Inside the res/values folder, you can find the colors.xml file. You can edit or create color values by setting a name and a HEX value.

<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="myNewColor">#FF12BB</color>

The strings.xml file

The res/value folder contains the strings.xml file too, where you can set your text strings and also ID’s for various libraries.

<resources>
    <string name="app_name">My Great App</string>
</resources>

The drawable folder

This folder contains all the images used in your app. Their names must always be in English and lowercased. You can separate names with multiple words with an underscore ( _ ), like home_button.png.

The layout folder

Here is where the XML design files of your application will reside.

Design your screens

If you double-click the activity_main.xml file from the layout folder, the Design tab will open up in the Editor area:

The Design tab

This is the tab where you can drag Views inside the screen’s preview and adjust them as you wish in order to create the layout of your Activity. On the top-left panel – the one called Palette – you can select the Views to populate your screen. On its bottom, you can see the Component Tree panel. This tab shows the hierarchy of the Views you’ve placed in the screen.

The toolbar above the screen preview hosts the following buttons:

  • Select Design Surface – show the Design + Blueprint previews, or just one of them.
  • Orientation for Preview – set the orientation of your screen
  • Device for Preview – select a device screen from a dropdown list, or create your Custom one
  • API version for Preview – select the Android version you need to adjust the screen size accordingly
  • Theme for Preview – select a Theme for your preview
  • Locale for Preview – in case your app supports multi-language, you’ll be able to see languages preview by selecting them from the dropdown list

The right side of the Design tab shows the Attributes inspector panel, where you can adjust Views attributes as you wish.

You can also switch the preview of your screen into Text and get XML code and preview together:

The java folder

Going back to the left panel where all files are listed, expand the java folder and the first com.yourname.yourapp folder. This directory contains all the Classes and Activities Java files. Double-click the MainActivity.java file to show its code in the Editor’s area:

The MainActivity.java file

How to rename the package name

Renaming the package name is an important thing to do, especially if you’re editing a pre-made project and need to customize it for further use. here are the steps to perform in order to rename the package name:

1. Expand Middle Packages by clicking the Show Options Menu button form the files list panel -> Compact Middle Packages option:

Expand Middle Packages

2. Leave the com folder as it is, right-click on its subfolder (in this case, the xscoder one) and select Refractor -> Rename

Rename the subfolder

3. A popup window will appear on the top of the AS window, click the Rename Package button.

Rename package button

4. An alert with a text field will show up, reporting the subfolder’s name. Edit that name as you wish, it should be your name, lowercased. In this example, I’ll type johndoe, then click the Refractor button:

The Refractor alert

5. Android Studio will perform a search of the old subfolder name in the project and when it’s done, you’ll see the Find tab on the bottom. It will show all the instances that need to be renamed. Click the Do Refractor button to apply changes.

The Find tab

6. When AS will be done on renaming the first subfolder, you can repeat the steps above from 2 to 5 to rename the subfolder of the just renamed one (in this case, mygreatapp).

Rename the second subfolder

In this example, I’ve renamed the mygreatapp subfolder into mycoolapp. If everything went fine, you should see this package name on the top of the MainActivity.java file:

package com.johndoe.mycoolapp;

You can click the Show Options Menu button and click the Compact Middle Packages option again to enable it. Then reopen the Manifest.xml file to check out if the package has been renamed in such file too.

package="com.johndoe.mycoolapp">

The last thing to do is to change the applicationId in the build.gradle file, so open it again and replace the old package name with your new one:

applicationId "com.johndoe.mycoolapp"

Click the Sync Now link that will appear on the top of the Editor’s area, it’s highlighted in yellow:

Rename the applicationID and Sync

When the sync gets done, you should see the Build tab open with a final message like this:

BUILD SUCCESSFUL in 5s
9 actionable tasks: 4 executed, 5 up-to-date

This means you’ve successfully renamed the package name of your application!

The AVD Manager

You can create Android Virtual Devices (AVD) in the AVD Manager window. They will be the Emulators for you to run and test your app. YOu van create a new device by clicking the + Create Virtual Device button and follow the instructions that AS will show.

The AVD manager window

NOTE: I strongly recommend you to test your applications on a real device, because Emulators may fail and be not so stable as a real decice is.

The SDK Manager

This is the window where you’ll be able to install/update the SDK Platforms, SDK Tools and SDK Update Sites.

The SDK manager window

Android Studio Preferences

You can click on Android Studio -> Preferences to open the Preferences panel. Here you can perform several options. It would take forever to explain every single aspect of this window, so just explore it and get familiar with it.

The Preferences window

How to generate a Signed Bundle APK

From the top menu, click Build -> Generate Signed Bundle/APK, select the Android App Bundle option and click the Next button.

Generate a Signed APK popup

Click the Create New button below the Key store path field, this will show a new popup with a few empty fields.

The Key store path field has a folder button on its end, click it and select the directory where you want to save the key store. Fill the Password and Confirm fields with a password of your choice. Fill at least the first field of the Certificate area with your first and last name (the other fields are optional), and click the OK button.

Create a Key store Certificate

The popup will disappear, showing the first one again. Check the Remember password option, choose a folder where you want to save your signed Bundle APK ande click the Next button.

Prepare the Signed APK export path

In the next popup, select the directory where you want to save the .aab file (usually the Desktop) and click the Finish button.

Select the folder where you want to save the APK

Let AS do its job to create the signed Bundle APK and save it on your Desktop. When the process will be done, a release folder will get created. Enter it to get your app-release.aab file and upload it to the Play Store Console (read this article for more info: http://xscoder.com/tutorialsboom/how-to-submit-your-android-app-to-the-play-store/).

Conclusion

That’s all for this tutorial, you have learned many aspects and common features of Android Studio.

If you want to get deeper into Android Studio’s functionalities and UI, check out the Official Documentation.

Hope you enjoyed this article, feel free to post comments about it. 

Buy me a coffee - XScoder - thanks for your support
Your support will be highly appreciated 😉