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

More Decks by Rebecca Franks

Other Decks in Programming


  1. 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
  2. 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
  3. 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
  4. Draw Process in Android Inflation Measure Layout Draw - onDraw()

    Parent Draws Parent tells children to draw
  5. LinearLayout - Aligns children in a single direction - horizontal

    or vertical - Can use weights (but please avoid this!) <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <EditText... /> <EditText ... /> <Button ... /> </LinearLayout>
  6. RelativeLayout - Layout that allows you to align objects relative

    to each other or relative to the parent <RelativeLayout ..> <EditText android:id="@+id/name" ... /> <Spinner android:id="@+id/dates" android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_below="@id/name" android:layout_alignParentRight="true" /> </RelativeLayout>
  7. 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
  8. ScrollView & NestedScrollView - Allows the view hierarchy placed within

    it to be scrolled - Extends FrameLayout - only one child NestedScrollView - Allows scrolling within another ScrollView
  9. 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
  10. 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
  11. Constraints - A constraint is the relationship between two views

    in the layout - Controls how those views will be positioned within the layout.
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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 <include> tag to include a layout <include layout="@layout/toolbar" />
  17. 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
  18. 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.
  19. Custom View - Extend View / FrameLayout - Define custom

    attributes on View <com.dvt.android.presentation.video.view.VideoPlayerView 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"> </com.dvt.android.presentation.video.view.VideoPlayerView>
  20. 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(); } }
  21. 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!?!
  22. 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
  23. Hierarchy Viewer/ Layout Inspector - Visualize your apps view hierarchy

    - Profiles rendering speed - Good for: - Simplifying view hierarchy - Finding rendering bottlenecks
  24. GPU Overdraw - Colour coding to show how many times

    a pixel is drawn on the screen - Useful for: - Reducing rendering overhead
  25. 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
  26. 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
  27. Design Support Library - https://material.io/components/android/catalog/ - FloatingActionButton - NavigationDrawer -

    TextInputLayout - Toolbar - CardView - TabLayout - BottomNavigationView - BottomSheet - Snackbar
  28. 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
  29. Task 1 Create a layout that will be used in

    a RecyclerView with 3 TextViews and an ImageView.
  30. Task 2 Create a layout with 3 buttons at the

    bottom, an ImageView at the top, a caption and the address.
  31. Task 3 - My solution Build this screen using ConstraintLayout

    Accent Color: #FF1744 Resources: http://bit.ly/droid-layout https://github.com/riggaroo/ConstraintLayoutDemo
  32. 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