Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mastering Android Layouts - Workshop Slides

Mastering Android Layouts - Workshop Slides

In this 4 hour workshop, Rebecca walked through the different types of layouts in Android and where they are useful. She then demonstrated how to use ConstraintLayout and what the different tool support is like with ConstraintLayout. The audience then built 3 different layouts using ConstraintLayout to try and better their skills with ConstraintLayout.

Audience: Graduate/Junior Android Developers
Location: Dynamic Visual Technologies Johannesburg, South Africa. (DVT)

Rebecca Franks

August 11, 2017
Tweet

More Decks by Rebecca Franks

Other Decks in Programming

Transcript

  1. Mastering Android Layouts -
    Workshop
    Rebecca Franks

    View Slide

  2. Aim for this workshop
    - Be comfortable with different layout types
    - Be comfortable with ConstraintLayout and the layout editor
    - Understand when to choose what type of layout
    - Know how to write custom layouts
    - Know how to profile layouts and improve them

    View Slide

  3. Let’s try build this layout

    View Slide

  4. Draw Process in Android
    Inflation
    Measure
    Layout
    Draw
    Uses a Depth-First Traversal
    Source: Huyen Tue Dao
    https://speakerdeck.com/queencodemonkey/philly-ete-
    2017-loving-lean-android-layouts

    View Slide

  5. Draw Process in Android
    Inflation
    Measure - onMeasure
    Layout
    Draw
    Parent will
    measure each
    child
    Child calculates
    measured width
    and height
    Measure own (if
    any) children

    View Slide

  6. Draw Process in Android
    Inflation
    Measure
    Layout - onLayout()
    Draw
    Parent sizes
    and positions
    child

    View Slide

  7. Draw Process in Android
    Inflation
    Measure
    Layout
    Draw - onDraw()
    Parent Draws
    Parent tells
    children to
    draw

    View Slide

  8. Types of Android Layouts

    View Slide

  9. LinearLayout
    - Aligns children in a single direction - horizontal or
    vertical
    - Can use weights (but please avoid this!)
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >


    ... />

    View Slide

  10. RelativeLayout
    - Layout that allows you to align objects relative
    to each other or relative to the parent


    android:id="@+id/dates"
    android:layout_below="@id/name"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/times" />
    android:id="@id/times"
    android:layout_below="@id/name"
    android:layout_alignParentRight="true" />

    View Slide

  11. FrameLayout
    - Generally used to hold one single child view
    (or create a Frame around something :) )
    - Child views are drawn in stack, most recent
    on top
    - Can add multiple views and control “z-order”
    - Useful for:
    - Hiding/showing error layouts
    - Fragment stacking
    - Overlaying content
    - Can set padding and margins

    View Slide

  12. ScrollView & NestedScrollView
    - Allows the view hierarchy placed within it to be
    scrolled
    - Extends FrameLayout - only one child
    NestedScrollView
    - Allows scrolling within another ScrollView

    View Slide

  13. ConstraintLayout

    View Slide

  14. ConstraintLayout
    - Released at Google I/O 2016
    - Very similar to iOS layouts
    - Great IDE support
    - Ability to do complex layouts
    - Better performance due to less nesting required
    - Supports API +9
    - Not bundled as part of Android SDK
    - Better UI builder

    View Slide

  15. ConstraintLayout
    - Cassowary algorithm
    - Constraints are expressed as a set of equations :
    a[1]x[1] + ... + a[n]x[n] = b
    a[1]x[1] + ... + a[n]x[n] <= b
    a[1]x[1] + ... + a[n]x[n] >= b

    View Slide

  16. DEMO: Constraint Layout
    Walkthrough

    View Slide

  17. Constraints
    - A constraint is the relationship between two views in the layout
    - Controls how those views will be positioned within the layout.

    View Slide

  18. Chains
    - Specific kind of constraint which allow us to share space between the
    views within the chain
    - Control how the available space is divided between them
    - Similar to weights in LinearLayout

    View Slide

  19. Guidelines
    - A guideline is a visual guide which will not be seen at runtime that is
    used align other views to
    - Can be oriented either horizontally or vertically

    View Slide

  20. Dimensions
    - Fixed aspect ratio
    - Useful for images or Video players etc
    - Can also use PercentLayout (but why? :) )
    - Specify size of view with dimension w:h

    View Slide

  21. Barriers
    - A Barrier is a virtual view, similar to a Guideline, to which we can
    constrain objects.
    - Barrier is determined by dimensions of multiple views

    View Slide

  22. View Slide

  23. Reusing Layouts
    - Many ways to reuse layouts
    - If exactly the same list of views, use a RecyclerView, don’t duplicate the views over and
    over
    - Ways to reuse layouts:
    - Extract complex View code into a Custom View if required
    - Extract commonly used elements into common layout and then use tag to
    include a layout

    View Slide

  24. Other Layout types
    - AbsoluteLayout - Avoid don’t specify absolute positions!
    - GridLayout - Avoid and rather use RecyclerView
    - GridView/ListView - Avoid and rather use RecyclerView
    - TabHost - Avoid and rather use ViewPager with Design TabLayout
    - TableLayout - Only use if you really need to
    - Space - can be used to create gaps between views if required, probably
    not needed often

    View Slide

  25. Custom Views

    View Slide

  26. Custom Views
    - Compound View
    - Set of views that are combined
    together to create a “compound
    view”
    - i.e. a Video Player View, that
    contains the video player controls
    and the video player.
    - Custom View
    - Draw on a canvas, circles squares
    etc.

    View Slide

  27. Custom View
    - Extend View / FrameLayout
    - Define custom attributes on View
    android:id="@+id/video_player_widget"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:playIcon="@drawable/red_live_tv_play"
    app:playText="@string/activity_live_tv_play"
    app:prePlayImage="@color/live_tv_video_background"
    app:showRestartButton="false">

    View Slide

  28. Custom View





    View Slide

  29. Custom View
    public class VideoPlayerView extends FrameLayout {
    public VideoPlayerView(Context context, AttributeSet attrs) {
    super(context, attrs);
    TypedArray a = context.obtainStyledAttributes(attrs,
    R.styleable.VideoPlayerView, 0, 0);
    Drawable imageViewPlayIcon =
    a.getDrawable(R.styleable.DStvVideoPlayerView_playIcon);
    a.recycle();
    }
    }

    View Slide

  30. Performance Tools for layouts

    View Slide

  31. Where are the problems?
    Deep Hierarchies increase complexity

    View Slide

  32. Where are the problems?
    Change in size/position
    Starts measure/layout starting at root

    View Slide

  33. Where are the problems?
    Some layouts need multiple
    measure/layout passes ie
    RelativeLayout, weights on
    LinearLayout

    View Slide

  34. Where are the problems?
    Lists of many copies of same
    complex layout

    View Slide

  35. Problems with Android Layouts
    - Difficult to create complex layouts
    - Nesting becomes a big problem for performance -> less layouts the
    better
    - Number of Executions of onMeasure()/onLayout() cause perf issues
    - JANK
    - HOW DO I KNOW WHAT I’M DOING WRONG!?!

    View Slide

  36. Why should you care about performance?
    - You need to render layout at 60FPS
    - Leaves you with 16ms to draw one frame. (one render to the screen)
    - If you don’t manage to draw a view in that time or less, the System
    won’t render it and it will be classified as a SKIPPED FRAME
    - This term is then known as JANK
    - You need to be able to draw, only what you need, when you need it.
    - You don’t want to be redrawing the same thing over and over

    View Slide

  37. Hierarchy Viewer/ Layout Inspector
    - Visualize your apps view hierarchy
    - Profiles rendering speed
    - Good for:
    - Simplifying view hierarchy
    - Finding rendering bottlenecks

    View Slide

  38. DEMO: Layout Inspector
    Walkthrough

    View Slide

  39. GPU Overdraw
    - Colour coding to show how many
    times a pixel is drawn on the screen
    - Useful for:
    - Reducing rendering overhead

    View Slide

  40. Profile GPU Rendering
    - Quick Visual representation of how
    much time it takes to render the
    frames of a UI view.
    - 16ms per frame benchmark
    - Good for:
    - Looking for spikes in rendering
    frames
    - Quickly gauging performance
    of 16ms benchmark

    View Slide

  41. Making your application look
    good

    View Slide

  42. Design in Android have come a long way
    Building layouts has too...

    View Slide

  43. Material Design
    - No one likes an ugly app
    - Use Material design guidelines, palettes, patterns etc - material.io
    - Don’t use Holo stuff!
    - Use the design support libraries
    - Your app will look great - easily

    View Slide

  44. Design Support Library
    - https://material.io/components/android/catalog/
    - FloatingActionButton
    - NavigationDrawer
    - TextInputLayout
    - Toolbar
    - CardView
    - TabLayout
    - BottomNavigationView
    - BottomSheet
    - Snackbar

    View Slide

  45. General Layout Tips
    - Don’t nest weights
    - Don’t have useless views
    - Don’t nest your layouts too deep
    - Take Lints Advice!
    - Don’t draw in the same area lots of times!
    - Know the difference between RecyclerView and ListView
    - Use Support Library components over system components (up to date
    and bugs get fixed!)
    - Use Material design as default, please no Holo Looks

    View Slide

  46. Q & A

    View Slide

  47. Task 1
    Create a layout that will be used in a
    RecyclerView with 3 TextViews and an
    ImageView.

    View Slide

  48. Task 2
    Create a layout with 3 buttons at the
    bottom, an ImageView at the top, a
    caption and the address.

    View Slide

  49. Task 3
    Build this screen using
    ConstraintLayout
    Accent Color: #FF1744
    Resources:
    http://bit.ly/droid-layout

    View Slide

  50. Task 3 - My solution
    Build this screen using ConstraintLayout
    Accent Color: #FF1744
    Resources:
    http://bit.ly/droid-layout
    https://github.com/riggaroo/ConstraintLayoutDemo

    View Slide

  51. Resources
    - Follow these people on twitter:
    - Nicolas Roard https://twitter.com/camaelon
    - John Hofard https://twitter.com/johnhoford
    - Huyen Tue Dao https://twitter.com/queencodemonkey
    - Mark Allison https://twitter.com/MarkIAllison
    - ConstraintLayout Resources
    - https://www.youtube.com/watch?v=yT22cqCGjQQ
    - https://www.youtube.com/watch?v=Xx4aRI3oQbM
    - http://wiresareobsolete.com/2016/07/constraintlayout-part-1/
    - http://wiresareobsolete.com/2016/07/constraintlayout-part-2/
    - https://codelabs.developers.google.com/codelabs/constraint-layout/#0

    View Slide