This is part 2 of an introduction to creating user interfaces for Android.
Styling
If you come from a web development background, you probably find it ugly to define styles inline. Luckily as with HTML and CSS, you can define your styles in an external file. The syntax is completely different so it may take some time to get used to, but I think of it as assigning classes to the elements I want to style and then defining their styles.
To create a stylesheet we need to create an XML file in the res/values/ directory, it should look something like this:
1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="FillWidth">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
</resources>
The style tag lets you define a name for our style (you can think of this as a css class) and the item tags define different styles.
To reference this style you would have to do something like this:
1
<TextView style="@style/FillWidth" android:text="Text"/>
After moving everything to a stylesheet main.xml is a lot easier to read:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/Container">
<ImageView android:id="@+id/image" style="@style/FillContent"
android:src="@drawable/sun"/>
<TextView android:id="@+id/name" style="@style/PersonName"
android:text="Juanito Perez"/>
<CheckBox android:id="@+id/cool" style="@style/PersonCool"
android:text="Is he cool?"/>
<View android:id="@+id/ruler" style="@style/Ruler"/>
<ScrollView android:id="@+id/scroller" style="@style/TextScroller">
<LinearLayout style="@style/TextContainer">
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
<TextView style="@style/FillWidth" android:text="Text"/>
</LinearLayout>
</ScrollView>
<EditText android:id="@+id/message" style="@style/MessageBox"
android:hint="Message"/>
<Button android:id="@+id/send" style="@style/SendButton"
android:text="Send"/>
</RelativeLayout>
And we can find our styles in res/values/style.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="FillWidth">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="Container" parent="FillWidth">
<item name="android:paddingLeft">10px</item>
<item name="android:paddingTop">10px</item>
<item name="android:paddingRight">10px</item>
</style>
<style name="FillContent">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="PersonName" parent="FillContent">
<item name="android:layout_marginTop">50px</item>
<item name="android:layout_toRightOf">@id/image</item>
<item name="android:layout_marginLeft">20px</item>
</style>
<style name="PersonCool" parent="FillContent">
<item name="android:layout_below">@id/name</item>
<item name="android:layout_toRightOf">@id/image</item>
<item name="android:layout_marginLeft">20px</item>
</style>
<style name="Ruler">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">1px</item>
<item name="android:background">#FF00FF00</item>
<item name="android:layout_below">@id/image</item>
<item name="android:layout_marginTop">5px</item>
<item name="android:layout_marginBottom">5px</item>
</style>
<style name="TextScroller">
<item name="android:layout_height">250px</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_below">@id/ruler</item>
<item name="android:layout_marginBottom">5px</item>
</style>
<style name="TextContainer" parent="FillWidth">
<item name="android:orientation">vertical</item>
</style>
<style name="MessageBox">
<item name="android:layout_width">180px</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_below">@id/scroller</item>
</style>
<style name="SendButton">
<item name="android:layout_width">100px</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_toRightOf">@id/message</item>
<item name="android:layout_below">@id/scroller</item>
</style>
</resources>
You can find more information about styling android apps in the styles and themes documentation.
Strings
You may have noticed that I added all my strings from within the layout. This is usually a bad idea if you ever want to translate your app, and doing it the right way is easy enough that there isn’t really a reason not to do it from the beginning.
Lets look at an example:
1
2
<CheckBox android:id="@+id/cool" style="@style/PersonCool"
android:text="Is he cool?"/>
This would change to:
1
2
<CheckBox android:id="@+id/cool" style="@style/PersonCool"
android:text="@string/cool_checkbox_caption"/>
And you can define the value for cool_checkbox_caption in res/values/strings.xml which will look something like this:
1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="cool_checkbox_caption">Is he cool?</string>
</resources>
In the future you would only need to create another strings.xml file in another location to add another language to your app, but I won’t go into details to do that in this article.
android java mobile programming