Application Styling Part One

Everything is going well, you successfully write your magnificent (well, someone’s) applications, you even publish them on the market, but there is a problem: the whole interface is too boring and monotonous, the black background (in some villages is white) and the standard elements are too much pall ...

Well, or let's go the other way - you have your own office Vasya Pupkinyh with some activity in the global network (say selling hamsters), and (horror!) you have a whole site. The site, yeah, the site is beautiful, green / red / yellow, etc. and there is a client program for this site, and we want to colorize our application in the colors of the site.

This article is about how you can stylize your application for specific colors, and not be limited to the colors of Android.

There is little Russian-language information on this topic, we will replenish the reserves.

1. Choose a color scheme.

Everything seems to be clear . We choose which one we want. In the article we will adhere to the entire color gamut, in order to avoid comments like "A greener cooler"

1.1. Preparing a list of colors

Window background: # 370903 - non-distracting dark red color
Text: # F0E68C khaki (yellow in general)
Buttons: Gradient from # 7FA40E to # B7EF8E - green shades
Progress bar: Gradient from # 2E6FC8 to # 759BFB - Well, where without blue?

2. Well, who said there went?

We begin our actual process

2.1. Boring theory

As you may have guessed, we will not invent super bikes, because everything has been implemented in Android for a long time. An application may contain its own styles and directly hint to Android what these styles will apply to. Style is a regular XML resource (well, not only XML, but in the framework of this article we will talk about it), which should be stored in the res / values ​​folder of your application.

2.2. We write the style

We create the file res / values ​​/ theme.xml (the file name is not fundamental, you can write at least in strings.xml) and write the following into it:

Here, with the tag

Actually, writing colors directly in the item tag is considered bad form; it is better to put them in a separate list of colors, but here we save space.

Text :
Tag with the parameter name = "android: textColor" and the content # F0E68C:

#F0E68C

Buttons :
With buttons, the hardest part is that we have to create 4 additional files in the res / drawable folder:

hbutton_normal.xml

Here we use XML-Drawable to create a button shape. Set our gradient, 12 pixel rounding and padding for the hbutton_focused.xml button

text

And this is the state of the focused button (not pressed!), We just slightly change endColor

hbutton_pressed.xml

This is a figure of a pressed button, in addition to changing colors, we add a border (stroke) with a thickness of 2 pixels of the same green color. It

remains to combine these figures into one button:

hbutton.xml

Here we indicate to which state which figure belongs.

Now we return to theme.xml and create a new style:

And specify the style for the button in HabraTheme:

@style/HabraThemeButton

We will not implement ProgressBar, this will be your homework :)

Our final result:


PS In the study of styles, the original Android resources located at android-sdk / platform / platform - * / data / res / values ​​/ themes.xml really help