Android UI Tips & Tricks

Slide 1

Slide 1 text

Android ∙ UI Tips & tricks Jun 18, 2016

Slide 2

Slide 2 text

Efeturi Money Android Developer / UI Enthusiast @efemoney_ @efemoney +EfeturiMoney

Slide 3

Slide 3 text

Important things to consider

Slide 4

Slide 4 text

The most important elements To pay attention to 1. Text 2. Icons 3. Images

Slide 5

Slide 5 text

1. Text 2. Icons 3. Images The most important elements to pay attention to

Slide 6

Slide 6 text

1. Text 2. Icons 3. Images The most important elements to pay attention to

Slide 7

Slide 7 text

1. Text 2. Icons 3. Images *drumroll* *ba dum tss*... The most important elements to pay attention to

Slide 8

Slide 8 text

1. Text 2. Icons 3. Images *drumroll* *ba dum tss*... 4. Space! The most important elements to pay attention to A simple way to add spaces in your existing layouts

Slide 9

Slide 9 text

1. Text 2. Icons 3. Images *drumroll* *ba dum tss*... 4. Space! The most important elements to pay attention to Also set via view padding and layout_margins.

Slide 10

Slide 10 text

Space is the difference between... A little more space makes your UI more usable and aesthetic

Slide 11

Slide 11 text

1. Text 2. Icons 3. Images *drumroll* *ba dum tss*... 4. Space 5. Layout! The most important elements to pay attention to

Slide 12

Slide 12 text

1. Text 2. Icons 3. Images *drumroll* *ba dum tss*... 4. Space 5. Layout 6. Color! The most important elements to pay attention to Color can be a powerful way of expressing brand and highlighting illustration in UI Check out material.google.com/style/color for more information

Slide 13

Slide 13 text

Avoiding common UI mistakes

Slide 14

Slide 14 text

Flat layout hierarchy and performance... Always aim for the flattest layout hierarchy to avoid heavy layout passes.

Slide 15

Slide 15 text

Flat layout hierarchy and performance... Reduce your number of views

Slide 16

Slide 16 text

Flat layout hierarchy and performance... Choose the right “Layout’ view subclass Especially apparent in adapterviews that can have thousands of items For example, a view inside a grid view inside a list view inside a relative layout could get laid out 8 times(!)

Slide 17

Slide 17 text

Use & | Avoid ... Appbar is a great example of a widget you can reuse across your entire app.

Slide 18

Slide 18 text

Use & | Avoid ...

Slide 19

Slide 19 text

Use & | Avoid ...

Slide 20

Slide 20 text

Some more tips... ● Be weary of images. They can be a dream or a worst nightmare. Load images on a background thread or even better use an image loader Glide (personal fave) or Picasso ● Eliminate unnecessary backgrounds

Slide 21

Slide 21 text

Stick to android patterns... Don’t try to port designs or UI components from iOS

Slide 22

Slide 22 text

Tools and libraries that help Some tools that help: ● Use an image loading library (Glide/Picasso) ● Hierarchy viewer ● Lint warnings ● Support library, compatible up to v7 (recently v9) ● Butterknife

Slide 23

Slide 23 text

Codelab

Slide 24

Slide 24 text

#BuildBetterApps

Slide 25

Slide 25 text

Thank you! Feel free to contact me. Also join the Android Developer G+ group plus.google. com/communities/1051 53134372062985968