the design support libraryhas a built in fab widget. it already has ripples andelevation enabled. but it's a good exerciseto wire up one yourself to see what's been done for you. we're going to create this app.
How To Animate Images Xcode, it has two fab widgets. one we've created by hand, and onethat uses the design support library. so i've gone ahead andcreated a new project and selected the blank activity option.
in my build.gradle file, i've made sure to add the designsupport library as a dependency. at the core of a fabwidget is an image view. we can make life a little bitsimpler by using an imagebutton. i've set the background touse the accent color, and a plus button as the source image. fabplus is a vectordrawable i've created. you could use an image with transparentimages, but it's more scalable to use a vector drawable because they canbe resized without any quality loss.
as you can see here,our button isn't very circular. we can do that by settingit's background to be a shape shaded in our accent color. now is also a good timeto set our elevation. because we use the background drawable, andriod can use that datato calculate a shadow. we don't need it in this case, but you could create a custom outlineprovide to control how shadows are cast. you can see more information aboutthat in the instructors notes.
so going back to our button,we have a button that we can click and that has elevation butit doesn't have any ripples and it doesn't raised to our touch. let's go ahead and add a ripple. to enable ripples, we need to change thebuttons background from a static shape to one that's enclosed in a ripple tag. the color control highlight is the colorapplied to things like ripples, list selectors, etc. the main differencebetween oval_shape and
oval_ripple is that the rippletag encloses our shape. the next thing we need to do, is add a material reaction to the fabwidget to raise it up to meet our touch. to do this, we'll add a state listanimator to run an animation when the user touches the button. in the layout,we reference a file fab_raise, that lives in the resourcesanim directory. we have two object animators, one for when the button is pressed andone for when it's released.
notice how we animated the translationz property of the button, rather than the elevation. the final elevation is calculated byadding the current value of translation z to the base elevation we set in code. so this translation z propertygoes from a value of 0 to 8 dps. now if we remember, our fab buttonhas a resting state of six dp. so it's going to actually gofrom an elevation of 6dp to 14. you won't generally need toimplement fabs from scratch and you definitely shoulduse the design library.
but it's likely that you'll need tocreate custom widgets that you'll need ripples for or elevation changes.
No comments:
Post a Comment