droidcon Berlin 2019
| Tweet |
|
droidcon News
Incorporating Material Theming into Custom Views
By
Nick Rout, Over
droidcon Berlin 2019
Material Theming is a means of systematically customizing Material Design to better reflect your product’s brand. It allows for easy customization of core widgets in terms of three main subsystems - color, typography and shape - when using the Material Theme Editor and Material Design Components for Android. However, how would these subsystems be incorporated into custom components?
Custom Views can (and should) feel at home amongst the core components of Material Design. In this presentation, Nick will be covering approaches to making Views responsive to Material Theming. With the aid of a practical example, this will include an intro to Material Theming and MDC-Android, basic theme/style attribute support in Custom Views and a deep dive into key MDC-Android classes such as MaterialShapeDrawable, RippleUtils, ElevationOverlayProvider and more.
Transcript
English
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:37
it actually is
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:53
screen
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:17
need to and then
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:29
color
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:54
see now that
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
be
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:35
by the okay button
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:07
of code
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:58
the material spec
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:10
dark theme
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
33:04
you
33:06
[Applause]
droidcon News
Tech Showcases, Developer Resources & Partners
EmployerBrandingHeader
https://jobs.droidcon.com/
jobs.droidcon.com
Latest Android Jobs
http://www.kotlinweekly.net/
Kotlin Weekly
Your weekly dose of Kotlin
https://proandroiddev.com/
ProAndroidDev
Android Tech Blogs, Case Studies and Step-by-Step Coding
/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando
Meet one of Berlin's top employers
/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success
Google Play resources tailored for the global droidcon community |
Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.