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
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
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
Then create an instance with your color and style. Set it as background.
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
I'm trying to add simple button on my layout, my min api is 14, The problem is when run the app on android < 5.0 the button doesn't have any animation , How can I fix that?
I think the animation you are talking about is Ripple Effect. That is a feature of material design. And remember the official material design theme is supported for android >= 5.0.
I guess that you are using default theme. So, when you run your app on android 5.0 or above it will using material theme (with ripple effect for button). However, when you run android < 5.0, the theme now is not material theme and button doesn't have ripple effect.
For solve your problem, you need using third party libraries to apply material design to your app. Here is list of awesome ui library and you can find some libraries that help you applying material design.
The list of awesome ui library: https://github.com/wasabeef/awesome-android-ui
I read a lot topics on Material design and sawed lot of example on it. Recently I installed a calendar application that called Today Calendar which have a Material design and Requires Android 4.1 and up, also the animations and transitions are all working on 4.1 and later.
The FAB's transition is very nice along with other views. I want to implement it in my application that requires API Level 14+, when the user clicks on the FAB it will transition to buttom with nice animation.
My design looks like this:
How to implement this transition?
I want a transition for a list item that opens detailsActivity. I think in 5.0 we can use
getWindow().setExitTransition(new Explode());
Is there any way we can implement same effect in older devices?
There are few community backports for transitions:
https://github.com/guerwan/TransitionsBackport
https://github.com/andkulikov/transitions-everywhere
which offer you to use backported transitions. From my perspective I can recommend you Transitions Everywhere library - I applied it successfully in production code.
Unfortunatelly those backports don't support transitions between activities and fragments - you can use it only by using Scenes. They represents different layouts and you replace one by another in layout container.
Due to you scenario, probably viewgroup, where your list is placed, will be you container.
Im trying to make an application Lollipop & Material Design compatible following the latest guidelines.
Anyhow I'm having troubles finding the appropriate documentation for the components for Lollipop on developer.android.com it kinda seems like the documentation is stuck with KitKat and appropriate documentation is missing.
I have the need to implement Flat Buttons like these (http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons) and Icon Toggles like these (http://www.google.com/design/spec/components/buttons.html#buttons-other-buttons).
Besides that I'm also trying to implement big style App Bar/Toolbar - again can't find an appropriate documentation.
Any tips?
for the new tool bar api have a look at http://developer.android.com/reference/android/widget/Toolbar.html
http://android-developers.blogspot.co.il/2014/10/appcompat-v21-material-design-for-pre.html
for button styles you just need to use elevation
https://developer.android.com/training/material/shadows-clipping.html
for buttons togglers just use selectors / ripple effect
https://developer.android.com/reference/android/graphics/drawable/RippleDrawable.html
gl
Well it depends on what you are looking for and want to achieve for the material design look and feel.
The url's you have are more the design guidelines. About how everything should look. It's as important as the developers guidelines if you design too.
Material Activity transitions
But when you think about the material design transitions where they don't want those static transitions like "Go from this activity to another" But more like a dynamic transition you can look for examples and explanation here: https://developer.android.com/training/material/animations.html
Ripples
If you want to know more about the touchy ripple effects and things like how to get the 'hairline' color of components you can find more here: http://android-developers.blogspot.nl/2014/10/implementing-material-design-in-your.html
Elevation
Also Material design wants you to play more with the elevation of elements. Check that here: https://developer.android.com/training/material/shadows-clipping.html
And ofcourse there is more. Look in the left menu where you can find more best practice examples. Also the new Android 21.+ SDK offers new examples released a couple of weeks ago. Check those out to see how google implements Material design for api level 21.+