In this tutorial we will be learning in detail about the interface of Android Studio. As we know it is official integrated development environment for building, testing, debugging of android apps. First we need to learn about its interface so that ultimately while performing the tasks of coding with this we will not face any sort of difficulties and confusions.
In this tutorial we will not learn about any code but we will learn about interface of Android Studio. It is the main screen of Android Studio as the prototype of android phone is visible.
Main Screen Android Studio screenshot the android phone area.
Projects that should be written is already there at the left hand side of main screen and the name of that side window is ‘Project Explorer’ and from there look for ‘app’ folder and click on the triangle button of it to expand the folders out there. All of ours project files will be stored in this single compound location namely ‘Project Explorer’ and inside ‘app’ folder.
If you wish to see what included into ours project then simply click on the arrow besides ‘app’ and that will expands to show files namely, ‘manifests’, ‘java’, ‘res’ and ‘gradle scripts’. The first folder is ‘manifest’ and click on the arrow beside it and it will open ‘androidmanifest.xml’ which is the manifest file of project. Then, when you open ‘java’ folder where all of these java codes are present or which we will going to write down. The ‘res’ folder is known as resources folder which is going to store all of ours multimedia contents of apps inside of it. The first subfolder of ‘res’ folder contains ‘drawable’ which will contain all of images of apps.
This is in a similar to ‘Gallery’ folder of WordPress self-hosted websites where all of these galleries such as images and multimedia are going to stay and for apps the resource folder of Android Studio is exactly the same .Inside ‘res’ folder there are some sub-folders. One of is ‘drawable’ folder. If you want to load some images into android app in main screen area then it is very easy. Just include the image inside ‘drawable’ folder and it is included inside the Android app which you are currently constructing.
The next sub folder inside ‘res’ folder is ‘layout’. As the name suggests it will define the layout or the front side of app. While clicking on the arrow beside ‘layout’ you will now have two files. The first file is ‘activity_main.xml’ is the structure file of app which is going to decide on layout of app. As the name suggests it is a dot xml file. At the last there is ‘values’ folder inside ‘res’ which is going to define the values that will be include inside android app here.
The ways to edit your application:
There are two ways you could edit or program your application seen inside main window of Android Studio. If you design the lay out the ‘layout window’ is there in between ‘Project Explorer’ tab and ‘Main screen’ of Android Studio. It is basically drag and drop editor and the code then written inside ‘activity_main.xml’. This is one of the easy way to construct the layout of the application. Inside layout tab you will find plain text, radio buttons and other widgets easily and by clicking on it and then bring that to main windows into app then these layouts can be installed within app easily. Subsequently, the related code will be written inside coding window.
This is known as ‘Design’ approach and here you will follow these simplest approaches by drag and drop widgets out there and incidentally this will also write inside ‘content_manifest.xml’ file. The next approach of similar task is the same as we can add these buttons exactly with the following of text mode of main windows of Android Studio.
In the ‘text’ mode of main window, now you have detailed look of the code inside ‘content_manifest.xml’ file. You will have the codes of all these buttons which you have inserted into app by using drag and drop process and those codings will be there. Alternatively if you want the same buttons using the ‘text’ mode then you can simply write those codes which are automatically inserted through drag and drop process and for the sake of understanding just cut those code from the ‘text’ mode of app and widgets and paste it there again and then go to ‘design’ mode and you will find the same widgets are now there and this time with the help of coding.
Screenshot of content_manifest.xml in text mode
It is obvious that the ‘Drag and Drop’ approach which is easier to understand and complete and build the layout but if you want to move towards complete learning of code and how they works then it is better to write the code and build the application through ‘text’ mode. In this way you could understand the practical functioning of XML code which does not need any emulator to understand how they run as all of these should be seen in the ‘Design’ layout of app.
In the main windows of Android Studio we have the ‘zoom out’ and ‘zoom in’ button which when clicked the android phone prototype which has been there with main windows tend to get bigger or smaller with it. This is needed when any of the designing inside of layout becomes so small or bigger that it becomes almost impossible to see through it how they work and with it you can see these XML coding in real time with clarity in picture values.
In the earlier version of Android Studio we have application frames there which tend to minimize the space of android phone inside main windows but with the latest version of Android Studio updates that is now providing the prototype of android phone inside main window of Android studio without any frame so that the visibility space of it is now more increased to make it more comfortable to watch and understand how the layout is working.
So in this new version of Android Studio you do not have to worry about presence of ‘Device Frame’ altogether and this time it is already optimized. That is why I have always advised to use Android Studio as the integrated development environment as it is from Google and from time to time it updates in accordances with the feedbacks received from users.