What is app styling and how is it done?

The appearance of applications, along with their correct and better performance, is very important, and care must be taken in designing a user-friendly interface and attractive graphical interface. In this article, we want to talk about how to change the appearance and important components related to  the style and appearance of applications. If you want to know about the styling of applications, it is recommended that you follow this tutorial.

What is a theme?

The theme  is the style considered and applied to the whole application. For example, when we want to define the application menu's color, we can give it a theme and, by defining the theme, apply the desired color to the application menu. Of course, it should be noted that we apply the desired feature and value that is the desired color in  the theme for the application  menu. In this case, it is no longer necessary to specify the attribute and value for each activity separately.

What is style?

A style is placed inside the XML file.  The XML file  with attributes and style values ​​is in the res/values ​​/ directory. It should be noted that this file will have resources tags and will also have features and values ​​for styling.

You should note that the name of this file can be selected as you wish, and you can choose anything like the name of this file, but the important point here is that it must be an XML file extension.

Styling and styling in android

Android system  allows programmers to change the application's appearance by applying and assigning some features to the XML file and producing an attractive graphical user interface. In this case,  programmers can make all the appearance  changes they want inside the XML file and then see the result in its appearance. Appearance changes that programmers can apply include changing the background color, creating some attractive images and boxes, using attractive fonts and animations, and more.

Note that if an entry inside the source file is used to style and style the view, it is called a style. But if the same entry is used to style and style the activity, it is known as a theme.

Just  create an XML file  inside the / res/values ​​folder to change the style or theme. Note that the root node of the XML file must be resources. This file must use style tags that have names.

The code below shows an example of creating and assigning style.

Inheritance

It should be noted that styles inherit the attribute from the parent attribute, which is for the style tag. In this way, the parent style and settings are inherited and used by all its subsets.  Android stores  all the attributes assigned as a list in the R. attr file. To access this file and use the styling features in it, you can act like URL: R. attr.

If you want to access the features inside this file, you can act like / notation? Android: attr.

To make it easier to understand, it is better to consider this example.? android: attr / listPreferredItemHeight

The example above says that you should also use the value defined by the listPreferredItemHeight attribute inside the theme.

Below is the code used to style the buttons  using Android style.

Note the following layout:

A theme, unlike a style, is a change given to the whole application or activity. The style is for one view only, but the theme is for the entire look of  the app  or activity.

The method used to define the theme is similar to the method used to define the style.

In this code, we have considered a general theme for  the application  and defined it for the whole activity.

How to use Android themes?

Holo design can be used for versions after 14 application programming interfaces and before API 21.

If you want to use some widgets with material style, you can use v7 support libraries. This library has a set of widgets that can style material.

color palette

If you use material design and styling, it will be possible for you to easily use custom colors for the background color or the like to customize the look of  the application. So if you want to customize the colors yourself, you can use the color palette.

The code below is stored in the / res/values ​​folder and has several custom colors obtained using the color palette. The code below can be an example of how to create and  create custom colors using the color palette

The status bar can also be styled and styled. Status bar styling can be done using the android: statusBarColor attribute. By using and setting the android: statusBarColor feature, you can also style and change the status bar style.

Note that the android: statusBarColor attribute inherits the value of android: colorPrimaryDark by default. If you want to change its value to its appearance, you must assign other values ​​to that attribute.

View and view group style

From Android version 5.0 and the application interface of application 21 and above, the programmer can assign android: theme to a view. By doing this and assigning these changes to the elements, the programmer can also change the appearance of the children.

Themes selection methods

There are several ways to choose themes, the best of which is for the programmer to consider and inherit the default style and style of the environment and apply only the changes he needs. This type of styling is called natural style because this type of application of changes and styling is very natural and user-friendly.

It should be noted that the programmer can use the resource-qualifier and can use this to determine what theme and style the environment will inherit.

Note:

For versions 14 and later: android: Theme. Holo. Light.DarkActionBar

Versions 11 and later:

android: Theme.Holo. Light

Older versions:

android: Theme. Light used.

responsive design

This type of design is very suitable because all designs must be done considering the type and size of devices so that no problems occur during their execution. For this reason, this type of design can be considered the best type of design because the design is responsive.  Responsive design  is one of the designs that can adapt and execute itself with the type, size, and system of the device. There will be no problems when executing these designs on different devices.

Due to the variety of devices on which applications run, such as tablets, mobile phones, phablets, etc. Designs should be responsive depending on the type of device running on them and the screen size. Change their scale and adapt to the device. Small devices that also have a smaller screen can only display one fragment, but devices that are larger and have a larger screen can easily display three fragments as well.

margin points

In this section, you should pay attention to the size of the text and the screen and create a fit between them. The fit between the displayed text size and the screen size does not bother the user's eyes. When selecting and specifying the text size, it is better to consider the device's screen width. Its scale can be around w1000dp.

If you want to do the margins and adjust the margins, you have to go to the res/values ​​/ dimens.xml file and make the necessary adjustments there.