Android Support Libraries

1. the android support libraries @KellyShuster

2. quick history @KellyShuster

3. 2011 @KellyShuster

4. 2011 @KellyShuster ★ v4 support library ★ v13 support library

8. 2013 @KellyShuster ★ v7 gridlayout ★ v7 appcompat ○ ActionBar ○ ActionBarActivity ★ V8 renderscript

10. 2014 @KellyShuster ★ v7 cardview ★ v7 recyclerview ★ v7 palette ★ v17 leanback ★ wear UI

12. 2015 @KellyShuster ★ annotations ★ design support ★ custom tabs support ★ percent support ★ app recommendation support (TV) ★ V7 preference support ★ V14 preference support ★ V17 preference support (TV)

14. 2016 @KellyShuster ★ vector drawable support ★ v4 library split ○ support-compat ○ support-core-utils ○ support-core-ui ○ support-media-compat ○ support-fragment ★ exifInterface support

16. 2017 @KellyShuster ★ dynamic animation ★ emoji compat

17. @KellyShuster ★ v4 support library ★ v13 support library ★ v7 gridlayout ★ v7 appcompat ★ V8 renderscript ★ v7 cardview ★ v7 recyclerview ★ v7 palette ★ v17 leanback ★ wear UI ★ annotations ★ design support ★ custom tabs support ★ percent support ★ app recommendation support (TV) ★ V7 preference support ★ V14 preference support ★ V17 preference support (TV) ★ vector drawable support ★ v4 library split ○ support-compat ○ support-core-utils ○ support-core-ui ○ support-media-compat ○ support-fragment ★ exifInterface support ★ dynamic animation ★ emoji compat

18. a few general tips @KellyShuster

19. appcompat-v7:25.1.0 @KellyShuster

22. appcompat-v7:25.1.0 @KellyShuster nope

23. dependencies { compile "com.android.support:appcompat-v7:25.1.0" compile "com.android.support:recyclerview-v7:25.1.0" compile "com.android.support:design:25.1.0" ... }

24. buildscript { ext.support_lib_version = '25.1.0' ... } dependencies { compile "com.android.support:appcompat-v7:25.1.0" compile "com.android.support:recyclerview-v7:25.1.0" compile "com.android.support:design:25.1.0" ... }

25. buildscript { ext.support_lib_version = '25.1.0' ... } dependencies { compile "com.android.support:appcompat-v7: $support_lib_version " compile "com.android.support:recyclerview-v7: $support_lib_version " compile "com.android.support:design: $support_lib_version " ... }

26. ./gradlew -q dependencies app:dependencies

27. beware stubbed methods! @KellyShuster

28. TextView textView = (TextView) findViewById(R.id.text); ViewCompat.setElevation(textView, elevationInPx);

29. TextView textView = (TextView) findViewById(R.id.text); ViewCompat.setElevation(textView, elevationInPx);

30. TextView textView = (TextView) findViewById(R.id.text); ViewCompat.setElevation(textView, elevationInPx); ★ no lint warning ★ no compile error ★ just doesn’t work on pre-21 :(

31. popular components @KellyShuster

32. appcompat-v7 ViewPager @KellyShuster

33. <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/vpager" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> layout xml file

34. public class CustomPagerAdapter extends PagerAdapter { private ArrayList<String> myData; @Override public Object instantiateItem(ViewGroup container, int position) { FrameLayout flPage = (FrameLayout) LayoutInflater .from(container.getContext()) .inflate(R.layout.page_layout, null, false); TextView mytext = flPage.findViewById(R.id.pager_text); mytext.setText(strings.get(position)); container.addView(flPage); return flPage; } . . . } Custom pager adapter

35. public class CustomPagerAdapter extends PagerAdapter { . . . @Override public int getCount() { return myData.size(); } @Override public boolean isViewFromObject(View view, Object object) { return (view == object); } @Override public void destroyItem(ViewGroup container, int position, Object object){ ViewPager pager = (ViewPager) container; FrameLayout flPage = (FrameLayout) object; pager.removeView(flPage); } } custom pager adapter, cont’d.

36. PagerAdapter adapter = new CustomPagerAdapter(myData); ViewPager viewPager = findViewById(R.id.vpager); viewPager.setAdapter(adapter); activity java file

37. design TabLayout @KellyShuster

38. <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top"/> <android.support.v4.view.ViewPager android:id="@+id/vpager" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout> layout xml file

39. public class CustomPagerAdapter extends PagerAdapter { . . . @Override public CharSequence getPageTitle(int position) { return String.format("Title #%s", position); } . . . } custom pager adapter

40. PagerAdapter adapter = new CustomPagerAdapter(myData); ViewPager viewPager = findViewById(R.id.vpager); viewPager.setAdapter(adapter); TabLayout tabLayout = findViewById(R.id.tablayout); tabLayout.setupWithViewPager(viewPager, true); activity java file

41. appcompat-v7 Toolbar @KellyShuster

42.  <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">  </style> styles xml file

43. <android.support.v7.widget.Toolbar android:id="@+id/t_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize"> <LinearLayout> <ImageView /> <TextView /> </LinearLayout> </android.support.v7.widget.Toolbar> layout xml file

44. Toolbar toolbar = (Toolbar) findViewById(R.id.t_toolbar); setSupportActionBar(toolbar); activity java file

45. design CoordinatorLayout @KellyShuster

46. <android.support.design.widget.CoordinatorLayout>  <android.support.design.widget.AppBarLayout> <android.support.design.widget.CollapsingToolbarLayout> <include layout="@layout/view_toolbar_image" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>  <android.support.v4.widget.NestedScrollView> <LinearLayout/> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

51. <android.support.design.widget.CoordinatorLayout>  <android.support.design.widget.AppBarLayout> <android.support.design.widget.CollapsingToolbarLayout app:layout_scrollFlags="scroll|enterAlways" app:contentScrim="?attr/colorPrimary"> <include layout="@layout/view_toolbar_image" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout>  <android.support.v4.widget.NestedScrollView android:fillViewport="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>

54. design FloatingActionButton Snackbar

55. <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="56dp" android:layout_height="56dp" android:layout_gravity="bottom|right" android:layout_margin="16dp"/>

56. <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="56dp" android:layout_height="56dp" android:layout_gravity="bottom|right" android:layout_margin="16dp"/>

57. FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make( view, "Yay, I love 360|AnDev!", Snackbar.LENGTH_SHORT) .show(); } });

61. <android.support.design.widget.CoordinatorLayout> <LinearLayout> <TextView /> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="56dp" android:layout_height="56dp" android:layout_gravity="bottom|right" android:layout_margin="16dp"/> </android.support.design.widget.CoordinatorLayout>

62. <android.support.design.widget.CoordinatorLayout> <LinearLayout> <TextView /> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="56dp" android:layout_height="56dp" android:layout_gravity="bottom|right" android:layout_margin="16dp"/> </android.support.design.widget.CoordinatorLayout>

63. design TextInputLayout

64. <android.support.design.widget.TextInputLayout android:id="@+id/til_first_name" style="@style/Theme.TextInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:errorTextAppearance="@style/Theme.TextInputLayoutError"> <TextInputEditText android:id="@+id/tiet_first_name" style="@style/Theme.EditText.NewStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/common_hint_first_name" android:imeOptions="actionNext" android:inputType="textPersonName"/> </android.support.design.widget.TextInputLayout>

68. <style name="Theme.TextInputLayout" parent="TextAppearance.AppCompat">  <item name="android:textColorHint">@color/gray_94</item> <item name="android:textColor">@color/gray_94</item>  <item name="hintTextAppearance">@style/Theme.Text.Subhead.Reg.94</item> </style> styles

69. <style name="Theme.TextInputLayoutError" parent="TextAppearance.AppCompat"> <item name="android:textColor">@color/darkest_pink</item> </style> styles

70. <style name="Theme.EditText.NewStyle" parent="Theme.AppCompat.Light.DarkActionBar">  <item name="colorControlNormal">@color/gray_cb</item>  <item name="colorControlActivated">@color/gray_cb</item> <item name="android:textColor">@color/gray_4a</item> <item name="android:textColorHighlight">@color/gray_cb</item> . . . </style> styles

71. @Override public void setFirstNameInputStateValid() { tilFirstName.setError(null); tilFirstName.setErrorEnabled(false); } @Override public void setFirstNameInputStateError() { tilFirstName.setErrorEnabled(true); tilFirstName.setError(getString( R.string.common_invalid_first_name)); }

75. percent PercentRelativeLayout

76. <android.support.percent.PercentRelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/centered_image_2" android:layout_gravity="center" android:contentDescription="Android Robot" android:src="@mipmap/ic_launcher" app:layout_heightPercent="30%" app:layout_widthPercent="50%"/> </android.support.percent.PercentRelativeLayout>

77. <android.support.percent.PercentRelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/centered_image_2" android:layout_gravity="center" android:contentDescription="Android Robot" android:src="@mipmap/ic_launcher" app:layout_heightPercent="30%" app:layout_widthPercent="50%"/> </android.support.percent.PercentRelativeLayout>

78. constraint-layout ConstraintLayout

79. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Constraint Layout Demo" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginBottom="8dp" android:layout_marginRight="8dp" app:layout_constraintRight_toRightOf="parent" android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent"/> </android.support.constraint.ConstraintLayout>

80. support-vector-drawable vector

81. <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:fillColor="#FF000000" android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/> </vector>

82. <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:fillColor="#FF000000" android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/> </vector>

83. android { defaultConfig { . . . vectorDrawables.useSupportLibrary = true } } dependencies { . . . compile "com.android.support:support-vector-drawable:26.0.0" }

86. <ImageView android:id="@+id/imageView" android:layout_width="240dp" android:layout_height="280dp" android:layout_centerInParent="true" app:srcCompat="@drawable/ic_android_black_24dp"/>

87. <ImageView android:id="@+id/imageView" android:layout_width="240dp" android:layout_height="280dp" android:layout_centerInParent="true" app:srcCompat="@drawable/ic_android_black_24dp"/>

88. ImageView ivBugDroid = (ImageView) findViewById(imageView); ivBugDroid.setImageDrawable(AppCompatResources.getDrawable( this, R.drawable.ic_android_black_24dp));

89. ImageView ivBugDroid = (ImageView) findViewById(imageView); ivBugDroid.setImageDrawable(AppCompatResources.getDrawable( this, R.drawable.ic_android_black_24dp));

90. <ImageView android:id="@+id/imageView" android:layout_width="240dp" android:layout_height="280dp" android:layout_centerInParent="true" android:src="@drawable/ic_android_black_24dp"/>

91. 25.0.0 to 25.3.1 @KellyShuster

92. support-v7 ArraySet

93. ArraySet @KellyShuster ★ previously only available in API 23+

94. ArraySet @KellyShuster ★ previously only available in API 23+ ★ now in v4 lib as of 25.1.0

95. ArraySet @KellyShuster ★ previously only available in API 23+ ★ now in v4 lib as of 25.1.0 ★ more efficient than traditional HashSet

96. ArraySet @KellyShuster ★ previously only available in API 23+ ★ now in v4 lib as of 25.1.0 ★ more efficient than traditional HashSet ★ similar to ArrayMap, but contains only 1 item per entry

97. ArraySet @KellyShuster ★ previously only available in API 23+ ★ now in v4 Lib as of 25.1.0 ★ more efficient than traditional HashSet ★ similar to ArrayMap, but contains only 1 item per entry ★ not for large items (slower than HashSet) ○ hundreds of items == OK

98. ArraySet @KellyShuster ★ previously only available in API 23+ ★ now in v4 Lib as of 25.1.0 ★ more efficient than traditional HashSet ★ similar to ArrayMap, but contains only 1 item per entry ★ not for large items (slower than HashSet) ○ hundreds of items == OK ★ shrinks as items are removed ○ you have no control over shrinking

99. design BottomNavigationView

100. <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_nav" android:layout_width="match_parent" android:layout_height="56dp" android:layout_alignParentBottom="true" app:menu="@menu/bottom_nav_items"/>

101. <android.support.design.widget.BottomNavigationView android:id="@+id/bottom_nav" android:layout_width="match_parent" android:layout_height="56dp" android:layout_alignParentBottom="true" app:menu="@menu/bottom_nav_items"/>

102. <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/action_search" android:title="Search (black)" android:icon="@android:drawable/ic_menu_search" /> <item android:id="@+id/action_camera" android:title="Camera (blue)" android:icon="@android:drawable/ic_menu_camera" /> <item android:id="@+id/action_email" android:title="Email (red)" android:icon="@android:drawable/ic_dialog_email" /> </menu>

103. <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/action_search" android:title="Search (black)" android:icon="@android:drawable/ic_menu_search" /> <item android:id="@+id/action_camera" android:title="Camera (blue)" android:icon="@android:drawable/ic_menu_camera" /> <item android:id="@+id/action_email" android:title="Email (red)" android:icon="@android:drawable/ic_dialog_email" /> </menu>

104. BottomNavigationView bottomNav = (BottomNavigationView) findViewById(R.id.bottom_nav); bottomNav.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.action_search: ivBugDroid.setImageDrawable(...); return true; case R.id.action_camera: ivBugDroid.setImageDrawable(...); return true; case R.id.action_email: ivBugDroid.setImageDrawable(...); return true; } return false; } });

107. what’s new in support 26 @KellyShuster

108. API 14+

109. maven support @KellyShuster

110. buildscript { repositories { jcenter() } dependencies { classpath 'com.android.tools.build:gradle:2.3.3' } } allprojects { repositories { jcenter() maven { url "https://maven.google.com" } } }

113. fonts @KellyShuster

114. <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button_constraint" android:layout_margin="10dp" android:fontFamily="@font/bellefair_regular" android:text="This is fancy stuff!" android:textSize="24dp" android:visibility="visible"/>

115. <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button_constraint" android:layout_margin="10dp" android:fontFamily="@font/bellefair_regular" android:text="This is fancy stuff!" android:textSize="24dp" android:visibility="visible"/>

116. TextView textView2 = (TextView) findViewById(R.id.text2); Typeface tfBelleFair = ResourcesCompat.getFont( this, R.font.bellefair_regular); textView2.setTypeface(tfBelleFair);

117. TextView textView2 = (TextView) findViewById(R.id.text2); Typeface tfBelleFair = ResourcesCompat.getFont( this, R.font.bellefair_regular); textView2.setTypeface(tfBelleFair);

118. font families @KellyShuster

119. <font-family xmlns:app="http://schemas.android.com/apk/res-auto"> <font app:font="@font/bellefair_regular" app:fontStyle="normal" app:fontWeight="400"/> </font-family>

120. <style name="customfontstyle" parent="@android:style/TextAppearance.Small"> <item name="android:fontFamily">@font/bellefair_regular</item> </style>

121. <TextView android:id="@+id/text2" style="@style/customfontstyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/text" android:layout_margin="10dp" android:text="This is regular stuff" android:textSize="24dp" android:visibility="visible"/>

122. autoscale TextView @KellyShuster

123. <TextView android:layout_width="wrap_content" android:layout_height="100dp" android:text="Layout Height 100dp" app:autoSizeMaxTextSize="100sp" app:autoSizeMinTextSize="12sp" app:autoSizeStepGranularity="2sp" app:autoSizeTextType="uniform"/> <TextView android:layout_width="wrap_content" android:layout_height="10dp" android:text="Layout Height 10dp" app:autoSizeMaxTextSize="100sp" app:autoSizeMinTextSize="12sp" app:autoSizeStepGranularity="2sp" app:autoSizeTextType="uniform"/>

128. findViewById @KellyShuster

129. All instances of the findViewById() method now return <T extends View> T instead of View

130. thank you! @KellyShuster

131. Resources ● Coordinator Layout https://medium.com/google-developers/intercepting-everything-with-coordinatorlayout-behaviors-8c6adc140c26 ● Huyen Tue Dao “Cool Constraint Layout”https://www.youtube.com/watch?v=Xx4aRI3oQbM ● Bottom Navigation View flow https://material.io/guidelines/components/bottom-navigation.html# ● Google IO What’s New in Support Library 2017https://www.youtube.com/watch?v=V6-roIeNUY0

132. References ● Royal Gorge Bridge http://royalgorgebridge.com/ ● Snackbar gif https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-usage ● TextInputLayout Images https://stackoverflow.com/questions/35775919/edittext-added-is-not-a-textinputedittext-please-switch-to-us ing-that-class-ins ● Crying Pikachu gif https://giphy.com/search/sad-pikachu ● Ice Cream Sandwich http://cookdiary.net/ice-cream-sandwich/ ● Happy Pokemon gif http://rebloggy.com/post/gif-pikachu-pokemon-happy-good-yay-aww-yes-jump-shiny-togepi-bulbasaur-jumping-g/ 77419268976 ● SVG icon http://www.clker.com/clipart-336030.html

Android Support Libraries

Kelly Shuster

Android Support Libraries