Anyone implemented Android Material Design Raised Button as a 9-Slice?

Solar2D Widgets
#1

I’m particularly trying to create the latest Android Material design raised button look.

http://www.google.com/design/spec/components/buttons.html#buttons-usage

I’m just hoping someone already has this 9 slice created and the proper image sheet settings, so I don’t have to figure it out. :slight_smile:

Or, is there a way to create it dynamically some other way? In widget terms, it’s just a shape button, but with a shadow effect. I could do the button easily without the shadow, but… I want the shadow.

Thanks,

Dave

#2

Dave: I’ve implemented a lot of Material Design elements in Corona SDK including the flat button (not the raised button but they’re cousins). One way to do it without an image sheet is with a container. Create a module and make sure you pass event.x so you can animate appropriately based on touch location. The drop shadow you can render on the fly.

#3

Thanks for the reply!

How can I render the drop shadow on the fly? I don’t see a way to do that built-in to Corona? I’ve attempted to use the filter effect for blurGaussian before, and it killed the performance of my app.  If that worked, I could just create a black rectangle underneath the button and blur it appropriately.

Dave

#4

What I would do is create a drop shadow image in Sketch, export as PNG, and then use that. Because it will be a rectangle it should resize nicely.

#5

Dave: I’ve implemented a lot of Material Design elements in Corona SDK including the flat button (not the raised button but they’re cousins). One way to do it without an image sheet is with a container. Create a module and make sure you pass event.x so you can animate appropriately based on touch location. The drop shadow you can render on the fly.

#6

Thanks for the reply!

How can I render the drop shadow on the fly? I don’t see a way to do that built-in to Corona? I’ve attempted to use the filter effect for blurGaussian before, and it killed the performance of my app.  If that worked, I could just create a black rectangle underneath the button and blur it appropriately.

Dave

#7

What I would do is create a drop shadow image in Sketch, export as PNG, and then use that. Because it will be a rectangle it should resize nicely.