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

Philly ETE 2017: Loving Lean Android Layouts

Philly ETE 2017: Loving Lean Android Layouts

Huyen's talk at Philly ETE on performance and efficiency in Android layouts.

Huyen Tue Dao

April 18, 2017
Tweet

More Decks by Huyen Tue Dao

Other Decks in Technology

Transcript

  1. LOVING LEAN ANDROID LAYOUTS <LinearLayout
 android:orientation="horizontal"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1">
 


    <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="@string/help_im_being_repressed"
 android:textStyle="bold"
 style="@style/TextAppearance.AppCompat.Body1" />
 
 <ImageView
 android:layout_width="0dp"
 android:layout_height=“@dimen/image_height"
 android:layout_weight="2"
 android:src="@drawable/berries_plate"
 android:scaleType="centerCrop"
 android:contentDescription="@null" />
 
 <ImageView
 android:layout_width="0dp"
 android:layout_height="@dimen/image_height"
 android:layout_weight="1"
 android:src="@drawable/creme_brulee"
 android:scaleType="centerCrop"
 android:contentDescription="@null" />
 
 </LinearLayout>
  2. PARENT MEASURES EACH CHILD CHILD CALCULATES MEASURED WIDTH/HEIGHT MEASURE OWN

    CHILDREN (IF ANY) HOW ANDROID DRAWS LAYOUTS MEASURE LAYOUT DRAW
  3. PERFORMANCE = RESOURCES USED ∝COMPLEXITY = # VIEWS/DEPTH OF HIERARCHY

    = # EXECUTIONS OF onMeasure()/onLayout() BAD PERFORMANCE = UI JANK
  4. CHANGE IN SIZE/POSITION STARTS MEASURE/LAYOUT STARTING AT ROOT. SOME LAYOUTS

    NEED MULTIPLE MEASURE/LAYOUT PASSES, E.G. RELATIVELAYOUT LISTS MAKE MANY COPIES OF SAME LAYOUT DEEP HIERARCHIES INCREASE COMPLEXITY AND DEPENDENCY WHERE IS THE PROBLEM?
  5. SYSTRACE FINDING PROBLEMS SYSTEM + APPLICATION PROCESS EXECUTION DATA DATA

    TRACE → INTERACTIVE REPORTS SMOOTH UI → 60FPS → 16.6MS/FRAME
  6. DUMPSYS FINDING PROBLEMS SYSTEM SERVICES STATUS FRAMES OF ANIMATION adb

    shell dumpsys gfxinfo <PACKAGE_NAME> DETAILED FRAME TIMING INFO adb shell dumpsys gfxinfo <PACKAGE_NAME> framestats
  7. <LinearLayout…>
 
 <TextView…
 style="@style/StyleA" />
 
 <TextView…
 style="@style/StyleB" />
 


    <TextView…
 style="@style/StyleA" />
 
 </LinearLayout> 4 VIEWS, 2 LEVELS
  8. <LinearLayout >
 
 <LinearLayout>
 
 <TextView />
 
 <TextView />


    
 </LinearLayout>
 
 <TextView />
 
 </LinearLayout> 5 VIEWS, 3 LEVELS
  9. REFERENCES 63 ANDROID PERFORMANCE PATTERNS, WHY 60FPS? https://youtu.be/CaMTIgxCSqU DEVELOPING FOR

    ANDROID: THE NAUGHTY BITS https://youtu.be/Q2qQoJlwqlk?t=36m4s HIERARCHY VIEWER https://developer.android.com/studio/profile/hierarchy-viewer.html LAYOUT INSPECTOR http://tools.android.com/tech-docs/layout-inspector
  10. REFERENCES 64 TESTING DISPLAY PERFORMANCE http://developer.android.com/training/testing/performance.html ANALYZING UI PERFORMANCE WITH

    SYSTRACE http://developer.android.com/tools/debugging/systrace.html OPTIMIZING LAYOUT HIERARCHIES http://developer.android.com/training/improving-layouts/optimizing-layout.html ANDROID PERFORMANCE PATTERNS, DOUBLE LAYOUT TAXATION https://www.youtube.com/watch?v=dB3_vgS-Uqo ANDROID PERFORMANCE PATTERN, INVALIDATIONS, LAYOUTS, AND PERFORMANCE https://youtu.be/we6poP0kw6E
  11. REFERENCES 65 BUILD A RESPONSIVE UI WITH CONSTRAINTLAYOUT developer.android.com/training/constraint-layout/index.html ANDROID

    DEVELOPERS BACKSTAGE: EPISODE 50: CONSTRAINT LAYOUT androidbackstage.blogspot.com/2016/06/episode-50-constraint-layout.html CUSTOM VIEWGROUPS https://sriramramani.wordpress.com/2015/05/06/custom-viewgroups/ MEASURE, LAYOUT, DRAW, REPEAT: CUSTOM VIEWS AND VIEWGROUPS https://youtu.be/dLl0ovmta6A