CODEWITHSUNDEEP
androidmaterial-design
Cristina
Cristina

Reputation: 387

Material Theme compatibility

I'm studying Material Theme and some things don't work in version lower than 21, like ripple effect, change the status bar color and primary text color, view elevation... even I using the v7 library.

For view elevation I tried ViewCompat.setElevation(view, value) and doesn't work. Anyone knows why and how I have to do?

For the ripple effect I tried to put the attribute android:background="?android:attr/selectableItemBackground" in the XML, but even doesn't work. I want a way of do it work in any version with just a code (without have to do separate codes for 21 version and pre 21 version). Is there a way of do this? Anyone knows how?

Thanks

Upvotes: 1

Views: 323

Answers (1)

Zielony
Zielony

Reputation: 16537

The deal is that Material Design is a design language, a concept used by designers to prepare consistent UI/UX. It's not 100% implemented anywhere.

Android Lollipop has implementation of things which can be helpful in creating Material Design - compilant apps. These include shadows and ripples. Lollipop doesn't have high level Material Design things, like Floating Action Button, Snackbar, floating TextView labels and others. These are available as part of Design Support Library. You can create them by yourself as well.

Both shadows and ripples can be implemented on older Android versions to some extent. For example it's possible to create an animated ripple drawable, use it as a button's background and make it react to touch events. It's not possible to make it work smoothly, because that would require running the animation and rendering in a background thread which is available only on Lollipop and Marshmallow. Another examples are the circular reveal, the elevation system (not shadows, the drawing order) and truly rounded corners of CardView.

Colored/translucent status bar is an example of a thing which is totally reserved for Lollipop and Marshmallow, because it's a part of the system and cannot be backported at all. Another example is the new transition system.

Some things are not supported even on Lollipop. For example a floating EditText's selection toolbar. It's available only on Marshmallow. SVG graphics is not 100% supported on any Android version. Vector graphics on Lollipop and Marshmallow is a kind-of-an-SVG implementation with support for popular tags and settings. If you wish to have good vector graphics in your app, it's better to use a third party SVG reader and renderer.

ViewCompat and AppCompat make things compile. It doesn't mean that these things will work and look like on Lollipop. Design Support Library adds widgets, but most of them doesn't work like they should on Lollipop. For example CardView doesn't really cut corners, shadows are drawn with gradients, states aren't really animated. The two things you mentioned are implemented like this (pseudocode):

ViewCompat.setElevation(view, value){
    if(Lollipop)
        view.setElevation(value);
    else
        // do nothing
}

and

selectableItemBackground = Lollipop ? new RippleDrawable() : grayColor

There's a bunch of Material Design implementations scattered over github. Some of them implement only one thing, like RippleDrawable or FAB. Other libraries provide quite complete suport for widgets, shadows, etc.

Google is working on Design Support library adding more and more widgets. It doesn't have ripples or shadows yet though and probably won't have them due to performance and architectural difficulties.

I have my own library as well. I was fascinated by Material Design and frustrated by lack of implementation, so I started working on my own implementation of shadows, ripples, animations, widgets and other things. It's open source, free to use and you can find it here: https://github.com/ZieIony/Carbon

Edit: RippleDrawable

  1. You need a RippleDrawable implementation. That should be easy as the source is open. My implementation is here: https://github.com/ZieIony/Carbon/blob/master/carbon/src/main/java/carbon/drawable/RippleDrawableFroyo.java

  2. Then create an instance with your color and style. Set it as background.

  3. Run RippleDrawable's animation in onTouchEvent of your view.

It's much more complicated to prepare a complete ripple with borderless mode, multiple ripples, layers, drawable states and all the stuff. If you wish, you can find all of those in Carbon (except multiple ripples). It's not only xml, but also overriden methods, extended widgets, layouts, attributes and styles.

There are simple implementations of ripples on github. If it's enough for you, you can just download a library and use it. For example this one: https://github.com/balysv/material-ripple

If you'd like to use ripples inflated from xml, it's possible as well. Check out this library: https://github.com/ozodrukh/RippleDrawable

Upvotes: 3

Related Questions