Material all the things!

Slide 1

Slide 1 text

Material All the Things! Renaud Mathieu & Julien Salvi Innovorder

Slide 2

Slide 2 text

Material back in the days!

Slide 3

Slide 3 text

Material Design history 2014 2016 2018 2020 2022 Design Material Design introduction Material Design 2 Material lib 1.3.0-alpha03 Material lib 1.0.0 Tools Material lib 1.0.0-alpha01 Suppo Design library Compose Material lib

Slide 4

Slide 4 text

● Google provided a lot of resources for designer ● But libraries and tools for developers were missing ● Build your own components DIY! Material Design resources back then…

Slide 5

Slide 5 text

● Implementing a Material Button back in the days! ● Spoiler alert: lots of code! Material Button back then! BUTTON BUTTON

Slide 6

Slide 6 text

Material Button back then! BUTTON BUTTON

Slide 7

Slide 7 text

Add a shape and background BUTTON BUTTON

Slide 8

Slide 8 text

Add a Style... Add a TextApperance… Add a color for text… Add an elevation for Kitkat... BUTTON BUTTON Add a ripple effect

Slide 9

Slide 9 text

Material Components

Slide 10

Slide 10 text

● Use the canvas, custom views, custom drawables... ● Spending a lot of time for building material components Material Components

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Migrating to Material Components

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Migrate from Support Library to Jetpack.

Slide 17

Slide 17 text

-implementation ‘com.android.support:design:28.0.0’ +implementation ‘com.google.android.material:material:1.0.0’ Migrate to AndroidX +

Slide 18

Slide 18 text

Create a brand new Material Theme

Slide 19

Slide 19 text

We added a lib-design Android Library gradle module. dependencies { ... api 'com.google.android.material:material:1.3.0-alpha03' ... }

Slide 20

Slide 20 text

Build the pillars of your design. Colors Typography Shapes

Slide 21

Slide 21 text

colors.xml #0f2c55 #e2e2e2 #d1d1d1 #e2e2e2 #689f38 #79af59 #689f38 ...

Slide 22

Slide 22 text

shapes.xml <item name="cornerFamily">rounded</item> <item name="cornerSize">@dimen/corner_radius_small</item> <item name="cornerFamily">rounded</item> <item name="cornerSize">0dp</item> <item name="cornerFamily">rounded</item> <item name="cornerSize">@dimen/corner_radius_large</item>

Slide 23

Slide 23 text

texts.xml <style name="TextAppearance.IO.Headline2" parent="TextAppearance.MaterialComponents.Headline2" /> <style name="TextAppearance.IO.Headline3" parent="TextAppearance.MaterialComponents.Headline3" /> <style name="TextAppearance.IO.Headline4" parent="TextAppearance.MaterialComponents.Headline4" /> <style name="TextAppearance.IO.Headline5" parent="TextAppearance.MaterialComponents.Headline5" /> <style name="TextAppearance.IO.Headline6" parent="TextAppearance.MaterialComponents.Headline6" /> <style name="TextAppearance.IO.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1" /> <style name="TextAppearance.IO.Subtitle2" parent="TextAppearance.MaterialComponents.Subtitle2" /> <style name="TextAppearance.IO.Body1" parent="TextAppearance.MaterialComponents.Body1" /> <style name="TextAppearance.IO.Body2" parent="TextAppearance.MaterialComponents.Body2" /> <style name="TextAppearance.IO.Button" parent="TextAppearance.MaterialComponents.Button" /> <style name="TextAppearance.IO.Caption" parent="TextAppearance.MaterialComponents.Caption" /> <style name="TextAppearance.IO.Overline" parent="TextAppearance.MaterialComponents.Overline" /> </resources>

Slide 24

Slide 24 text

theme.xml  <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.IO.SmallComponent</item> <item name="shapeAppearanceMediumComponent">@style/ShapeAppearance.IO.MediumComponent</item> <item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.IO.LargeComponent</item>  <item name="textAppearanceHeadline1">@style/TextAppearance.IO.Headline1</item> ... <item name="textAppearanceOverline">@style/TextAppearance.IO.Overline</item

Slide 25

Slide 25 text

theme.xml <item name="colorPrimary">@color/slate</item> <item name="colorPrimaryDark">@color/slate_dark</item> <item name="colorSecondary">@color/grey_200</item> <item name="colorSecondaryVariant">@color/grey_400</item> <item name="colorSurface">@color/white</item> <item name="android:colorBackground">@color/white</item> <item name="divider">@color/divider</item> <item name="android:windowBackground">@color/white</item>

Slide 26

Slide 26 text

Update a View

Slide 27

Slide 27 text

any_layout.xml

Slide 28

Slide 28 text

Auto-inﬂation /** * An extension of {@link AppCompatViewInflater} that replaces some framework widgets with Material * Components ones at inflation time, provided a Material Components theme is in use. */ public class MaterialComponentsViewInflater extends AppCompatViewInflater

Slide 29

Slide 29 text

Add new Components

Slide 30

Slide 30 text

theme.xml ...  <item name="cardViewStyle">@style/Widget.IO.CardView</item> <item name="materialButtonStyle">@style/Widget.IO.Button</item> <item name="snackbarStyle">@style/Widget.IO.Snackbar</item> <item name="switchStyle">@style/Widget.IO.Switch</item> <item name="textInputStyle">@style/Widget.IO.TextInputLayout</item> <item name="toolbarStyle">@style/Widget.IO.Toolbar</item>  <item name="materialAlertDialogTheme"> @style/ThemeOverlay.IO.AlertDialog </item>

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Remove old themes

Slide 36

Slide 36 text

AndroidManifest.xml

Slide 37

Slide 37 text

Migrating to Material Components Remove old theme Add new components Update a View Create a Material theme Migrate to AndroidX 1. Prepare 2. Iterate 3. Clean

Slide 38

Slide 38 text

Build a Catalog app

Slide 39

Slide 39 text

We added an app-design Android app gradle module. dependencies { ... implementation project(':lib-design') ... }

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Material in action

Slide 42

Slide 42 text

Add motion to your app

Slide 43

Slide 43 text

Material Motion ● Add meaningful motion to your application ● Add nice transitions between Activities, Fragments or Views

Slide 44

Slide 44 text

Material Motion // On Fragment A override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) exitTransition = MaterialElevationScale(false).apply { duration = 300L } reenterTransition = MaterialElevationScale(true).apply { duration = 300L } } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) cover.transitionName = "unique_transition_name" name.transitionName = "another_unique_transition" }

Slide 45

Slide 45 text

Material Motion // On Fragment B override fun onCreate(savedInstanceState: Bundle?) { postponeEnterTransition() // Might be useful for image transitions sharedElementEnterTransition = MaterialContainerTransform().apply { drawingViewId = R.id.nav_host_fragment duration = 300L fadeMode = MaterialContainerTransform.FADE_MODE_THROUGH interpolator = AccelerateDecelerateInterpolator() scrimColor = Color.TRANSPARENT } } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { binding.backdrop.transitionName = "unique_transition_name" binding.title.transitionName = "another_unique_transition" // Load your image async then start the transition with: startPostponedEnterTransition() }

Slide 46

Slide 46 text

Material Motion // On Fragment A navigate to Fragment B val extras = FragmentNavigatorExtras( cover to film.episodeId.toString(), title to film.title) val action = MoviesFragmentDirections.actionMainFragmentToMovieFragment(film) findNavController().navigate(action, extras)