In the previous lesson, we created the layout for our login screen, and in this lesson, we will learn the resources for this screen, setting up color, background, and padding to make the screen look like the design.

Let's review what an Android application consists of and where our resources are stored:

So:

You may have noticed the presence of subdirectories like mipmap and mipmap-hdpi with mipmap-xxhdpi, values, and values-night. These resource modifications allow customizing the appearance of the application for different devices, screen resolutions, and even languages. Android automatically selects resources based on the current device configuration. If the configuration does not match the available modifications the developer did not provide a modification - Android uses resources from the values and mipmap directories without modifiers.

1. java - This folder stores the Kotlin/Java code of our application. 
2. res - This directory contains various resources listed below. 
   1. drawable - This is where images are stored, which can be in PNG formats or vector images described using XML (Vector Drawable) for Android.
   2. layout - This is where the layout of our screens is placed, where we define the components and their placement on the screen using XML. 
   3. mipmap and its modifications - Each subdirectory contains two files: a square and a round icon. These icons are displayed on the Android home screen, representing your application's icon. Modifications can include different sizes for screens, different versions of Android, and even different languages of devices. 
   4. values and its modification - This directory contains various resources such as strings for your application, constants, colors, and theme settings of the application. 
   5. xml - This directory is similar to the values directory, but here configuration files of your application are stored, such as HTTP/HTTPS settings, backup rules, file access settings, and others.

Let's take a closer look at the values directory. This directory is used to configure the appearance of your application. Typically, the following files are created in it:

• string.xml: This file contains all the static strings of your application. Your XML files should reference strings from this file. 
• colors.xml: Here, colors that you will use in your application for elements such as buttons and text fields are stored. 
• themes.xml: This file configures the base theme of your application, including colors for buttons, text, status bar, navigation buttons, and other interface elements. 
• styles.xml: This file complements the themes.xml file, containing settings for specific interface elements such as TextView and Button. 
• dimens.xml: This file contains various constants such as numerical values, sizes, and predefined identifiers that you can use.

To complete the login screen, we will need to add images, colors, buttons, and input field backgrounds to our application.

Let's start with the strings. We used the android:text="" attribute in our TextView and EditText. And you might have noticed that Android Studio highlights them with a gray background and gives us hints to move these strings to our application resources. This is done so that the application can support localization. Even though we do not have localization, let's move our strings to the resources. Open the res/values/string.xml file and add the following strings to the resources block:

<string name="hi_welcome_back_you_ve_been_missed">Hi! Welcome back, you\'ve been missed</string>
<string name="email">Email</string>
<string name="password">Password</string>
<string name="forgot_password">Forgot Password?</string>
<string name="sign_in">Sign In</string>
<string name="or_sign_in_with">————————— Or sign in with —————————</string>
<string name="don_t_have_an_account">Don\'t have an account?</string>
<string name="sign_up">Sign Up</string>

Now we can use these strings inside our screen layout. To do this, we replace the value of the android:text="Sign in" attribute with android:text="@string/sign_in". Instead of the given string, we use our resources by referring to them through the @ symbol.

• @ - reference to resources s
• string - type of resource. In the future, we can use our drawable / color / style etc. 
• sign_in - the name of our resource.

To reduce the size of the article, I will give an example screenshot with the final result:

Now we need to add colors for TextView, EditText, and for the background of our Button. To add colors, open the res/values/colors.xml file and add the following lines to the resources block:

<color name="orange">#E65A5A</color>
<color name="grey">#F8F8F8</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

If you already have some colors with the same names (Android Studio will highlight errors), just replace them with those from the lesson.

You might have noticed that the XML structure for colors and strings is the same. Yes, in essence, you are simply creating an XML Tag color or string with the name attribute. It is the value of the name attribute that will be used in the application to find the color or string by name. This name must be unique. Only one orange color can exist. But there can also be an orange string. That is, one name per entity.

To set the text color, we need to add the android:textColor="COLOR" attribute. Where COLOR is a reference to our resource. So, if we want to set the black color for our Sign In label, we will add the android:textColor="@color/black" attribute.

We assign colors to all our TextView and EditText elements and get the following code. I will show an example of how the middle block looks:

The next step is to create resources for our SIGN IN button and input fields for email and password. Let's first create a background for our button. To do this, find the res/drawable/ folder, right-click, and select New → New Drawable Resource File. In the window that appears, set the file name - background_button and the root element - shape. An example is shown in the screenshot:
 

After clicking the OK button, we get a created file with the following content:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

</shape> 

For clarity, we are going to create a simple geometric figure and set it a different set of properties. By default, the created figure is a rectangle. So we only need to set the background and corner rounding. These properties are managed by tags:

• <solid> tag with the android:color attribute is responsible for the background 
• <corners> tag with the android:radius attribute is responsible for rounding

We apply the acquired knowledge and get the following code and its preview:

Now we can apply this file to the android:background="" property of our button in the login screen layout file. It looks like this:

To create the background for our input fields, we also need to create a figure. We will need to set the corner rounding and the border with color. These properties are managed by tags:

• <corners> tag with the android:radius attribute is responsible for rounding the corners
• <stroke> tag with the android:color and android:width attributes are responsible for our border and its color and thickness

It the code looks like this:

We apply our resource file as the background for EditText and get the following result as shown in the screenshot:

I also set the height of the elements for preview.

Now, based on the lessons Android XML: Basics of UI  and Android XML: Arrangement of elements. LinearLayout you can complete the Login screen yourself. For this, you need to use the following attributes:

• android:padding=""
• android:layout_margin=""
• android:layout_width=""
• android:layout_height=""

In the next lesson, we will add a click handler for the SIGN IN button and launch a new screen.