[Said Tahsin Dane] Material Design Custom Views

Presentation from GDG DevFest Ukraine 2015 - the biggest Google related event in the country. October 23-24, Lviv. Learn more at http://devfest.gdg.org.ua/

Transcript

1. Material Design Custom Views +SaidTahsinDane @tasomaniac
2. #dfua @tasomaniac Android Views What is View? Android SDK has some built-in Views TextView, ImageView, Button ViewGroup, LinearLayout, RelativeLayout ViewStub Isn’t the framework good enough?
3. #dfua @tasomaniac Android Views What are they responsible for? Attachment/Detachment Measuring, Drawing Saving UI state Handling Touch Events Listeners/Callbacks
4. Why custom Views?
5. #dfua @tasomaniac Why custom Views? View reuse Unique presentation Custom interactions Layout Optimizations Performance Build UIs that are not naturally possible
6. #dfua @tasomaniac ProfileView
7. #dfua @tasomaniac <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <ImageView android:id="@android:id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@android:id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp"/> </LinearLayout>
8. #dfua @tasomaniac TextView nameView = (TextView) profileView.findViewById(android.R.id. text1); ImageView iconView = (ImageView) profileView.findViewById(android.R.id. icon); nameView.setText(user.getName()) ; iconView.setImageResource(user.getIcon()) ;
9. #dfua @tasomaniac Ex: ProfileView public class ProfileView extends LinearLayout { public ProfileView(Context context) { super(context); } public ProfileView(Context context , AttributeSet attrs) { super(context, attrs); } }
10. #dfua @tasomaniac public class ProfileView extends LinearLayout { private final TextView textView; private final ImageView iconView; private User user; public ProfileView(Context context, AttributeSet attr) { super(context, attr); setOrientation(LinearLayout.HORIZONTAL); setGravity(Gravity.CENTER); inflate(context, R.layout.profile_view, this); textView = (TextView) findViewById(android.R.id.text1); iconView = (ImageView) findViewById(android.R.id.icon); } public void setUser(User user) { this.user = user; textView.setText(user.getName()); iconView.setImageResource(user.getIcon()); } }
11. #dfua @tasomaniac <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <ImageView android:id="@android:id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@android:id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp"/> </LinearLayout> <merge> <ImageView android:id="@android:id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:id="@android:id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp"/> </merge>
12. #dfua @tasomaniac public class ProfileView extends LinearLayout implements View.OnClickListener { public ProfileView(Context context, AttributeSet attr) { super(context, attr); ... setOnClickListener(this); } ... public void onClick(View v) { if (this.user != null) { Intent i = new Intent(getContext(), ProfileActivity.class); i.putExtra("user", this.user); getContext().startActivity(i); } } }
13. #dfua @tasomaniac Save State Data model should be separate from view state Save user interactions in progress Scroll position Active selections Active modes Uncommitted user input e.g. text entered
14. #dfua @tasomaniac @Override protected Parcelable onSaveInstanceState() { Bundle bundle = new Bundle(); bundle.putParcelable( "user", this.user); return bundle; } @Override protected void onRestoreInstanceState(Parcelable state) { Bundle bundle = (Bundle) state ; this.user = bundle.getParcelable( "user"); } Saving State of your View
15. Material Design
16. #dfua @tasomaniac Material Design! Yey! Use AppCompat to support Material Design Ripple Effects Widget Tinting Palette & ColorUtils Theme support
17. #dfua @tasomaniac Change the theme first! <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/colorPrimary</ item> <item name="colorPrimaryDark">@color/colorPrimaryDark</ item> <item name="colorAccent">@color/colorAccent</ item> </style>
18. #dfua @tasomaniac Use AppCompatActivity This will automatically use Material Design! public class MainActivity extends AppCompatActivity { }
19. #dfua @tasomaniac Extend your Views from AppCompat alternatives. AppCompatButton AppCompatCheckBox AppCompatEditText AppCompatSpinner AppCompatTextView ... In your custom Views
20. #dfua @tasomaniac Ripple Effect How to keep ripples in Custom Views? Be backward compatible
21. #dfua @tasomaniac Ripple Effect Use android:background="?attr/selectableItemBackground" or android:background="?attr/selectableItemBackgroundBorderless" as your background
22. #dfua @tasomaniac Ripple Effect For complicated views with images: <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:foreground="?attr/selectableItemBackground"> ………… </FrameLayout>
23. #dfua @tasomaniac Fixes Holo too!
24. #dfua @tasomaniac Widget Theming How do you normally achieve this? Introduced in Lollipop Available for all thanks to AppCompat
25. #dfua @tasomaniac <com.tasomaniac.widget.ProfileView android:layout_width="wrap_content" android:layout_height="wrap_content" android:theme="@style/Theme.AppCompat" /> Widget Theming
26. #dfua @tasomaniac What about selected states? Normal behavior
27. #dfua @tasomaniac What about selected states? Find the 3 differences in these images? WTF!
28. #dfua @tasomaniac Widget Theme’s to the rescue!
29. #dfua @tasomaniac Attrs in AppCompat It now contains almost all the attrs you may need. ?attr/actionBarSize ?attr/listPreferredItemHeight ?attr/listChoiceBackgroundIndicator or ?android:attr/textColorPrimary
30. #dfua @tasomaniac Access theme attrs Utility methods to access your theme ThemeUtils.getThemeAttrColor(context, R.attr.colorPrimary); Colors and Drawables ContextCompat.getColor(context, R.color.itemBackgroundColor); ContextCompat.getDrawable(context, R.color.itemBackground);
31. #dfua @tasomaniac Widget Tinting First introduced in Lollipop Available in backward-compatible way with AppCompat.
32. #dfua @tasomaniac Widget Tinting // Wrap the drawable so that future tinting calls work // on pre-v21 devices. Always use the returned drawable. drawable = DrawableCompat.wrap(drawable); DrawableCompat.setTint(drawable, Color.RED); // ...or a tint list DrawableCompat.setTintList(drawable, myColorStateList);
33. #dfua @tasomaniac Palette & ColorUtils Get color palette from your pics Vibrant, Muted Swatch
34. #dfua @tasomaniac Palette Palette.Swatch swatch = palette.getVibrantSwatch(); if (swatch != null) { titleView.setBackgroundColor(swatch.getRgb()); titleView.setTextColor(swatch.getTitleTextColor()); }
35. #dfua @tasomaniac ColorUtils int textColor = Color.WHITE; float minContrastRatio = 4.5f; // Min contrast ration of 1:4.5 int minAlpha = ColorUtils. calculateMinimumAlpha( textColor, backgroundColor, minContrastRatio); if (minAlpha != -1) { // There is an alpha value which has enough contrast, use it! return ColorUtils.setAlphaComponent(textColor, minAlpha); }
36. Thank you! Questions? bit.ly/MaterialDesignDFUA +SaidTahsinDane @tasomaniac
37. SECRET SLIDE!!!
38. WARNING! Dragons Ahead
40. TOLD YA