Styling applications part one

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

Well, or let's go the other way - you have your own office Vasya Pupkin with some activity in the global network (say, selling hamsters), and (oh, horror!) You have a whole site. A site, aha, a site that at us is beautiful, well green / red / yellow well, etc. and there is a client program for this site, and we want to color our application in the colors of the site.

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

Russian-language information on this topic is small, we will replenish stocks.
')
1. Choose a color scheme

Here everything seems to be clear - what we want, we choose it. In the article we will adhere to the whole range of colors, in order to avoid comments like “A is greener steeper”

1.1. Preparing a list of colors

Background windows: # 370903 - non-distracting dark red color
Text: # F0E68C Khaki (yellow overall)
Buttons: Gradient from # 7FA40E to # B7EF8E - green shades
Progress Bar: Gradient from # 2E6FC8 to # 759BFB - but where to go without blue?

2. Well, who said go there?

We start our own process

2.1. Boring theory

As you guessed, we will not invent super-bicycles, because everything has long been implemented in Android. The application can contain its own styles and hint to Android on what these styles will be distributed. A style is an ordinary XML resource (well, not only XML, but within 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 style

Create a file res / values ​​/ theme.xml (the file name is unimportant, you can write at least in strings.xml) and write the following to it:

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="HabraTheme" parent="@android:style/Theme.Black"> </style> </resources> 

Here we use the <style> tag to create a new style called HabraTheme and inherit from Theme.Black system style (optional inheritance). Now for further testing of the style, we will need to register it for activation (or the entire application) in AndroidManifest.xml:

 <activity ... android:theme="@style/HabraTheme" > ... </activity> 

To apply a style to an entire application, you must register it not in the <activity> tag, but in the <application> tag.

Background windows :
Add a new <item> tag inside the <style> tag with the name = "android: windowBackground" parameter and content # 370903:

 <style name="HabraTheme" parent="@android:style/Theme.Black"> <item name="android:windowBackground">#370903</item> </style> 

In fact, 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 :
The <item> tag with the name = "android: textColor" parameter and the contents of # F0E68C:

 <item name="android:textColor">#F0E68C</item> 

Buttons :
With the hardest buttons, we will have to create 4 more additional files in the res / drawable folder:

hbutton_normal.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="12px" /> <gradient android:angle="90" android:endColor="#B7EF8E" android:startColor="#7FA40E" android:type="linear" /> <padding android:bottom="7px" android:left="4px" android:right="4px" android:top="7px" /> </shape> 

Here we use XML Drawable to create a button shape. Set our gradient, a round of 12 pixels and padding for button text.

hbutton_focused.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="12px" /> <gradient android:angle="90" android:endColor="#79C83F" android:startColor="#7FA40E" android:type="linear" /> <padding android:bottom="7px" android:left="4px" android:right="4px" android:top="7px" /> </shape> 

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

hbutton_pressed.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="12px" /> <gradient android:angle="270" android:endColor="#79C83F" android:startColor="#7FA40E" android:type="linear" /> <padding android:bottom="7px" android:left="4px" android:right="4px" android:top="7px" /> <stroke android:width="2px" android:color="#52B10C" /> </shape> 

This is the figure of the pressed button, in addition to changing colors, we add a frame (stroke) 2 pixels thick as well as green

It remains to combine these figures into one button:

hbutton.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/hbutton_focused" android:state_focused="true"></item> <item android:drawable="@drawable/hbutton_pressed" android:state_pressed="true"></item> <item android:drawable="@drawable/hbutton_normal"></item> </selector> 

Here we indicate which state belongs to which figure.

Now go back to theme.xml and create a new style:

 <style name="HabraThemeButton" parent="@android:style/Widget.Button"> <item name="android:background">@drawable/hbutton</item> </style> 

And specify the style for the button in HabraTheme:

 <item name="android:buttonStyle">@style/HabraThemeButton</item> 

ProgressBar we will not implement, it will be your homework :)

Our final result:


PS In the study of styles, the source resources of Android are very helpful, located at android-sdk / platform / platform - * / data / res / values ​​/ themes.xml