Android Studio Interface
Android Studio Interface

This brief course will walk you through how to set up the environments necessary for following along with the Android App Development with Kotlin learning path.


All right, hello my friends. Now, in our previous session we completed the installation of Android Studio. So, you know what that means. In this lesson, we will examine the interface of Android Studio. All right, so let's get right to it. So, of course, after creating our first project, we encountered a screen like this. So, then at this point I would like to remind you once again: After making sure that your project is fully loaded in the Build section, you must perform the necessary actions because if your project has not been loaded yet, you can wait for the project to load completely without taking any action.

All right. So after making that little disclaimer, reminder, we can now examine the interface of Android Studio. All right, so if you have a look, we can actually break down this interface into four different parts. So the first part is, well, this is the part where we're going to do the coding and the necessary designs for our projects. If you notice there are two tabs here. First of these is a Main Activity, and this is what we're going to use when we write codes. And the second one is the xml file that we can design for our projects. While developing an Android application, we first create the design of the application that we're going to make and then we can write all the necessary coding for this design. So, in fact this section is what we will use as the very basis of what we're going to do from here on out. So, for now it's enough to know that this is where we start. So, after examining the other parts of the interface, we're going to examine this part in detail, so in other words, we'll come back to it. Now, the section here on the left is the section where the project files are located. So, if you see this part differently, you can just click on the part that says 'Android' above. So here on your screen, it might say Project instead of Android. Okay, so you can choose the Android option from the pop up that opens and here's a little menu and let me just talk about this a little bit. So when we create a project in Android Studio, Android Studio will also create many different files related to our project for us.  Just automatic. So, that way we have the opportunity to run our project on different platforms, share it with different people or even publish our project. So, this feature is the main reason why we use IDEs like Android Studio instead of a simple text editor when coding. So, if the Project is selected instead of Android here, we will view all the created project files in here. Of course, this kind of creates a complex view because while developing applications, we're not actually going to be using every file that is automatically created. Therefore for a simpler view, just make sure that the Android option is selected here.

So, if we examine the project directory here, a new folder has been created under a java folder with the package name that we specified when creating the project. And just below the package folder, the Kotlin class, that is Main Activity, where we will do the coding, has been created as well. So, when we develop an app, we will make our applications where we will need more than one class. So, here are the Kotlin classes that we will create for this stage. You may not know the concept of each of the classes right now but don't worry,  we will learn these terms in detail throughout our upcoming lessons. And we also talked about the design file. "So, where is this design file?" you might ask. Well if you look a little further down the project directory, you will see a folder named res has been created and this is actually the resources folder. Maybe I should call it res, but then I think of peanut butter cups. Okay, so this is the folder in an event where the design files, images, colors, writing styles and themes related to our project are kept, so we're going to dig into these in detail too in the future. I want you to also have a look in the layout folder here, there's the design file of our application. So now, if you close the Main Activity class, and the activity main.xml file right there next to them by pressing the 'X' sign, you can open them up again from the project directory, so we can also collapse and expand the part reserved for the project directory. For this, you can position your mouse on the on the line between Project panel and Main panel  and notice that the cursor has changed. So, you can expand or collapse the Project panel by dragging it to the right or the left. You could also close and open your Project panel completely. For that, you can just press and minimize icon here. If you want to open the Project panel again, you can just click on the 'Project' tab here. All right my friends, so that's pretty much the Project panel. So, now we can look at the menu bar at the top of the interface. So, here you can see many windows, many interfaces, from the File tab to the Help tab. Okay, so first, we can examine the File tab. As you can see there are many features in here but we will examine the features that we will use just for the object. During the course, we will of course examine the other features as we need them. So first off, you can create a new project by using the New and New Project options here. By using the Open option, you can open up a project that you have created before. You can also close your open project by just using the Close Project option. You can use the Settings option here to make the necessary settings for Android Studio. Of course, some of our friends will be using the Mac OS. So, we can, or you can anyway, click on the 'Android Studio' icon that's just to the left of the File tab and select 'Preferences' from the pop up menu that opens there. All right, so now let's go ahead and open up the settings screen. You can search for the feature that you want to, because there's a very clever search bar here, for example, size of text in the area where we will be coding can be quite small, so I'll just enlarge the text so that you can see it better.

So, for this I just type 'font' in the search bar, and as you can see when you type 'font', the relevant features become available. So, in order to change the necessary features, I will first delete the text 'font' from the search bar. Thus, relevant fields become active. So, now you can change the font from the Font section here. You can also enlarge the size of text from the Size section just below. I'm going to set the font size to 18. Press 'OK' or 'Apply' at the bottom right and that applies the changes. So, as you can see, the text can be more readable now. Of course, you don't have to make it that big, I'm just doing it in a way so that you can see it easier, but now I want to look at another feature. This, I'll go back to the search bar and type in 'theme'. All right, so using this feature, you can change the interface theme to dark mode or light mode depending on your preference. All right, so let's examine the SDK section and finish the settings. So, I'm writing 'SDK' into the search bar. Here you can see SDK, and there are also three tabs just below. So, the first is SDK Platforms. If there were any problems during the installation, we could download the SDK that we need from here. As you can see, here is the installed statement. If you happen to have an other statement, you should take the check box here and press the 'Apply' button, and that way you just reinstall as SDK; just installs what's necessary. So, I opened up the second tab, SDK Tools. As you can see, there are four tools installed here. If you're missing any of these, if it's not installed or it needs to be updated, let's go ahead and take this check box here and press the 'Apply' button. Of course, some of our friends are going to be using AMD processors. So, you will need to select the 'Android Emulator Hypervisor Driver for AMD Processors'. Such an option that you can check here. Now, I actually should mention that we are going to test the different applications that we develop on virtual devices that Android offers to us. These are typically called emulators. So, these emulators use virtualization technology. Therefore, virtualization technology must be active on your computer, otherwise you wouldn't be able to install the emulator. Now, I shared the steps that you need to do to activate the virtualization feature of your computer as an information note in our next lessons, but I just want to give you a heads up. This feature is usually active on computers that already have an Intel processor. But

computers with AMD processors, we might have to change it manually. So, just keep that in mind. So, let's continue. We can also install Google Play Services and USB Driver tools here. That way if you want to test your projects on your android device instead of on an emulator, you can always install these tools. So, over this, I'll just tick the checkbox. And click on 'Apply'. Click 'OK'. And accept the necessary licensing agreements. So, when you click the 'Next' button, the necessary installation process begins. And of course my friends, if you encounter any errors during the installation process, if the necessary tools are not properly installed, well you can just go back to the Settings section and complete your installation. So, now that the download process is over, I'll just press the 'Finish' button. And sure enough my friends, that completes this edition of the settings show.

Now let's have a look at some of these other tabs that we're going to use. I want to show you the View tab. So, by using this tab, you can toggle many views in the interface. For example, by using the tool window tab here, we can open and close the tools on the edges of the interface. Again, from the Appearance section here, you can choose which tools that you want to appear on the interface. For example, if we select the toolbar from here, the save the project, open an existing project or reload the project icons will appear on the interface. The View tab is generally like this. So, I don't think I have to do anything more here because we're actually not going to use these other tabs here much, but you never know. So, you can open those and close those in your own time. I just wanted to let you know where they are. So, finally though, I do want to show you the Build tab here, because sometimes after the project is created, well, you might get an error too. So, in that case, you may need to rebuild your project. So, to rebuild the project, you can just use the Rebuild Project tab here and it'll allow you to rebuild your project.

There may be some other situations where you need to restart your project. So, you can always restart the project by selecting the Invalidate Caches and restart, which is the option here under the File tab. And don't worry, I'm going to explain this section in the tutorial where we will install the emulator. Don't get too carried away. So, why don't we go ahead and examine a little bit of the design area? So, for this, I want to open the activity_main.xml file. If you want to we can close the project panel and you can see it more easily. All right. So, that looks better. So, we're only looking at the design space now. So, we can get the design space a little closer, a little bit broader, a little bit fuller. And we can examine this design area by breaking it down into four different sections. The first is this Palette section, upper left. Here are the components that we're going to use while we're designing. For example, we'll access many components from here, such as buttons, text views that we can write text into, and image view components that we can add images to. Of course, we'll be using them. And I'll be showing you some of the details in the following lessons. So, this is just a brief overview with some general info. So, we can actually move any of the components here to the design area just by dragging and dropping.

Also, if you click on the eye icon here and select the 'Show System UI' option, you'll get a real android phone screen. So, you can make your designs that much better. There's also a couple of views in the design area. We don't really use the blue area, we'll only be doing our designing in the white area. So, in order to edit this, I can click on the 'Select Design Surface' icon here. Then, when you select 'Design from here, only the white design area appears. And if you select the 'Blueprint' option, only the blue design area will appear. And then if you select both, both sections will appear in the design area. But since we are doing our designs using just the white area, I will just choose the 'Design' option here. So, I'm going to delete the text view component where the Hello world text is written. This, you can click on the component and press the 'Delete' key on your keyboard. If you press 'Ctrl and Z', you can always undo your actions. Or after selecting the component, you can just right-click with the mouse and select the 'Delete' option. So, I couldn't exactly select the component. Did you see that? So, I'll zoom in on the area and select it. See. Got to be a little closer sometimes. So, finally, you can select and delete the component from the Component Tree section, which is the second part of the design area. That was a smooth segue. So again, to add components to the design area, you can just drag and drop the component that you choose from the Palette section to the Component Tree section. Now, the Component Tree is where the components that we use in the design area are located for your design use. And we can select the components from the design area, we can also select them from the Component Tree, change their required properties. We can also change the properties of the components from the Attributes section located on the far right. Now to change any feature of a component, for example, the text size or the color, after selecting the component from the design area or the Component Tree, we can find the feature that we want right here from the Attributes section and make any changes that we want to. And of course, we'll be doing all of these processes in detail later on, but now you know where they're located. So, I do want to tell you this though, if you notice, the design file is actually a .xml file. In other words, an xml code is actually created for all the components that we'll be using while designing. And here are all the properties of the components as well.

For example, to add a button to the design area, we can add the button from the Palette by dragging and dropping, or we could create it by writing the xml code. And for that, we can just open the 'Split' or 'Code' tabs on the upper right corner. If we open the 'Code' tab, you will only see the section where the xml codes are written. So, if we open the 'Split' section, we can see both xml and design. So, if you open up the design tab, you can only see the design area. Then if you notice, the xml codes for the button that we created are automatically generated. So, in our next lessons, we will learn how to create the components using xml.

My friends, you can see Android Studio's interface is pretty easy and fun to navigate around. I've shown you most of the parts that we're going to be using frequently throughout this course. So, we will get into the details in the future. All right, my friends, so we've made all the necessary preparations to develop our applications using Kotlin. So, now we can just, well now that we're all set up, we can just focus on learning the Kotlin programming language. So, the way that's going to go is teach you Kotlin, then we'll develop android applications using Kotlin. So, therefore, I will install the emulator after we hit up some of this Kotlin language. So, we'll take a short break here and I'll see you in the next video.

About the Author

Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.

Covered Topics