GDG Kütahya - Exploring the v28 Android Design Support Library Additions

Slide 1

Slide 1 text

Exploring the v28 Android Design Support Library Additions

Slide 2

Slide 2 text

About Me Android Developer @ emretekin.me [email protected] emretekin emretekinn

Slide 3

Slide 3 text

What is Support Library? The Support Library is a collection of libraries can be defined as into two group of libraries such as compatibility and component libraries. implementation 'com.android.support:design:28.0.0' This is the stable release of Support Library 28.0.0 and is suitable for use in production. This will be the last feature release under the android.support packaging, and developers are encouraged to migrate to AndroidX. implementation 'com.google.android.material:material:1.0.0

Slide 4

Slide 4 text

Introduction Material Design Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. https://material.io

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Previously Used Material Components ● Toolbar ● Bottom Navigation View ● Cardview ● Floating Action Button ● Selection Controls

Slide 7

Slide 7 text

Toolbar

Slide 8

Slide 8 text

Bottom Navigation View

Slide 9

Slide 9 text

Cardview

Slide 10

Slide 10 text

Floating Action Button

Slide 11

Slide 11 text

Selections Controls ● Checkbox ● Radio button ● Switch button

Slide 12

Slide 12 text

New Material Components ● BottomAppBar ● Material Cardview ● Chip ● Chip Group ● Material Button

Slide 13

Slide 13 text

Toolbar to BottomAppBar A bottom app bar displays navigation and key actions at the bottom of mobile screens. Based on the changing needs and behaviors of users, the BottomAppBar is an evolution from standard Material guidance.

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Bottom NavigationView BottomAppBar

Slide 16

Slide 16 text

Bottom NavigationView BottomAppBar

Slide 17

Slide 17 text

Bottom NavigationView BottomAppBar

Slide 18

Slide 18 text

BottomAppBar

Slide 19

Slide 19 text

Selection Controls to Chips

Slide 20

Slide 20 text

Selection Controls to Chips

Slide 21

Slide 21 text

Cardview to Material CardView Material CardView is a customizable component based on CardView from the Android Support Library. Material CardView provides all of the features of CardView, but adds attributes for customizing the stroke and uses an updated Material style by default.

Slide 22

Slide 22 text

Button to Material Button

Slide 23

Slide 23 text

Let’s See How Can We Implement New Components to Our Project

Slide 24

Slide 24 text

BottomAppBar

Slide 25

Slide 25 text

BottomAppBar with FAB ● bottom_app_bar.replaceMenu(R.menu.main) ● app:layout_anchor=”@id/bottom_appbar”

Slide 26

Slide 26 text

BottomAppBar with FAB ● app:fabAttached: “true”

Slide 27

Slide 27 text

BottomAppBar with FAB ● app:fabAttached: “false”

Slide 28

Slide 28 text

BottomAppBar with FAB ● app:fabAlignmentMode:”center”

Slide 29

Slide 29 text

BottomAppBar Behaviors ● bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END ● bottom_app_bar.replaceMenu(menu_secondary)

Slide 30

Slide 30 text

BottomAppBar Behaviors ● app:hideOnScroll:”true” ● app:layout_scrollFlags=”scroll|enterAlways” ● bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END ● bottom_app_bar.replaceMenu(menu_secondary)

Slide 31

Slide 31 text

Chip

Slide 32

Slide 32 text

Chip Group

Slide 33

Slide 33 text

Chips There are four types of chips: ● Entry Chip ● Filter Chip ● Choice Chip ● Action Chip (Default)

Slide 34

Slide 34 text

● Entry(Input) Chips

Slide 35

Slide 35 text

● Choice Chips

Slide 36

Slide 36 text

● Filter Chips

Slide 37

Slide 37 text

● Action Chips

Slide 38

Slide 38 text

● Chip Attributes Label android:text android:textAppearance Shape app:chipCornerRadius Size app:chipMinHeight Background app:chipBackgroundColor Border app:chipStrokeColor app:chipStrokeWidth Ripple app:rippleColor Chip Icon app:chipIconVisible app:chipIcon app:chipIconTint app:chipIconSize Close Icon app:closeIconVisible app:closeIcon app:closeIconSize app:closeIconTint Checkable android:checkable Motion app:showMotionSpec app:hideMotionSpec Paddings app:chipStartPadding app:iconStartPadding app:iconEndPadding app:textStartPadding app:textEndPadding app:closeIconStartPadding app:closeIconEndPadding app:chipEndPadding

Slide 39

Slide 39 text

Material Cardview ● app:strokeWidth: ● app:strokeColor:

Slide 40

Slide 40 text

Material Button

Slide 41

Slide 41 text

Material Button style="@style/Widget.MaterialComponents.Button.TextButton"

Slide 42

Slide 42 text

● Material Button Attributes Icon drawable app:icon Padding between icon and button text app:iconPadding Icon color app:iconTint app:iconTintModer Stroke app:strokeColor app:strokeWidth The radius of all four corners of the button app:cornerRadius Ripple app:rippleColor

Slide 43

Slide 43 text

Google I/O 2018 https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched&hl=en 1 2 3

Slide 44

Slide 44 text

Demo https://medium.com/@emre.tekin/android-design-support-library-v28-3e0ea4d9f688 https://github.com/emretekin/Support-Library-v28-Additions

Slide 45

Slide 45 text

References https://material.io https://www.reddit.com/r/androiddev/comments/82qh9e/support_library_2800alpha1/ https://medium.com/material-design-in-action/chips-material-components-for-android-46001664a40f https://youtu.be/DPH3F0v1jB0

Slide 46

Slide 46 text

Thank You! Questions? emretekin.me