1. Recommended Material
Components for your app.
Monthira Chayabanjonglerd (Mint)
Android Developer @ Ookbee U. Co.,Ltd.
Blogger @ MikkiPastel, Writer @ Blacklenspub

2. Recommended Components
Snackbar
Text Field Chips Bottom Navigation
Button

3. Brief

6. Plaid
https://github.com/nickbutcher/plaid

7. No Toast, Please Snackbar

9. SnackBar
.
Toast SnackBar

10. Snackbar : Toast
.
Toast.makeText(
this,
"You're in Android Bangkok 2019",
Toast.LENGTH_SHORT
).show()
Length
- Toast.LENGTH_SHORT
- Toast.LENGTH_LONG

11. Snackbar
.
Snackbar.make(
rootview,
"You're in Android Bangkok 2019",
Snackbar.LENGTH_SHORT
).show()
Length
- Snackbar.LENGTH_INDEFINITE
- Snackbar.LENGTH_SHORT
- Snackbar.LENGTH_LONG

12. Snackbar
Snackbar.make(
rootview,
"You're in Android Bangkok 2019",
Snackbar.LENGTH_SHORT
).show()
Toast.makeText(
this,
"You're in Android Bangkok 2019",
Toast.LENGTH_SHORT
).show()

13. Snackbar with Action
. Snackbar.make(
rootview,
"Connection failed.",
Snackbar.LENGTH_SHORT
).setAction("try again") {
//TODO
}.show()

14. Snackbar
.

16. multiple Button type

17. Button Type
MaterialButton FloatingActionButton

18. Button Type
.
Extended FloatingActionButton

20. MaterialButton : Style
.
Text Button
Filled Button (default) Outline Button
Icon Button

21. .
MaterialButton : Icon Button
LinearLayout
orientation="horizontal
ImageView
layout_width="wrap_content"
layout_height="wrap_content"
TextView
layout_width="wrap_content"
layout_height="wrap_content"
setOnClickListener()

22. .
MaterialButton : Icon Button
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="@drawable/ic_action_add"
android:drawablePadding="8dp"
android:text="Add"/>

23. .
MaterialButton
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Button.Icon"
android:text="Add"
app:icon="@drawable/ic_action_add"/>
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
android:text="Add"
app:icon="@drawable/ic_action_add"/>

24. .
MaterialButton
<android.support.design.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Button.Icon"
android:text="Add"
app:icon="@drawable/ic_action_add"/>

25. .
MaterialButton
<android.support.design.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Button.Icon"
android:text="Add"
app:icon="@drawable/ic_action_add"
app:iconGravity="textStart" />

26. .
MaterialButton
<android.support.design.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Button.Icon"
android:text="Add"
app:icon="@drawable/ic_action_add"
app:iconGravity="textStart"
app:iconPadding="0dp"/>

28. .
FloatingActionButton
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_action_add"/>

29. 1) Default (56 x 56dp) 2) Mini (40 x 40dp)
3) Auto
Small windows
less than 470dp

30. .
FloatingActionButton
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_action_add"
app:fabSize="mini"/>

31. Why I love Text Field

33. Text Field : EditText
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="username"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
.

34. .
Text Field : TextInputLayout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>

35. Text Field : Style
.
Filled Box (default) Outlined Box

36. Text Field : Style (Outlined Box)
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="username">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
.

37. Chips : Common Feature
● Label
● Helper Text
● Error Text
● Character Count

38. Text Field : Label
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="username">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
.

39. .
Text Field : Helper Text
<android.support.design.widget.TextInputLayout
android:id="@+id/layoutUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="username"
app:helperText="your email address">
<android.support.design.widget.TextInputEditText
android:id="@+id/edittextUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>

40. .
Text Field : Helper Text
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
layoutUsername.helperText = "your email address"
}

41. Text Field : Error Text
.
Toast SnackBar

42. .
Text Field : Error Text (TextInputLayout)
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
layoutPassword.error =
"Password must contain at least 8 characters."
}

43. .
Text Field : Error Text (TextInputEditText)
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
edittextPassword.error =
"Password must contain at least 8 characters."
}

44. .
Text Field : Character Counter
<android.support.design.widget.TextInputLayout
android:id="@+id/layoutUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="username"
app:counterEnabled="true"
app:counterMaxLength="20">
<android.support.design.widget.TextInputEditText
android:id="@+id/edittextUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>

45. .
Text Field : Counter with Error
edittextUsername.addTextChangedListener(object: TextWatcher {
override fun afterTextChanged(s: Editable?) {}
override fun beforeTextChanged(s: CharSequence?, start: Int, count:
Int, after: Int) {}
override fun onTextChanged(s: CharSequence?, start: Int, before:
Int, count: Int) {
if (count > layoutUsername.counterMaxLength) {
layoutUsername.error = "Characters more than 20"
} else {
layoutUsername.isErrorEnabled = false
}
}
})

47. How to collaboration Chips from
Material Design in your life

49. Chips : Style
● Action Chips
● Filter Chips
● Choice Chips
● Entry Chips

50. Chips : Style
.
Action Chips (Default)

51. Chips : Style
.
Action Chips (Default)

52. Chips : Style
.
Filter Chip

53. Chips : Style
.
Filter Chip

54. Chips: Style
.
Choice Chip

55. Chips: Style
.
Choice Chip

56. Chips: Style
.
Entry Chip

57. Chips: Style
.
Entry Chip

58. .
Chips: Style
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Chip.Choice">
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Chip.Filter"/>
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Widget.MaterialComponents.Chip.Entry"/>

59. Chips : Handling Clicks
● setOnClickListener
● setOnCheckedChangeListener
● setOnCloseIconClickListener

60. .
Chips : Handling Clicks
chipAction.setOnClickListener {
Snackbar.make(
rootview,
"Action Chips",
Snackbar.LENGTH_SHORT
).show()
}

61. .
Chips : Handling Clicks
chipChoice.setOnCheckedChangeListener {
buttonView, isChecked ->
Snackbar.make(
rootview,
isChecked.toString(),
Snackbar.LENGTH_SHORT
).show()
}

62. .
Chips : Handling Clicks
chipEntry.setOnCloseIconClickListener {
it.visibility = View.GONE
}

63. Chips : Example

64. .
Chips : Example #1 Hashtag Menu
Add #Hashtag for this menu.
tonkatsu, japanese food, pork, meat, lunch,
bangkok, silom

65. .
Chips : Example #1 Hashtag Menu
LinearLayout
orientation="horizontal
Chip
layout_width="wrap_content"
layout_height="wrap_content"
Chip
layout_width="wrap_content"
layout_height="wrap_content"
...

66. .
Chips : Example #1 Hashtag Menu
HorizontalScrollView
layout_width="match_parent"
layout_height="wrap_content"
LinearLayout
orientation="vertical
Chip
layout_width="wrap_content"
layout_height="wrap_content"
Chip
layout_width="wrap_content"
layout_height="wrap_content"
...

67. .
Chips : Example #1 Hashtag Menu
ChipGroup
layout_width="match_parent"
layout_height="wrap_content"
Chip
layout_width="wrap_content"
layout_height="wrap_content"
Chip
layout_width="wrap_content"
layout_height="wrap_content"
...

68. .
Chips : Example #1 Hashtag Menu
<android.support.design.chip.ChipGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<android.support.design.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:text="Tonkatsu"/>
</android.support.design.chip.ChipGroup>

69. .
Chips : Example #2 RecyclerView
Add #Hashtag for this menu in
RecyclerView

70. .
Chips : Chip in LinearLayoutManager
<android.support.design.chip.ChipGroup
android:id="@+id/chipGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerViewHashtag"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.chip.ChipGroup>

71. Chips : Chip in LinearLayoutManager

72. .
Chips : Chip in LinearLayoutManager
recyclerViewHashtag.apply {
layoutManager = LinearLayoutManager(
containerView.context,
LinearLayoutManager.HORIZONTAL,
False
)
this.adapter = HashtagChipAdapter(
Item.labels,
this@PostListItemViewHolder
)
}

73. .
Chips : RecyclerView with ChipGroup
<android.support.design.chip.ChipGroup
android:id="@+id/chipGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

74. .
Chips : RecyclerView with ChipGroup
chipGroup.removeAllViews()
if (item.labels!!.isNotEmpty()) {
item.labels.forEach {
val chip = Chip(containerView.context)
chip.apply {
layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT)
text = it
}
chipGroup.addView(chip)
}
}

75. .
Chips: Example #3 ChipGroup Selected
Your Burger!!!

76. .
Chips: Example #3 ChipGroup Selected
Choice Chips
Filter Chips

77. .
Chips: Example #3 ChipGroup Selected
ChipGroup
layout_width="match_parent"
layout_height="wrap_content
app:singleSelection="true"
Chip
layout_width="wrap_content"
layout_height="wrap_content"
Chip
layout_width="wrap_content"
layout_height="wrap_content"
...

78. .
Chips: Example #3 ChipGroup Selected
chipGroupMeat.setOnCheckedChangeListener { chipGroup, id ->
if (chipGroup.findViewById<Chip>(id) != null) {
val meat = chipGroup.findViewById<Chip>(id).text
Snackbar.make(rootview,
meat,
Snackbar.LENGTH_SHORT
).show()
}
}

79. .
Chips: Example #3 ChipGroup Selected
for (i in 0 until chipGroupTopping.childCount) {
val chip = chipGroupTopping.getChildAt(i) as Chip
chip.setOnCheckedChangeListener { buttonView, isChecked ->
if (isChecked) {
Snackbar.make(rootview,
chip.text,
Snackbar.LENGTH_SHORT
).show()
}
}
}

80. .
Chips: Example #3 ChipGroup Selected
for (i in 0 until chipGroupTopping.childCount) {
val chip = chipGroupTopping.getChildAt(i) as Chip
chip.setOnCheckedChangeListener {
buttonView, isChecked ->
if (isChecked) {
toppingList.add(chip.text)
} else {
toppingList.remove(chip.text)
}
Snackbar.make(rootview,
toppingList.toString(),
Snackbar.LENGTH_SHORT
).show()
}
}

81. .
Chips: Example #3 ChipGroup Selected

83. Menu section by Bottom Navigation

86. Bottom Navigation: Recommend Style
.
Updated Material Style
(default)
Colored Material Style

87. .
Bottom Navigation: State

88. .
Bottom Navigation: When to use

89. .
Bottom Navigation : How to use
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menuFavorite"
android:title="favourites"
android:icon="@drawable/ic_favorite"/>
<item android:id="@+id/menuMusic"
android:title="music"
android:icon="@drawable/ic_action_music"/>
<item android:id="@+id/menuBook"
android:title="book"
android:icon="@drawable/ic_action_book"/>
<item android:id="@+id/menuNews"
android:title="news"
android:icon="@drawable/ic_action_music"/>
</menu>

90. .
Bottom Navigation : How to use
<android.support.design.widget.BottomNavigationView
style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="@menu/menu_main"/>

91. .
Bottom Navigation : How to use
bottomNavigation.setOnNavigationItemSelectedListener {
val fragment = when (it.itemId) {
R.id.menuFavorite -> FavoriteFragment()
R.id.menuMusic -> MusicFragment()
R.id.menuBook -> BookFragment()
else -> NewsFragment()
}
if (savedInstanceState == null) {
supportFragmentManager.beginTransaction()
.replace(R.id.container, fragment)
.commit()
}
true
}

92. .
Bottom Navigation : How to use
bottomNavigation.setOnNavigationItemSelectedListener {
val fragment = when (it.itemId) {
R.id.menuFavorite -> FavoriteFragment()
R.id.menuMusic -> MusicFragment()
R.id.menuBook -> BookFragment()
else -> NewsFragment()
}
if (savedInstanceState == null) {
supportFragmentManager.beginTransaction()
.replace(R.id.container, fragment)
.commit()
}
true
}
bottomNavigation.selectedItemId = R.id.menuFavorite

93. https://proandroiddev.com/fragments-swapping-with-bottom-bar-ffbd265bd742

94. Resource

95. https://material.io/

96. https://material.io/collections/developer-tutorials/#android-kotlin

97. https://github.com/material-components/material-components-android

98. https://www.udacity.com/course/material-design-for-android-developers--ud862

99. See you next time :D
Monthira Chayabanjonglerd (Mint)
Android Developer @ Ookbee U. Co.,Ltd.
Portfolio :
https://mikkipastel.firebaseapp.com