image
Introduction to Resources (Strings, Drawables, etc.)
Start course
Difficulty
Intermediate
Duration
1h 19m
Students
6
Description

In this course, we will examine the interface of Android Studio and explore the Gradle Build system, manifest files, and resources such as strings, drawables, etc.

Intended Audience

This course is ideal for anyone who wants to learn how to use Kotlin for developing applications on Android.

Prerequisites

This content will take you from a beginner to a proficient user of Kotlin and so no prior experience with the programming language is required. It would, however, be beneficial to have some development experience in general.

Transcript

So hello, everyone. I want to speak about resources in Android Studio. So, I want to get to Android Studio without losing any more time. Come on, we got a lot to learn here.

So, you know we have opened a project in Android Studio, and we're giving some information about our project file on Android Studio. You can see the resources folder on the left-hand side in Android Studio as a res folder. There are four folders under this res folder. These are the drawable folder. We got the layout folder, the mipmap folder, and the values folder. So for instance, I just want to talk about the drawable folder. So, this is the folder that's going to hold pictures for our project. So, I'm just going to right click on the drawable folder and click the 'Open In,' 'Explorer' option. I can see there's folder in the Explorer.

There is an XML file inside of it. So, I'm going to put pictures, icons, logos; that kind of thing in this folder for use in my Android Studio project. Then when we need the images in the drawable folder, we can use them in the project  just by calling their file path. And again, we'll do that in detail in our coming lessons. I just want to show you where we're going. I'm going to move a picture that I prepared before the lesson into the drawable folder. So for this, I'm just going to 'Copy' the picture from another folder and 'Paste' it into the drawable folder. So, after I close this folder, you can see the picture under the drawable folder in Android Studio. And if I double click it, it's going to open, and then I can use this picture on my project such as a background image.

So, I also got to mention that the names of the pictures that you add to the drawable folder  must be written in lowercase letters. And if it consists of more than one word, well, you've got to separate the words with an underline instead of a space; otherwise, you may get an error while you're running the application. Also, the size of the pictures you add here shouldn't be too big, my friends. So, that might give you an error when you're especially using a high-res images. Let's not worry about that for now. That's the drawable folder. So, let's have a look at the layout folder now. So, the layout folder holds XML activities files for our Android Application. And you know that we've got one activity now for this project and its name is MainActivity.

But there are two parts of this activity. See, one is the XML file, the other is the Kotlin file. The layout folder holds the XML file of the MainActivity. The MainActivity.kt file is under the app folder, Java folder: com.example.myandroidproject folder. And if we had, of course, other activities, they are XML files; would've been under the layout folder. And we can work on the activity, whichever we want if we got more. But we don't, so we'll move on. This other folder here's the mipmap folder. So, mipmap folder holds pictures and icons, like the drawable folder. So, if the mipmap folder holds pictures, like a drawable folder, why do we have two different folders for the pictures? Actually, the mipmap folder is not the same as the drawable folder.

How does that work? Well, let's get into it deeper. I'm going to open up the mipmap folder on 'Explorer,' and you can see here that there are six different mipmap folders. And those include mipmap-anydpi, mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, mipmap-xxhdpi, and mipmap-xxxhdpi. So, why you got six different mipmap folders? Well, if you look at them carefully, you're going to see that there's the same picture in all of the mipmap folders. So, you know that when we spoke about Android Applications before that you can develop Android Applications for different screen sizes. You can develop Android Applications for small screens and big screens and tablets and Android Televisions for goodness sake. So, when you're developing applications, well, if you use the same pictures for every screen resolution, pictures are not going to appear that well for you, and it's going to make you look bad.

So, to solve that problem, Android Studio uses this mipmap folder. Now, you are going to use copies of the same image in different resolutions. So, on whichever screen size of the device that you're running your application, it's going to use the required photo from the Android Studio mipmap folder. So, for example, if your application runs on a small screen device, your application is going to use pictures in the mipmap-hdpi folder, or let's say your application runs on the big screen device  that's going to use pictures in the xhdpi. So, your application is going to make this decision automatically. But you also need to write some code for this operation to happen. It doesn't work just automatically just by putting in the pictures.

But again, don't worry about that;  we're going to see some examples doing that in the next videos. I'm just giving you some general information about Android Studio: how it works, and what you can do in Android Studio. So, you don't even get to worry about it. So, let's move on to the last folder; it's the values folder. There are two XML files here, and one theme folder. In previous versions of Android Studio, there was a style.xml file instead of the theme folder. However, in the current versions of Android Studio, the theme folder was created instead of the style.xml file to access the dark theme and the light theme features. So, that's all. Here, we're going to examine that in a moment, but now I'm just going to click and open the 'colors.xml' file first.

You can define colors for your project in this XML file. And you see here there's seven colors in here. Every color has a code. This code is XML. You're going to find colors using XML. All the way through, you can find every color XML code just out there on the Internet. You don't have to memorize them all if you don't have that capacity. But don't worry about it. You'll choose a color and put its code in this file. That's all. But then after that, you need to give a name to your color. So, and here this name is purple, teal. We got black, and we got white. So, when we need any of these colors, we can use the color just by calling the name of the color. That's why we do this.

For example, if I want to change my main activity background color, I'm going to go to the 'activity_main.xml'. First, I got to choose a main layout.

That is the 'ConstraintLayout,' and I'll choose the 'Background' attributes in the attribute section on the right side of Android Studio's interface. So after that, a window is going to open, and I can see these names in the colors section in this window. Also, there are plenty of other basic colors in here, but there are millions of color code. And you really won't be able to find every single color in Android Studio. So because of this, if you want to use a new color, customize a color, you can define that color in this colors.xml file. And after that, if you just give your color a name, you'll be able to use this name whenever you need it. That's why I'm saying you don't need to remember every bit of color code. So, write here this code, and use it everywhere that you need it.

Let me just show you where I'm going to add a new color here, just to give you an example. So, I'll 'Copy' the last line, and I'll 'Paste' it into the next line. After that, I'll change the name of the color red and also change the color code. But we won't be able to know the code of every color. That's why I'm saying, if we know the color code, well, we can just write it here. If we do not know the color code, we can find it on the Internet, like I told you before, I wasn't kidding. Or, if we click on the 'Color box' on the left, the palette's going to open where we can choose a color. It's often a good way to go. So, we can choose a color that we want right from here. I'm choosing the color red for now. But note that, here is the code for the color I chose. So later, when I click anywhere outside of the color palette, I'm going to be creating my new color.

Now, it's red. See, that's easy. So, I go back to the 'activity_main.xml,' and I'll try to change the 'Background' again. And I get to see this new color on the list as a color red. So, another XML file is the 'string.xml' file. Of course, you can give a name to every string, word, or sentence. When you need the stringer sentence, you can just call it by its name. Also, you can add a raisin here and after that, you can call it from a Kotlin file. Also, we're going to use this file to design our application for multilingual. I'm not going to explain that right now in this video, but you can see that there are a lot of things that you can do in here, and that you've got to learn in the future.

So, let's move on to last folder. It's a theme folder, and obviously the folder is for themes. There are two different XML files in the theme folder. The first one is for the light mode. The second one is for the dark mode. It was actually created automatically by Android Studio. In previous versions of Android Studio, there was a style.xml file instead of the theme folder, and the theme was basically created for light mode only. That's why if you're familiar with earlier versions, you might be scratching your head on this, but that's why I've told you a couple of times. Let's open both themes though. So, as you can see both have the same XML code, but only the colors are different. So, for this reason, it's going to be enough for us to examine the XML file containing the light theme.

So, if you pay attention, there are primary and secondary brand colors here. We've got the primary brand colors or the colors displayed in the design area. For example, colorPrimary is for the app bar in design area. And the app bar is commonly known as the Action bar  if you want to get technical. The colorPrimaryVariant is also for the color of the top part of the application interface. colorPrimary defines the color of the application, where we write the name of the application section. And when you change these colors from the 'themes.xml file,' all of the application activities, app bar colors will change automatically. You can also create a new theme from here. And which activity that you want to use, you just change the theme from the manifest file, and it'll change.

So like I said, with the new version of Android Studio, it's a whole lot easier to switch to the dark theme if you want. So, let's just have a quick look at how you do that. We'll open up the 'Design area' and when you click on the 'Moon icon' here, we can see the Not Night and Night options. So, if you select the 'Night' mode option here, your design area will turn into dark mode, and all the components in the design area will have the dark theme colors applied. So, if you click the 'Moon icon' again and select the 'Not Night' option, the colors in the bright theme will be applied to your design area. How sweet it is. All right my friends, that's all you need to know for now. In our next lesson though, we're going to learn all of these issues in detail and in practice. So, we'll take a short break here. I'll see you in the next lesson.

 

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