Efficient Android Layouts (GOTO Conference)

Talk given about Android layouts at GOTO Conference Copenhagen in 2016.

Transcript

1. Efficient Android Layouts Dan Lew
2. “Give me the place to stand, and I shall move the earth.” ~Archimedes
3. “Give me a standing desk, and I shall write an Android app.” ~Me
4. ViewGroups
5. RelativeLayout ConstraintLayout LinearLayout FrameLayout Complex Simple
6. RelativeLayout / ConstraintLayout • Position views relative to each other • RelativeLayout: Slow • ConstraintLayout: Alpha
7. LinearLayout • Stack views vertically/horizontally • Weight distribution
8. But I <3 RelativeLayout • LinearLayout == sometimes slow • RelativeLayout == always slow • ConstraintLayout == savior • Profile!
9. FrameLayout • Positioning based on parent bounds • Overlapping Views • Clickable item backgrounds • Toggle container
12. <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 >
 
 <include
 layout="@layout/avatar_view"
 android:layout_width="48dp"
 android:layout_height="48dp"
 />
 
 <!-- Rest of layout here... -->
 </LinearLayout>
13. <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 >
 
 <include
 layout="@layout/avatar_view"
 android:layout_width="48dp"
 android:layout_height="48dp"
 />
 
 <!-- Rest of layout here... -->
 </LinearLayout>
14. <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 >
 
 <com.trello.view.AvatarView
 android:id="@+id/avatar_view"
 android:layout_width="48dp"
 android:layout_height="48dp"
 />
 
 <!-- Rest of layout here... -->
 </LinearLayout>
15. public class AvatarView extends FrameLayout {
 
 ImageView icon;
 TextView initials;
 
 public AvatarView(Context context, AttributeSet attrs) {
 super(context, attrs);
 
 LayoutInflater.from(context).inflate(R.layout.view_avatar, this);
 
 icon = (ImageView) findViewById(R.id.icon);
 initials = (TextView) findViewById(R.id.initials);
 }
 
 public void bind(Member member) {
 // ...Load icon into ImageView...
 // OR
 // ...Setup initials in TextView...
 }
 }
16. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 
 <TextView
 android:id="@+id/initials"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 />
 
 <ImageView
 android:id="@+id/icon"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 />
 
 </FrameLayout>
17. AvatarView (FrameLayout) FrameLayout ImageView TextView
18. public class AvatarView extends FrameLayout {
 
 ImageView icon;
 TextView initials;
 
 public AvatarView(Context context, AttributeSet attrs) {
 super(context, attrs);
 
 LayoutInflater.from(context).inflate(R.layout.view_avatar, this);
 
 icon = (TextView) findViewById(R.id.icon);
 initials = (TextView) findViewById(R.id.initials);
 }
 
 public void bind(Member member) {
 // ...Load icon into ImageView...
 // OR
 // ...Setup initials in TextView...
 }
 }
19. <merge xmlns:android="http://schemas.android.com/apk/res/android"
 >
 
 <TextView
 android:id="@+id/initials"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 />
 
 <ImageView
 android:id="@+id/icon"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 />
 
 </merge>
20. AvatarView (Framelayout) ImageView TextView
21. Custom Drawing
22. Step #1: onMeasure() (…sometimes you can skip this…)
23. onMeasure() • onMeasure() signature void onMeasure(int widthMeasureSpec, int heightMeasureSpec) • measureSpec - packed integer int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec);
24. MeasureSpec • EXACTLY - Must be that size • AT_MOST - Maximum width • UNDEFINED - Ideal width
25. onMeasure() protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int width; if (widthMode == MeasureSpec.EXACTLY) { width = widthSize; } else { int desiredWidth = 500; // Whatever calculation you want if (widthMode == MeasureSpec.AT_MOST) { width = Math.min(desiredWidth, widthSize); } else { width = desiredWidth; } } // ...to be continued... }
26. onMeasure() @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width; int height; // ...Calculate width and height... setMeasuredDimension(width, height); }
27. Step #2: onDraw() (this is up to you)
28. Custom Drawables • onMeasure() -> getIntrinsicHeight() / getIntrinsicWidth() • onDraw() -> draw() • https://speakerdeck.com/cyrilmottier/mastering-android-drawables
29. Styles
30. Styles • No style <View android:background=“#FF0000” /> • Style <!--- some_layout.xml --> <View style="@style/MyStyle" /> <!--- styles.xml -->
 <style name="MyStyle">
 <item name="android:background">#FF0000</item>
 </style>
31. Efficient • Semantically identical Views • All styled Views should change at once
32. Not Efficient • Single-use styles • Coincidentally using the same attributes <TextView
 android:id="@+id/title"
 android:textColor="@color/blue_200"
 android:textColorHint=“@color/grey_500" />
 
 <TextView
 android:id="@+id/body"
 android:textColor="@color/blue_200"
 android:textColorHint=“@color/grey_500" />
33. Not Efficient • Single-use styles • Coincidentally using the same attributes <TextView
 android:id="@+id/title"
 android:textColor="@color/blue_200"
 android:textColorHint=“@color/grey_500" />
 
 <TextView
 android:id="@+id/body"
 android:textColor="@color/blue_200"
 android:textColorHint=“@color/grey_500" />
34. Not Efficient • Single-use styles • Coincidentally using the same attributes <TextView
 android:id="@+id/title"
 android:textColor="@color/blue_200"
 android:textColorHint=“@color/grey_500" />
 
 <TextView
 android:id="@+id/body"
 android:textColor="@color/blue_200"
 android:textColorHint=“@color/grey_500" />
35. static final int NUM_COLUMNS = 3;
 
 static final int NUM_RETRIES = 3; static final int NUM_THREE = 3;
36. // static final int NUM_COLUMNS = 3;
 
 // static final int NUM_RETRIES = 3;
 static final int NUM_THREE = 3;
37. Themes
38. Themes • Affect multiple Views at once • Default styles • Configure system-created Views
39. • Application <application
 android:theme="@style/Theme.AppCompat"> • Activity <activity
 android:theme=“@style/Theme.AppCompat.Light”> • View <Toolbar
 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
 />
40. AppCompat • Material on all devices • Baseline themes/styles • Enables View theming pre-Lollipop
41. <style name="ColorTheme" parent="Theme.AppCompat">
 <item name="colorPrimary">#F00</item>
 <item name="colorPrimaryDark">#0F0</item>
 <item name="colorControlNormal">#00F</item>
 </style>
42. <style name="AppTheme" parent="Theme.AppCompat">
 <item name="buttonStyle">@style/MyButton</item>
 <item name="android:spinnerItemStyle">@style/MySpinnerItem</item>
 
 <item name="android:textAppearance">@style/MyText</item>
 <item name="android:textAppearanceInverse">@style/MyTextInverse</item>
 </style>
43. <style name="AttrTheme" parent="Theme.AppCompat">
 <item name="selectableItemBackground">@drawable/bg</item>
 </style> <!-- some_layout.xml -->
 <Button android:background="?attr/selectableItemBackground" />
44. Resources
45. v24 port xxxhdpi w411dp h731dp en_US
50. Resource Qualifier System • Define alternative resources for device configurations • Android automatically picks correct resource
52. values-sw600dp-port values-port values-sw600dp values not sw600dp or portrait not sw600dp not portrait
53. Resources as code • Resource == parameter • Parameter <-- device configuration
54. int square() {
 return 8 * 8;
 }
 int squareLarge() {
 return 16 * 16;
 } int square(int num) {
 return num * num;
 } VS
55. getResources().getBoolean(R.bool.is_portrait) <bool name="is_portrait">false</bool> <bool name="is_portrait">true</bool>
56. setContentView(R.layout.activity_main)
57. <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 
 <!-- ... -->
 
 <include layout="@layout/some_include" />
 
 <!-- ... -->
 
 </LinearLayout>
58. <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 
 <!-- ... -->
 
 <include layout="@layout/some_include" />
 
 <!-- ... -->
 
 </LinearLayout>
59. <TextView
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:textSize="24sp"
 android:textColor="#FF00FF"
 /> <TextView
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:textSize="16sp"
 android:textColor="#FF00FF"
 />
60. <TextView
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:textSize="@dimen/welcome_text_size"
 android:textColor="#FF00FF"
 /> <dimen name="welcome_text_size">24sp</dimen> <dimen name="welcome_text_size">16sp</dimen>
61. <style name="WelcomeText" parent="TextAppearance.AppCompat">
 <item name="android:textSize">24sp</item> <item name="android:textColor">#FF00FF</item>
 </style> <style name="WelcomeText" parent="TextAppearance.AppCompat">
 <item name="android:textSize">16sp</item> <item name="android:textColor">#FF00FF</item>
 </style>
62. <style name="WelcomeText" parent="TextAppearance.AppCompat">
 <item name="android:textSize">@dimen/welcome_text_size</item>
 <item name="android:textColor">#FF00FF</item>
 </style> <dimen name="welcome_text_size">24sp</dimen> <dimen name="welcome_text_size">16sp</dimen>
63. activity_main.xml TextView style=@style/WelcomeText some_include.xml some_include.xml portrait default textSize=16sp textSize=24sp sw600dp default
64. Drawables
65. Image: https://www.flickr.com/photos/ufv/8042499199 Design “I need this”
66. Design “Not enough” “I tweaked the color,
 here’s those assets again.”
67. Assets as code
68. Drawable XML • Built into Android • Simple shapes • State selectors • Layer lists
70. Button Outline <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle"
 >
 
 <solid android:color="@color/transparent" />
 
 <stroke
 android:width="1dp"
 android:color="@color/white"
 />
 
 <corners android:radius="@dimen/corner_radius_tiny" />
 
 </shape>
71. Button Selector <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
 <item>
 <selector>
 <item android:state_pressed="true">
 <shape android:shape="rectangle">
 <solid android:color="@color/blue_200" />
 
 <corners android:radius="@dimen/corner_radius_tiny" />
 </shape>
 </item>
 
 <item android:drawable="@color/transparent" />
 </selector>
 </item>
 
 <item android:drawable="@drawable/btn_welcome_outline" />
 
 </layer-list>
72. <?xml version="1.0" encoding="utf-8"?>
 <ripple xmlns:android="http://schemas.android.com/apk/res/android"
 android:color="@color/blue_200"
 >
 
 <item android:drawable="@drawable/btn_welcome_outline" />
 
 <item android:id="@android:id/mask">
 <shape android:shape="rectangle">
 <solid android:color="@color/white" />
 <corners android:radius="@dimen/corner_radius_tiny" />
 </shape>
 </item>
 
 </ripple> Button Selector (v21)
73. Button Versions button_welcome_outline.xml button_welcome.xml button_welcome.xml (with ripple)
74. Vector drawables
75. VectorDrawable != SVG Design :(
76. SVG -> VectorDrawable • Android Studio: New Vector Asset • Victor: github.com/trello/victor android {
 sourceSets {
 main {
 svg.srcDir 'src/main/svg'
 }
 }
 }
77. vs
79. Tinting Images • XML • Simple drawable.setColorFilter(color, PorterDuff.Mode.SRC_IN); • Comprehensive Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
 DrawableCompat.setTint(wrappedDrawable, color); Not backwards compatible
80. Thank You! • @danlew42 • danlew.net • speakerdeck.com/dlew