awesome android design
DESCRIPTION
This slide is packed full of important information from beginner to experienced Android designers and developers!TRANSCRIPT
AWESOME
ANDROIDDESIGN
+Android Developers
—Nick Butcher
Awesome Android Design…
HOLOVISUAL
LANGUAGE
TECHNIQUES
RESPONSIVEDESIGN
TOOLS
WHY
IMPLEMENTING
Holo Visual Language
Holo Visual Language
Content First
Content FirstBorderless
buttons
Button
bar
Typography
Hello, Roboto
Roboto Thin & Thin Oblique
Roboto Light & Light Oblique
Roboto Regular & Regular ObliqueRoboto Medium & Medium ObliqueRoboto Bold & Bold Oblique
Roboto Black & Black Oblique
Roboto Condensed & Condensed ObliqueRoboto Bold CondensedBold Condensed Oblique
USE TYPOGRAPHYto provide STRUCTURE and emphasis
Colour
Holo != #33b5e5
Colour
Use your brand colour for accent
Use high-contrast colour for emphasis
ColourTouch feedback
Jolt of highcontrast
Sprinkles ofencouragement
Holo Light: 20% #999
(#33999999)
Holo Dark: 25% #ccc
(#40cccccc)
Branding
Information
Design
Interaction
Design
Visual
Design
Holo/AndroidYou
TOOLS
ANDROID HOLO COLORS
Generate Holo assets for UI
controls, using your brand’s
accent color
android-holo-colors.com
TOOLS
ACTION BAR STYLE GENERATOR
Generate Holo assets for the
action bar and tabs, using your
brand’s accent color
actionbarstylegenerator.com
Implementing Holo
Themes
res/values/styles.xml<style name="MyTheme" parent="android:Theme.Holo.Light"/>
minSdkVersion 11+
<style name="MyTheme" parent="Theme.AppCompat.Light"/>
res/values/styles.xml
minSdkVersion 7–11
AndroidManifest.xml<application ...
theme="@style/MyTheme">
Inherit from Holo styles…
Use the frameworkReference styles, dimensions and drawables from the current theme
Current theme value
(eqivilant to ?android:attr/baz)
<View style="?android:foo" .../>
<View android:minHeight="?android:bar" .../>
<View android:background="?android:baz" .../>
See android.R.attr for all style attributes
Usetheframework
Use the framework
<TextView style="?android:listSeparatorTextViewStyle" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Section header" />
2dp separator
14sp, bold, ALL CAPS
Use the framework
<TextView android:textAppearance= "?android:textAppearanceMedium" android:text="Sample item 1"
... />
<ImageButton style="?android:borderlessButtonStyle" ... />
18sp
Stateful background
Use the framework<LinearLayout android:orientation="vertical"
android:showDividers="middle" android:divider="?android:dividerHorizontal" ...>
<LinearLayout android:orientation="horizontal"
android:baselineAligned="false"
android:showDividers="middle" android:divider="?android:dividerVertical" android:dividerPadding="8dp" ...>
Padding creates
hierarchy
Use the framework
<LinearLayout style="?android:buttonBarStyle" ...>
<Button style="?android:buttonBarButtonStyle" ...>
Stateful background
Adds dividers
Style the framework
requestWindowFeature(
Window.FEATURE_INDETERMINATE_PROGRESS);setContentView(R.layout.activity_main);
...
setProgressBarIndeterminateVisibility(true);
MainActivity#onCreate
Activity indicator
Style the framework
<style name="MyTheme" parent="...">
<item name="android:actionBarStyle">@style/ActionBar</item></style>
Styled
activity indicator
<style name="Widget.ActionBar.ActivityIndicator" parent="..."> <item name="android:minWidth">48dp</item> <item name="android:maxWidth">48dp</item> <item name="android:minHeight">32dp</item> <item name="android:maxHeight">32dp</item></style>
<style name="ActionBar" parent="..."> <item name="android:indeterminateProgressStyle"> @style/Widget.ActionBar.ActivityIndicator</item></style>
Query theme values
Control inset by
Action Bar height
Query theme values
TypedValue value = new TypedValue(); getActivity().getTheme().resolveAttribute( android.R.attr.actionBarSize, value, true);
int actionBarSize = getResources() .getDimensionPixelSize(value.resourceId);
// now inset the map control
getMap().setPadding(0, actionBarSize, 0, 0);
Responsive Design
Why responsive?
Why responsive?
Combining content
Combining contentres/
...
layout/
activity_home.xml
activity_details.xml
fragment_list.xml
fragment_details.xml
layout-sw720dp/
activity_home.xml
...
Combining contentres/
...
layout/
activity_home.xml
activity_details.xml
fragment_list.xmlfragment_details.xml
layout-sw720dp/
activity_home.xml
...
Combining contentres/
...
layout/
activity_home.xml
activity_details.xml
fragment_list.xmlfragment_details.xml
layout-sw720dp/
activity_home.xml
...
Combining contentres/
...
layout/
activity_home.xml
activity_details.xml
fragment_list.xml
fragment_details.xml
layout-sw720dp/activity_home.xml
...
Combining contentSlidingPaneLayout
Combining contentSlidingPaneLayout<android.support.v4.widget.SlidingPaneLayout ... android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- First child is the left pane --> <fragment android:name="com.example.ListFragment"
android:layout_width="280dp" android:layout_height="match_parent"
android:layout_gravity="start" />
<!-- Second child is the right (content) pane --> <fragment android:name="com.example.DetailFragment"
android:layout_width="600dp" android:layout_height="match_parent"
android:layout_weight="1" />
</android.support.v4.widget.SlidingPaneLayout>
If combined pane widths
exceed screen width then
right pane overlaps
Lists and grids
Lists and grids
<GridView ... android:numColumns="@integer/num_columns" />
res/layout/activity_home.xml
<resources>
<integer name="num_columns">1</integer></resources>
res/values/integers.xml
<resources>
<integer name="num_columns">2</integer></resources>
res/values-w500dp/integers.xml
Lists and gridsMyAdapter#getView
if (convertView == null) {
int numColumns = getResources().getInteger(R.integer.num_columns);if (numColumns == 1) {convertView =
inflater.inflate(R.layout.list_item_layout, parent, false);
} else {convertView =
inflater.inflate(R.layout.grid_item_layout, parent, false);
}
}
...
Staggered grid https://github.com/etsy/
AndroidStaggeredGrid
Inside out design
Inside out design Going Responsive with Google Play
http://goo.gl/ceytgQ
Extract dimensions
headline_text_size
body_text_size
default_spacing_major
body_line_spacing<dimen name="default_spacing_major">32dp</dimen><dimen name="body_text_size">20sp</dimen><dimen name="body_line_spacing" format="float" type="dimen">1.2</dimen>
res/values-sw720dp/dimens.xml
res/values/dimens.xml<dimen name="default_spacing_major">16dp</dimen><dimen name="default_spacing_minor">8dp</dimen>
<dimen name="default_spacing_micro">4dp</dimen>
<dimen name="body_text_size">18sp</dimen><dimen name="body_line_spacing" format="float" type="dimen">1.0</dimen>
Maximum widths
Avoid overly wide line lengths for comfortable reading
Optimal measure is 45–75 chars per line
Maximum widths MaxWidthLinearLayout
http://goo.gl/zNY0jy
<com.example.MaxWidthLinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
app:layout_maxWidth="600dp" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum"
... />
</com.example.MaxWidthLinearLayout>
Responsive images
1dp separator<ImageView android:scaleType="centerCrop" android:src="@drawable/bacon"
android:layout_width="match_parent"
android:layout_height="match_parent" />
res/...
drawable/drawable-xhdpi/layout/layout-w600dp/layout-sw600dp-land/layout-sw720dp/values/values-sw600dp/values-sw720dp/...
Alternate density drawables for crispness
Alternate layouts for different sized displays
Alternate dimensions for different sized displays
Use the resources framework
Tips for designers
1 Use an Android phone and learn it’s patterns
2 Map your information design to android
navigation patterns
3 Know your pixels from your DIPs
http://youtu.be/zhszwkcay2A
4 Design layout at MDPI i.e. 1px = 1dp
5 Consider scale from the start
Awesome Android Design…
HOLOVISUAL
LANGUAGE
TECHNIQUES
RESPONSIVEDESIGN
TOOLS
WHY
IMPLEMENTING
Thanks!
+Android Developers
—Nick Butcher