This tutorial describes the principles to style Android applications. It also explains how to create and use styles and themes in Android applications
1. Android interface design prinicples
1.1. Designing Android Applications
For designing great Android applications you should follow the following themes which are described in detail on the http://developer.android.com/design/index.html - Android design pages.
Design for touch
Show only what is needed
Don’t ask for permission for a certain action but allow the user to undo his action
Only interrupt, if it is important
Keep messages brief, use pictures
Never lose your users data
Allow users to make important things fast
If is looks the same, it should act the same
Help users make decisions, but let them have the final say
There a certain general design best practices, which are listed here:
Design for performance - A well designed application should start fast. You should target for less than one second in average to start the application. All potentially slow operations should be performed asynchronously.
Design for responsiveness - Feedback to the user should be provided instantaneous. Long lasting operations should provide feedback to the user that they are running.
Design for instant data - Your application should provide, if possible, recent data once the user starts it. You should therefore use services to fetch data from external servers to be decoupled from the user interface.
Design for optimized battery life - Your application should consume as little energy as possible. Stop user interface updates and listeners if your application is currently not visible. You can listen to relevant events, e.g. if power supply is plugged in to perform larger updates. If you fetch data from an external server you should, if appropriate, use the Google push notification service. This allows you to access the network only if data is available.
Design for efficient network access - Your application should avoid unnecessary network access, via push notifications. You should also consider the current available network. If you are connected to a wireless lane, your application can download more data.
The http://developer.android.com/design/index.html - Android design pages explain the design principles of Android applications.
|Icon filenames are not allowed to contain special character, cannot start with a number and must be in lower case.|
Creating promotional material
The http://developer.android.com/distribute/tools/promote/device-art.html - Device Art Generator website allows you to create promotional material of your application with a nice device frame around it. Simply make a screenshot on your device and drag it onto the correct device to get a nice image for it.
1.2. Responsive design
It is recommended that the application scales with the device. On a small screen only one fragment is shown, on a larger screen a second or even third fragment might be visible.
This approach is depicted by the following graphic.
It is recommended not to use the full screen width for text in case you are beyond a certain width on a device.
This border is typically above
Research has shown that after this width reader much move the head to much
A way to implement margin points is to use a res/values/dimens.xml file and define a dimension for the margins. Afterwards use resource qualifiers for the same file to define different margins for larger devices.
2. Using styles and themes in your application
2.1. Theming in Android and material design
The Android user interface design guidelines have changes over the years. The first big change for designing Android applications came with the Android 3.0 (Honeycomb) release which introduced the Holo style. The Android 5.0 (Lollipop) release was again a radical change with the Material design. The material design introduces depth into the layout and uses much more animations to provide feedback to the user.
This page also contains several downloadable resources, e.g., an icon set. You find the downloads on this website: https://developer.android.com/design/downloads/index.html
As of Android 5.0 (Lollipop, or API 21) the preferred design for Android applications is the Material design.
Material design is a guide for visual, motion, and interaction design. The Android platform provides a new theme, new widgets and new API for custom shadows and animations.
Material design support that views are drawn on top of other views by assigning an elevation level to them.
Views define an elevation level in dp (density-independent pixels).
To set the elevation of a view in a layout definition, use the android:elevation attribute.
To set the elevation of a view in the code of an activity, use the
Android draws customizable shadows based on the value of the elevation.
Material design also provides improved API for animations and provides several default animations.
2.2. What are styles and themes
Android allow you to define the look and feel, for example, colors and fonts, of Android components in XML resource files. This way you can set style related attributes in one central place.
If the entry in the resource file is used to style a view, it is referred to as a style. If it is used for styling an activity or application it is called a theme.
To define a style or a theme, save an XML file in the /res/values directory of your project.
The root node of the XML file must be the
To define a style or a theme, define an entry with the
style tag and define the
This entry can contains one or more items which define values for named attributes.
The following listing is an example for a style definition.
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="text"> <item name="android:padding">4dip</item> <item name="android:textAppearance">?android:attr/textAppearanceLarge</item> <item name="android:textColor">#000000</item> </style> <style name="layout"> <item name="android:background">#C0C0C0</item> </style> </resources>
You assign the style attribute to entries in your layout file via the
Styles (and themes) support inheritance by using the parent attribute of the style tag. This way the style inherits all settings from the parent style and can overwrite selected attributes.
2.3. Referring attributes in the current theme
Android lists all standard attributes which can be styled in the R.attr file. The reference for this file can be found online under the following URL: http://developer.android.com/reference/android/R.attr.html
You can refer to individual attributes of the current Android theme via the
This notation means that you are referring to a style attribute in the currently active theme.
?android:attr/listPreferredItemHeight means: "use the value defined by the attribute called listPreferredItemHeight in the current theme.
The following layout defines buttons with the Android 4.0 button style.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout style="?android:attr/buttonBarStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:id="@+id/Button01" style="?android:attr/buttonBarButtonStyle" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Show" /> <Button android:id="@+id/Button02" style="?android:attr/buttonBarButtonStyle" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Change" /> </LinearLayout> <EditText android:id="@+id/myView" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" > <requestFocus /> </EditText> </LinearLayout>
A theme is a style applied to an entire activity or application, rather than an individual view. The technique of defining a theme is the same as defining a style.
The next example show how to define your own theme while extending a platform theme.
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="MyTheme" parent="android:Theme.Light"> <item name="android:windowNoTitle">true</item> <item name="android:windowBackground">@color/translucent_red</item> <item name="android:listViewStyle">@style/MyListView</item> </style> <style name="MyListView" parent="@android:style/Widget.ListView"> <item name="android:listSelector">@drawable/ic_menu_home</item> </style> </resources>
2.5. Tinting of drawables
You can define the fill color for your icons. The colors can be defined via your theme and used in the definition of your drawables or views.
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0" android:tint="@color/colorAccent"> <path android:fillColor="#FF000000" android:pathData="M12,4L12,1L8,5l4,4L12,6c3.31,0 6,2.69 6,6 0,1.01 -0.25,1.97 -0.7,2.8l1.46,1.46C19.54,15.03 20,13.57 20,12c0,-4.42 -3.58,-8 -8,-8zM12,18c-3.31,0 -6,-2.69 -6,-6 0,-1.01 0.25,-1.97 0.7,-2.8L5.24,7.74C4.46,8.97 4,10.43 4,12c0,4.42 3.58,8 8,8v3l4,-4 -4,-4v3z"/> </vector>
<ImageButton android:layout_width="48dp" android:layout_height="48dp" android:id="@+id/button" android:src="@drawable/ic_more_vert_24dp" android:tint="@color/primary" />
3. Using Android platform themes
3.1. Using material design and design support library
As of API 21 the material design is the new default design you should be used.
@android:style/Theme.Material (dark version)
@android:style/Theme.Material.Light (light version)
The design support library provides themes with material design styles. This allows you to use material design on earlier releases. See https://developer.android.com/training/material/compatibility.html - Maintaining Compatibility for how to use the new theme in earlier releases.
3.2. Styling the color palette
As of material design you can customize the themes base colors. The following screenshot shows several of these colors.
The following listing is an example of styling it with different colors (defined in your /res/values folder).
<resources> <style name="AppTheme" parent="android:Theme.Material"> <!-- Main theme colors --> <!-- your app branding color for the app bar --> <item name="android:colorPrimary">@color/primary</item> <!-- darker variant for the status bar and contextual app bars --> <item name="android:colorPrimaryDark">@color/primary_dark</item> <!-- theme UI controls like checkboxes and text fields --> <item name="android:colorAccent">@color/accent</item> </style> </resources>
You can also style the status bar with the
android:statusBarColor inherits the value of
3.3. Styling individual views and view groups
As of Android 5.0 (API 21) you can also assign the
android:theme for a view.
This allows changing the theme for this element and its child elements.
4. Exercise: Using and defining themes
4.1. Target of this exercise
In this exercise you use existing themes and define your own custom theme. You can use an existing Android application for this exercise or use the project generation wizard of your IDE to create a new one.
4.2. Use a predefined theme
Configure your application to use the
android:Theme.Material.Light.DarkActionBar theme and test it.
Afterwards pick another theme and test it again.
Pick one of the existing themes which you like the most.
4.3. Exercise: Define a modified custom theme
The Android tools team at Google likes to change the project templates. This means that the styles resource file might already be created or that the base theme which is extended is different.
Create or edit the existing styles.xml file for the Android version your are testing with. This requires defining the correct version qualifier for the folder which contains the file.
Add a new color constant called
my_color defining the
#b0b0ff value to the file.
Modify or add the
It should override the
android:windowBackground property with your color.
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="my_color">#b0b0ff</color> <style name="AppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar"> <item name="android:windowBackground">@color/my_color</item> </style> <style name="ToolbarStyling"> <item name="android:background">@color/colorPrimary</item> </style> </resources>
Assign this theme to your application. Your application should use a different background color.
5. About this website
6. Android Styling resources
6.1. vogella GmbH training and consulting support
|TRAINING||SERVICE & SUPPORT|
The vogella company provides comprehensive training and education services from experts in the areas of Eclipse RCP, Android, Git, Java, Gradle and Spring. We offer both public and inhouse training. Whichever course you decide to take, you are guaranteed to experience what many before you refer to as “The best IT class I have ever attended”.
The vogella company offers expert consulting services, development support and coaching. Our customers range from Fortune 100 corporations to individual developers.
Appendix A: Copyright and License
Copyright © 2012-2016 vogella GmbH. Free use of the software examples is granted under the terms of the EPL License. This tutorial is published under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Germany license.
Unresolved directive in <stdin> - include::./web/vgwort/AndroidStylesThemes.adoc