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 w1000dp. 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 View.setElevation() method. 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 <resources> tag. To define a style or a theme, define an entry with the style tag and define the name attribute. 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 style=”@style/text attribute.
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 ?android:attr notation. This notation means that you are referring to a style attribute in the currently active theme.
For example ?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>