00:28
okay it said push so I pushed it alright
00:32
I think we should get going
00:34
hello everybody today we're going to be
00:37
talking about incorporating material
00:40
theming into custom views so this is
00:43
making your custom components feel at
00:47
home amongst the core components of
00:49
material design so I am Nick routes I am
00:54
an Android engineer at over I'm a Google
00:58
developer expert for Android and I live
00:60
all the way down in Cape Town South
01:02
Africa where I run the GDG chapter there
01:06
if you want to keep up to date with me
01:08
or follow me I'm at Rick notes
01:11
everywhere yes the letters have been
01:13
switched and that's on purpose it's a
01:15
spoonerism anyway let's keep going so
01:19
before I dive into incorporating
01:22
material theming into custom views I
01:24
want to do a quick recap of what
01:26
material theming actually is I'm not
01:29
going to go too in depth into this topic
01:30
because I'm going to actually provide
01:32
you with some resources for afterwards
01:35
but let's have a little look over what
01:38
so it was initially thought of as
01:41
material design 2.0 but in fact I like
01:46
to see it as a lot more than that in my
01:49
opinion or in my definition it's a layer
01:52
on top of material design where you
01:55
define your your own sort of brand or
01:58
identity through these three design
02:00
subsystems color typography and shape
02:04
and in doing so you keep all of the
02:08
great things about material design and
02:10
all of those core principles but you
02:12
your app stands out and you get to
02:14
better represent your brand and your
02:16
product so for Android what this meant
02:21
was during the Android X migration was
02:24
to migrate from the design support
02:26
library to the material components for
02:28
Android library and this brought with it
02:31
a whole bunch of themes and styles core
02:35
widgets and utility classes that you
02:36
could use to practically implement
02:38
material theming in your end
02:41
so I did say there's going to be brief
02:43
and here are those resources I promised
02:45
so if you're looking to dive into this
02:48
you probably want to start at material
02:50
that I oh it's the official website
02:52
where you can find all of the design
02:53
documentation development resources and
02:57
tools for material design you should
02:60
definitely check out the session on this
03:02
material theming from Google i/o 2019 by
03:05
Yasmine avian and Michelle Alvarez both
03:09
expressively with material components I
03:11
do write quite a bit about this on
03:13
medium so if you'd like to check that
03:15
out please do and then lastly because
03:18
we're developers I guess the source code
03:22
for MDC Android is available on github
03:25
and it's definitely worth checking out
03:28
alright so moving on to the main topic
03:32
I'm going to start off by introducing
03:35
one of my favorite things it's a
03:37
playground screen and here what we have
03:39
is just a plain screen that includes a
03:42
bunch of the the coal MDC Android
03:44
components that come with the library
03:46
and what we have here is a screen that
03:48
uses the baseline theme so what this
03:51
means in terms of Android is that if you
03:53
were to make a new Android app set one
03:55
at your app theme to one of the material
03:57
components themes and not change a
03:60
single attributes and include a bunch of
04:01
widgets in the screen this is how they
04:02
would look the next thing I want to
04:06
introducing as this is about custom
04:08
views is a custom view that I made it's
04:10
called color picker view the name
04:12
suggests what it does it allows the user
04:15
to pick a color and really it's it's not
04:20
too complicated it's basically a
04:22
compound view so it's inflated from an
04:24
XML layout and includes a bunch of sub
04:26
components here the the enclosing
04:29
background drawable which is like the
04:32
surface that elevated a couple of text
04:35
views for the title and subtitle a
04:37
button okay button that allows users to
04:39
confirm picking a color and in the
04:42
middle recyclerview act a grid of colors
04:45
that the user can select from when we
04:49
place our color picker view next to the
04:51
stock components in our playground
04:54
it feels pretty good it feels at home it
04:56
fits in with the theme it fits in
04:59
amongst other components and generally
05:00
speaking they all play well together in
05:02
terms of this baseline theme but in
05:07
pretty much all scenarios and for most
05:10
apps you're not going to be using the
05:12
baseline theme you're going to be as I
05:15
said earlier choosing a theme based on
05:17
your brand your products etc so that's
05:19
what I went ahead and did I made my own
05:21
custom theme which basically includes
05:24
these color palettes for color theming
05:26
so that's a light and a dark variants
05:28
this primary blue secondary amber amber
05:31
etc my shaped theming was cut corners
05:35
instead of rounded and then I chose a
05:37
custom font which was Roboto mono in
05:42
terms of applying this to my app it just
05:44
included again choosing a material
05:46
components theme applying these color
05:50
attributes then applying the type
05:52
attributes and then applying the shape
05:55
attributes and that's all that's
05:57
required to turn our playground screen
05:60
into one that now has its own
06:01
personality and its own brand you can
06:04
see that all of the components and I'll
06:05
have these chamfered cut corners the
06:08
surfaces and the whole color palette
06:10
appears different and generally speaking
06:12
it is quite a lot of personality now
06:15
well we have a problem
06:16
I've now placed my custom component
06:19
which I built next to this new theme and
06:22
it no longer feels like it fits in it's
06:26
no longer part of the family so to speak
06:28
we can see that the corners are still
06:31
rounded the surface color looks off the
06:33
button is definitely wrong and overall
06:35
there's just a bunch of problems there
06:37
that we need to fix and it becomes even
06:41
more apparent when we switch over to a
06:42
dock mode in that the titles and the
06:45
dividers actually become illegible so we
06:48
definitely have a few things to fix here
06:51
I'm going to admit something now and
06:54
that is when I built this color picker
06:56
view I actually purposefully included
06:58
some mistakes in doing so some of them
07:01
are obviously wrong and things you
07:03
should definitely not do but others are
07:05
more like they're not wrong but they
07:07
don't play so well with material theming
07:09
and the things we need to consider here
07:11
when we introduce material theming
07:14
inside app and we're going to do this by
07:17
going through each sub component and
07:18
fixing them one by one
07:20
identifying what am i have may have done
07:22
wrong or what I could have done better
07:23
and then fixing fixing that so that our
07:25
color picker ultimately fits in with our
07:27
custom theme so we're going to be
07:30
starting with that okay button so what's
07:34
wrong about this okay button basically
07:36
it is the wrong color it has the wrong
07:38
shape theming in terms of it doesn't
07:40
have cut corners and the typography
07:42
looks a little off it's a little
07:43
squashed and condensed and maybe the
07:45
waiting's bit wrong so what did I do
07:48
wrong well I went ahead in that XML
07:51
layout that I said our custom views
07:53
inflated from and I included the button
07:55
I used an app compat button pretty
07:57
standard class and then I went ahead and
07:59
hard-coded the text color and the
08:01
background since text colors white black
08:04
content is the shade of purple from the
08:05
baseline theme there's some obvious
08:08
things wrong wrong here but what we
08:09
really wants is to go ahead and just use
08:12
a plain old material button this is a
08:15
class that comes as part of MVC Android
08:18
and you'll notice that I also removed
08:20
the hard-coded attributes as well and
08:24
the result is something that we want
08:27
it's now styled like our other buttons
08:29
in our playground screen and it is
08:31
starting to fit in with our theme so
08:35
throughout this talk I'm going to be
08:37
introducing some lessons that we learn
08:39
through each step and what I'll also do
08:41
is be adding a link to my github
08:44
repository which includes all of this
08:46
code and each step is actually
08:48
summarized in the portal closed pull
08:50
request so you can go and check out the
08:51
code later on you can go look at each
08:54
pour request and see the different steps
08:56
that I took and what code changed so
08:59
here for our button the lesson learned
09:01
is that we should actually be using
09:02
standard MVC Android components were
09:04
ever possible these components
09:07
essentially include material theming
09:10
support internally by default so it's a
09:13
lot easier for us to just use them not
09:15
customize the attributes if we don't
09:18
be themed out-of-the-box I'll note here
09:22
that even though I use the material
09:24
button if you are using a material theme
09:26
if you just use button that will get
09:29
also inflated as a material button
09:31
that's a topic for another time and then
09:34
lastly you definitely shouldn't be hard
09:36
coding component attributes especially
09:39
not like hex codes or even color
09:40
resources because this doesn't play too
09:42
well with theming next up we want to fix
09:46
our title and subtitle so this is not so
09:51
obviously wrong it appears to have the
09:52
correct type face the bottom owner but
09:55
the color looks a bit off it's like a
09:56
secondary type of color and we want to
09:59
make it stand out and feel a little bit
10:01
more like our other components so what
10:04
did i do before well I had two text
10:08
views and I gave them both the text size
10:11
20 SP for my title and 16 for a subtitle
10:16
and then I had specified that my title
10:18
should be a medium a medium font family
10:22
so that it's differentiated from the
10:24
subtitle what we really want to be doing
10:27
is instead using the text appearance
10:30
attribute and then referencing one of
10:33
the stock MDC Android text appearance
10:36
Styles these come with their own
10:39
attributes so you can see here I've used
10:41
text appearance headline six text
10:43
appearance subtitle one there's about
10:45
ten to twenty of them and they map to
10:48
the material design type spec that you
10:51
can find on material that I owe and then
10:53
you can just use them straight up in
10:54
your text views and they give you a
10:55
variety of casing text size letter
11:02
spacing etc that have been done tested
11:04
through design tests and then now you
11:06
can just use them in your app for a
11:08
variety of scenarios where you may need
11:09
a title button a caption etc so the
11:14
result is quite subtle but I do think
11:17
that it makes this text more legible it
11:20
fits in in terms of like other
11:22
components from MVC we'll be using these
11:23
these text appearances and it definitely
11:26
makes our texts stand out a bit more on
11:28
that we can see we've got now a bolder
11:30
and a bit more letter spacing so we
11:34
learned here that we should be trying to
11:36
use just the text appearance attributes
11:40
to style our text views and in doing so
11:42
we can use these MVC Android stock
11:46
styles that come as part of the library
11:48
you don't need to implement them
11:49
yourself and these map to the
11:52
recommended material design top
11:54
specifications you can go ahead and
11:56
customize them yourself but it really is
11:58
easy to use out of the box and make sure
12:00
that all of your text views are styled
12:02
in a way that is legible and feels
12:04
consistent the the big thing to fix now
12:09
is our background it's probably the most
12:10
obviously wrong thing about our color
12:13
picker especially when you have a look
12:14
at it in the dark theme so it is the
12:19
wrong color our surfaces now should be
12:21
the shade of blue it has rounded corners
12:23
instead of cut corners and this is this
12:26
needs to be fixed so what did i do
12:30
before it's not wrong I mean we probably
12:33
all done this before but I essentially
12:35
use an XML shape drawable of a rectangle
12:38
family I did hard-code the color of the
12:40
straw ball to be White's which is wrong
12:42
I've letter to give it a corner radius
12:43
of four depth and then inside my
12:46
cocktail in class my color picker view
12:48
you can see that I've just set it as the
12:49
background resource of this view again
12:51
not wrong but it's definitely not gonna
12:53
allow us to handle shape theming so I'm
12:56
going to take you through some steps
12:57
that will prepare us for shape theming
12:59
and introduce some new classes along the
13:00
way so the first thing that I want to do
13:04
and it's a good thing to do in practice
13:06
when building custom views but it's to
13:09
create something called a star level
13:10
you'll notice that the style ball has
13:13
the same name as our custom component
13:14
color picker view and it's basically
13:18
this little bundle of attributes that
13:20
you're saying should be used to style
13:22
this specific view and I've included
13:24
three attributes here that are relevant
13:26
to the background itself that's shape
13:29
appearance that's basically the family
13:32
of corners and the size of corners that
13:34
our shape is going to use the background
13:36
tint so the color of the background
13:38
itself and then the elevation which you
13:41
may have noticed we
13:42
in in our in our view it's elevated
13:44
above the surface and has a shadow the
13:47
other thing I've added here that's
13:49
interesting is that I've added a color
13:50
picker style new attribute as a
13:53
reference so what this will be used for
13:56
is to create a an implementation of the
13:60
star level a default implementation that
14:02
you can then put into your apps theme
14:03
and can be used when parsing these
14:06
attributes so this default
14:10
implementation looks like this I've now
14:12
made an app color picker and then I've
14:15
specified these attributes to be
14:17
specific things now my shape appearance
14:18
is the the large component of the large
14:22
component variation our background scent
14:24
is our surface color and then we've set
14:27
an elevation of 4dp and then in our apps
14:31
theme we actually reference this with
14:33
our color picker style custom attribute
14:35
that we made so then what we need to go
14:39
and do is pass all of these background
14:41
attributes inside our color picker view
14:43
cloths and what I'm doing first up is
14:47
introducing a new class which we haven't
14:49
spoke about before and this will be used
14:51
to basically model our background this
14:54
is material shape drawable this ship's
14:56
is part of MVC Android and as a cross
14:59
that is essentially a background
15:00
drawable like any other but it does do
15:03
one thing special and that it can handle
15:04
shape theming so we instantiate one of
15:07
these material shape draw walls using
15:10
those attributes we defined earlier
15:12
so our color picker style and our app
15:14
color picker default implementation so
15:16
we've constructed this material shape
15:18
for a bar and now we can use it as the
15:19
background for our view but before doing
15:23
so we want to pass the rest of the
15:24
background related attributes so this
15:26
will be our tint and our elevation we
15:29
use this Android X with style attributes
15:31
convenience extension function we go
15:35
ahead and grab our background sins and
15:37
our elevation the back constant being a
15:40
color stylist and elevation being a
15:41
dimension we then set our material shape
15:44
trouble as the background above you
15:46
apply out since apply elevation and the
15:50
results well it's pretty cool you can
15:55
color picker has a background that uses
15:58
the surface color like other other
15:60
components in our playground screen the
16:02
corners are cut and it's maintained the
16:04
elevation we had before and it's really
16:06
starting to feel like this component is
16:08
fitting in with our custom theme so we
16:12
learned here that it's a good idea to
16:13
create a star level this is basically a
16:16
good custom view practice really and
16:19
some default styles for any for any
16:21
customer that you make and where you can
16:25
and I didn't mention this before but the
16:27
names of attributes that you include in
16:29
your sty level it's best to try and use
16:31
existing attribute names that come from
16:34
MDC Androids so I use shape appearance
16:37
backgrounds and Android elevation these
16:39
things are what users come to expect
16:42
when they're like doing autocomplete
16:44
they're trying to override the default
16:46
values of these and you'll notice that
16:48
if you go and dig into the source code
16:50
or use MVC Android that other components
16:53
actually use these attributes names
16:54
shape appearance backgrounds and so it's
16:56
good to be consistent in this regard and
16:58
not use something like on a shape look
17:00
and feel which would technically compile
17:02
and work but users probably wouldn't be
17:04
able to find and then if you are looking
17:08
to do shape theming which is a core part
17:11
of material theming you kind of always
17:12
have to do use material shape trouble
17:14
for this it's at least the only sane way
17:17
to do this in order to achieve shape
17:20
theming in your custom components so we
17:24
previously fixed our title and subtitle
17:26
but now that we've given a proper color
17:28
to our or a variable color to our
17:32
background we need to consider that the
17:33
text which is displayed over it's our
17:35
title and subtitle is the correct color
17:38
so it's not like at the moment at this
17:41
moment in time it's not obviously wrong
17:43
but we need to consider that our
17:45
background color is now color surface
17:47
it's a light shade of blue and the the
17:50
current text color is working fine but
17:51
let's say we change us to like a dark
17:53
purple or a red in this case we need to
17:56
know that our text color is going to
17:58
adapt and use the right on color the
18:01
color on surface that will ensure that
18:04
it is legible against the surface
18:07
so what I'm doing here is I'm actually
18:11
reusing the star level I made before so
18:13
this is where the power of star levels
18:15
come into play now we can just add new
18:17
attributes as we add functionality to
18:19
our custom views and these two new
18:21
attributes are title text color and
18:23
subtitle text color pretty
18:25
self-explanatory we add them to our
18:27
default implementation or app color
18:29
picker and then you can see here that
18:32
I'm referencing to colors color
18:34
resources which are our on surface color
18:38
but it's not an attribute it's actually
18:41
a a color resource itself and these
18:44
include an emphasis so these shippers
18:48
part of MVC Android I didn't make these
18:49
color resources myself but these are
18:52
basically colors that reference let's
18:55
say color on surface and then have like
18:56
an alpha value of I think it's 87 and
18:59
something else but essentially what it
19:01
means is that your text uses the write
19:03
on color and then applies an alpha to
19:05
differentiate between where that should
19:07
high emphasis or medium and in doing so
19:12
I also have to pass these attributes in
19:14
our class apply them to our two text
19:17
views and I hope you're going to see
19:19
this in the screen it's pretty subtle
19:21
but you'll notice now that our subtitle
19:23
uses as is using sort of like a bit of a
19:27
more muted secondary color and our title
19:29
stands out a bit more I've created
19:31
hierarchy between the two pieces of text
19:33
but critically what I've done is that if
19:35
we were to change our themes surface
19:38
color and our on surface color this text
19:41
and the background will just adapt and
19:42
always be themed correctly so we learned
19:47
here that we can actually reuse the star
19:48
level we made which is great and now we
19:52
also need to consider the color behind
19:53
text in our case it's the surface color
19:57
but it could be any color and use an
19:59
appropriate on color when displaying
20:01
stuff on top of it there are some
20:03
existing MVC Android text color
20:06
resources that exist for applying
20:08
emphasis in this regard so the next
20:12
thing to fix and this is probably
20:13
another big one as well is our items so
20:17
these are our color items in the middle
20:19
that allow user to tap
20:21
select and then afterwards they can
20:23
confirm by the ok button and what's
20:26
wrong with them right now is basically
20:27
that they're rounded we can't team them
20:30
in terms of color because the color
20:31
itself is the color that the user needs
20:33
to pick but if you have a look at if you
20:35
had a look at our plague on screen
20:37
before you'll notice that small
20:38
components all have almost a diamond
20:40
shape they're using the cut corners that
20:42
we specify as our small shape appearance
20:46
so what I did before for these items was
20:48
very similar to what I did for the
20:50
background of our of our view and that I
20:51
used an XML shape trouble this time in
20:53
oval and then I just said it as the
20:55
background resource of our above view
20:58
holder which is inside our recycler view
21:01
back grid of colors so what we actually
21:05
want to be doing is quite similar to
21:07
what we did for the background so I'm
21:08
starting off by adding a new attribute
21:10
again so I'll star level this is our
21:12
item shape appearance as opposed to
21:13
shape appearance which is for the whole
21:15
color picker view and then adding an
21:18
implementation to our default style and
21:20
referencing the this time the small
21:22
component shape appearance attribute I
21:26
then go ahead and need to pass it in our
21:29
our color picker view but there's
21:31
something interesting happening here
21:32
that wasn't previously happening for our
21:34
main background material shape drawable
21:36
there's another new class this time it's
21:38
called shape appearance model this class
21:41
also ships as part of MVC Android and is
21:43
essentially the model class that backs
21:45
material shape global material shape
21:48
Drobo is a drawable it knows how to
21:50
render itself that knows how to to draw
21:52
and fit in with the view system but
21:55
shape appearance model is essentially
21:57
the the class that has all the date so
21:59
with regards to each of the fall or any
22:02
or maybe even more corners that are
22:04
included as part of the Strobel are they
22:06
rounded are there cuts and what size are
22:08
there and this is passed through to it
22:10
material shape drawable an order for it
22:12
to render itself and it's creates it
22:14
internally if you use the constructor we
22:15
used before but here what we've actually
22:17
done is that we've gone and constructed
22:19
one of these shape appearance models
22:21
ourselves using those attributes are
22:23
introduced for our item shape appearance
22:26
what we can then do is go ahead and
22:29
reuse this shape appearance model as a
22:32
common shape appearance for all of the
22:34
items in our recycler view which could
22:36
be you know one item but it could also
22:38
be a thousand colored items and there's
22:40
quite a bit of boilerplate with regards
22:42
to you know passing the attributes and
22:44
doing it every time so this allows us to
22:46
quickly create a material shape drawable
22:48
for each of our items so what we do here
22:52
is that we pass this item shape
22:53
appearance model to the constructor of
22:55
material shape drawable we set it as a
22:58
background of item view but I've gone
23:02
one step further and what I've done is
23:04
that I've adjusted the corner radius of
23:06
this material shape drawable for items
23:10
to basically behalf of the views width
23:12
to height to give it that diamond shape
23:14
that you may have seen in the floating
23:15
action button on the playground screen
23:17
if we didn't it would sort of have these
23:19
small it almost be like a rectangle with
23:22
shampooed corners or he wants to fit in
23:24
with other small components in our app
23:25
so once the view has been laid out we
23:28
calculate the corner radius which is
23:30
half the views width and then we set it
23:32
on the material shape trouble and the
23:35
effect is pretty cool now our items have
23:40
this diamond shape they're still
23:42
correctly tinted with the color of the
23:44
item itself but it's starting to really
23:46
feel like this view is fitting in the
23:49
rest of our theme the items look like
23:51
other small components in in our app and
23:54
it's really starting to come together
23:55
now so we learned here that if we want
23:58
to create a common shape appearance for
24:01
multiple items let's say in a recycler
24:04
view that use material shape draw was
24:06
the background shape appearance model is
24:08
a good approach here and also for
24:12
certain components it's okay to override
24:13
the corner size that you specify as your
24:16
small or medium or large shape corner
24:20
size in your apps team because it does
24:22
make sense for certain small components
24:25
the next thing i want to do for items is
24:27
add some touch feedback so this is going
24:30
to be when the user taps a color
24:32
that little tick appears and then they
24:34
can then go ahead and confirm afterwards
24:37
we want to provide some affordance to
24:39
you know this item is being clicked and
24:42
also which item is selected so again I'm
24:45
using my styler ball
24:47
I'm adding a new attribute yeah item
24:48
ripple color and as you can imagine this
24:51
is going to be used to tint and add a
24:52
ripple to each of the items in our
24:55
recyclerview now what I've done here's
24:57
our reference and my default
24:58
implementation something that I've made
24:60
ripple color color picker so let's have
25:03
a look at that it looks a bit scary at
25:05
first I know it's not quite a few lines
25:08
essentially it's an XML defined color
25:10
state list and it includes a bunch of
25:13
states for when you are pressing when
25:14
you're using a keyboard etc etc but it
25:17
can kind of be separated into two main
25:21
compartments here so it's when our color
25:24
picker item is selected or unselected so
25:27
this is when the user is tapped at once
25:29
to select or when the user hasn't
25:31
selected it at all and when there is
25:34
unselected we want our ripple color to
25:36
be our color on surface remembering that
25:39
our background drawable is using color
25:41
surfaces its color but then when it is
25:44
selected we actually want to be using a
25:46
ripple that is our primary color the
25:48
seams of it's strange I've told you
25:49
before that you need to be always using
25:51
on colors on surface but this is a
25:53
pattern that you'll notice in some of
25:55
the other MDC Android components we
25:57
example bottom navigation view in your
25:59
bottom navigation view if you select an
26:02
item and then you'll notice that the
26:04
reporters like this gray color if that's
26:06
your own surface color but then once
26:08
you've selected it and tap it again
26:09
you'll notice it's maybe a blue or a
26:11
yellow or whatever your primary color is
26:13
and this is to give a slight bit of
26:15
affordance as to the currently selected
26:17
item and does have a nice visual effect
26:20
as well so we basically passed this
26:25
color state list inside our view again
26:27
and then we apply it to our cycle of the
26:33
items but we need to do a few things
26:35
here to ensure that it's going to work
26:37
correctly so here's another new class
26:39
and I've been throwing them at you today
26:41
but this one is called ripple utils
26:43
it also comes as part of MDC Android and
26:46
what I've done here is that I've taken
26:47
my base item ripple color and I've used
26:49
ripple you tools to convert it to
26:51
something that adjusts the Alpha values
26:53
of that color state has to be suitable
26:55
for a ripple to be rendered in terms of
26:59
it just spits out another color
27:01
stateless so you can it's you can then
27:04
use this color stateless when
27:05
constructing your ripple so we do so by
27:09
using ripple drawable we also create a
27:12
mask drawable to ensure that our ripple
27:13
is not doesn't draw outside its bonds so
27:17
we construct this ripple drawable using
27:19
our ripple color and our mask and then
27:21
we set it as the background of our item
27:23
you pretty simple we lastly need to do
27:26
is use this is selected function here
27:30
and tell our item whether to use the
27:34
report that is our primary color or on
27:36
surface color depending on whether our
27:38
color item has been tapped and selected
27:40
by the user and the effect is somewhat
27:44
like this the user taps night and that's
27:46
not selected it's a sort of gray color
27:47
but if it is it's a blue ripple it does
27:51
provide some affordance and give the
27:52
user an indication that they're a
27:54
tapping an item but also be that they're
27:55
typing either the selected or unselected
27:57
item so we learned here that you need to
28:00
consider the color behind the ripple and
28:02
then use an appropriate on color in most
28:04
cases but sometimes we can't use the
28:06
primary color if it makes sense we then
28:10
you know construct a ripple drawable
28:12
using a bunch of classes so this is
28:14
going to be report drawable itself
28:16
ripple you tools to convert our color
28:18
state lists etc etc so the last thing I
28:23
want to discuss in terms of making our
28:27
custom color picker view adaptable to
28:30
material theming is to support dark
28:31
theme this is something that we're all
28:33
going to be happy to do in our Android
28:34
apps pretty soon given that Android q
28:36
comes with system-wide dark theme but
28:39
also that you know day night has been
28:40
there for a while and it may seem like
28:43
this is it going to be a daunting task
28:44
and that we have a lot of work to do but
28:46
actually we don't and this is how our
28:48
color picker view looks without me doing
28:50
any extra work and just flipping the
28:52
switch on dark theme and as a result
28:54
it's kind of caused by the fact that we
28:57
have used a bunch of MVC Android
28:59
attributes and classes along the way and
29:02
they come with dark sea themed support
29:03
out of the box and so it looks pretty
29:05
good but there is one more thing we can
29:08
do here to ensure that we fully support
29:12
and in order for me to explain that I'm
29:14
first going to explain what elevation
29:18
means in in a dark theme world so
29:22
elevation is the concept that your view
29:25
can be in the material design world that
29:28
it can be elevated above others and as a
29:31
results on in a light theme especially
29:33
you notice that the shadow of things
29:36
becomes more diffused to give it that
29:37
feeling that gets higher up but in a
29:39
dark theme because mostly the
29:41
backgrounds are dark the shadow is
29:43
almost invisible and so the design the
29:47
material design team proposed a better
29:48
way to represent elevation in dark mode
29:51
and that's to use what's called an
29:54
elevation overlay and that it brightens
29:57
a surface to give it the sense that it's
30:01
closer to the light source that would
30:03
otherwise be causing a shadow so again
30:06
the sounds like it's going to be a lot
30:08
of work but it actually isn't thankfully
30:12
material shape drawable includes
30:15
elevation overlays support out of the
30:17
box currently with the latest release
30:19
and we have to do a small bit of code
30:23
here to ensure that it works correctly
30:26
so knowing that we have a material shape
30:28
drawable as the background drawable for
30:31
our color picker view in our initializer
30:33
we just have to initialize elevation
30:35
overlay and then what we also have to do
30:38
is override the set elevation function
30:40
of our of our view so that we can pass
30:43
through this elevation to material shape
30:45
trouble so it knows how much to brighten
30:47
a surface by when we're in dark theme
30:50
and the result here is also quite subtle
30:54
I'm doubtful as to whether this can
30:56
actually be visible on the screen but if
30:58
we have a look here for different
30:60
elevations for our color picker view
31:02
you'll notice that the surface gets
31:04
gradually brighter as you increase this
31:07
elevation which gives the sense that it
31:09
is more raised off the background it's
31:13
worth noting here that you'll you'll see
31:15
this in a lot of the other core MVC
31:18
Android components that use material
31:21
shape drawable as they become pretty
31:22
much all of them do and there
31:23
behave this way so it fits in quite
31:25
nicely when it's amongst other
31:27
components so we learned here that
31:31
material shape draw was support
31:34
elevation overlay provider out of the
31:35
box this is another good reason to use
31:37
it other than the fact that it supports
31:39
shape theming and this is kind of the
31:42
only thing we need to consider if we're
31:43
building a custom view and want to
31:45
support dark theme so we've come to the
31:50
end we've fixed all of our sub
31:51
components and now when we place our
31:53
color picker view amongst our core
31:56
components of material design it fits in
31:58
really well it has the corners we expect
32:01
it has the topography we expect in all
32:04
the colors and generally speaking at NAR
32:06
feels at home amongst our theme and this
32:08
would actually work if we changed back
32:10
to our baseline theme we had in the
32:11
beginning or really if we changed any of
32:13
the attributes and had any kind of theme
32:15
for our app it even works with dark
32:18
theme and looks pretty good here as well
32:21
so some final considerations before I
32:24
wrap up and I'm not going to go into too
32:25
much detail about these but I added a
32:28
bunch of attributes and it has XML style
32:30
level attributes but you should also
32:31
consider adding them as programmatic
32:33
equivalents on the custom view itself so
32:35
I did add this as a further commits on
32:37
the repository and then consider
32:39
retaining your custom view States on
32:41
configuration change so for me it was
32:43
the selected color and that's it I've
32:48
come to the end we've converted our
32:50
color picker view successfully and
32:52
hopefully you've learned something about
32:54
material theming and also how you can
32:56
make your custom components responsive
32:58
to it and yeah thank you
