Tips, Tricks & Best Practices

Alen Sunny Stephen | Mobile Front End Developer

What’s new in v7 Support Library

Material DesignUI elements that used in material design

ToolBarGeneralizes the functionality of ActionBar for use within app layouts.

ActionBarDrawerToggleThe menu-to-arrow animation

SwitchCompatBackport of the Switch widget that was added in Android 4.0

GridLayoutSupport for the GridLayout layout object.

© RapidValue Solutions

What’s new in v7 Support Library

CardViewMaterial design compatible implementation for displaying data

RecyclerViewFlexible list view for providing a limited window into a large data set.

PaletteLets you extract prominent colors from an image.

SwipeRefreshLayoutRefresh the contents of a view with a vertical swipe gesture.

© RapidValue Solutions

UI implementation challenges

image courtesy : android.com

How to optimise your layout

● Use Hierarchy Viewer● Avoid unnecessary weight● Avoid Nested layouts● Use less Images and Draw vectors shapes● Reuse XML● Use Styles● Apply Nine-Patch Image for Stretchable backgrounds● Use Toolbar, ActionBar or its support library equivalent● Separate Layout and Styling Elements● Avoid deprecated usages (ldpi,fill_parent)● Support for Small Screens● Naming Conventions for ID and Resources● Reuse Code in Different Projects by Generic Naming

© RapidValue Solutions

Use Hierarchy Viewer

Avoid unnecessary weight

<RelativeLayout>

</RelativeLayout><View

android:id=”@+id/divider”android:centerHorizontal=”true” />

toLeftOf toRightOf

© RapidValue Solutions

Avoid Nested layouts

● Measure: 0.977ms● Layout: 0.167ms● Draw: 2.717ms

● Measure : 0.598ms● Layout : 0.110ms● Draw : 2.146ms

Use less Images and Draw vectors shapes

© RapidValue Solutions

Reuse XML

Write XML Layouts as reusable layouts, which will avoid duplicating the same layout with different names.

Use the <include> Tag

Use the <merge> Tag

Use the <fragment> Tag

© RapidValue Solutions

Use Styles

Defining styles in Android XML is similar to defining class in CSS. You can define a set of properties under one name and can apply it to any component. Also you can inherit from one style as in CSS

<?xml version="1.0" encoding="utf-8"?>

<resources>

<style name="CodeFont" parent="@android:style/TextAppearance.Medium">

<item name="android:layout_width">fill_parent</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:textColor">#00FF00</item>

<item name="android:typeface">monospace</item>

</style>

</resources>

© RapidValue Solutions

Apply Nine-Patch Image for Stretchable backgrounds

Sometimes you might need to give background as image for content where the length of the content is dynamic.For example-Chat Bubble, Custom Pop Up. In this scenario, you need to create a Nine-Patch image so that you can define the stretchable region inside that image.

© RapidValue Solutions

Use Toolbar, ActionBar or its support library equivalent

ActionBarActionBar Style Generator made the customization is easy.

ToolbarGeneralization of action bars for use within application layouts.

© RapidValue Solutions

Separate Layout and Styling Elements

dimens.xmlTo refer all your dimensions from a common xml

strings.xmlSeparate all hard coded layout strings to another xml.

colors.xmlGeneralization of action bars for use within application layouts.

© RapidValue Solutions

Avoid deprecated usages (ldpi,fill_parent)

ldpiNo need to use ldpi images in your projects anymore

fill_parentfill_parent is equivalent to match_parent

use xxhdpi/xxxhdpi use xxhdpi for project resources and xxxhdpi quality for app icon

© RapidValue Solutions

Support for Small Screens

res/layout/my_layout.xml

// layout for normal screen size ("default")

res/layout-large/my_layout.xml

// layout for large screen size

res/layout-xlarge/my_layout.xml

// layout for extra-large screen size

res/layout-xlarge-land/my_layout.xml //

layout for extra-large in landscape orientation

© RapidValue Solutions

Support for Small Screens

res/layout/main_activity.xml

# For handsets (smaller than 600dp available width)

res/layout-sw600dp/main_activity.xml

# For 7” tablets (600dp wide and bigger)

res/layout-sw720dp/main_activity.xml

# For 10” tablets (720dp wide and bigger)

© RapidValue Solutions

Naming Conventions for ID and Resources

For IDs you can follow this format

login_ed_usernamelogin_ed_passwordlogin_btn_submitlogin_txv_forgot_pass

Login stands for ‘which page’, followed by ‘which component’ and then ‘what it is for’.In general layoutname_component_name.This will help you to get a clear idea about the ID and can avoid looking into layout each time.

For resources you can follow this format

ic_action_addic_action_location (ActionBar Icons)ic_play, ic_save (General Icons)ic_tab_musicic_tab_more (Tab Icons)

© RapidValue Solutions

Reuse Code in Different Projects by Generic Naming

© RapidValue Solutions

What’s new in Lollipop ?

Material DesignNew UI elements, animation and activity transition effects

Vector DrawableLets you create a drawable based on an XML vector graphic

Animated Vector DrawableCombination of drawables to make animated vector drawable

ShadowsDefine shadows for any view.

Customizable UI widgets and app barsCustomizable UI widgets and app bar with color palettes that you control

© RapidValue Solutions