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
Related
I'm working on an Android TV application but I'm not quite happy with the standard shadow rendered by the VerticalGridFragment, I'd like to have it smaller and a bit less darker.
I've searched through the code but I didn't find any full working solution.
In my VerticalGridPresenter subclass, the only method I can override is createShadowOverlayOptions but I can't get the result I want.
The only workaround I came up with is to define the following dimensions, so that the ones declared in the Support Library are overridden:
<dimen name="lb_material_shadow_details_z">3dp</dimen>
<dimen name="lb_material_shadow_focused_z">4dp</dimen>
<dimen name="lb_material_shadow_normal_z">3dp</dimen>
But it's more an hack rather than a proper solution.
This is the standard shadow:
This is the result I get with my current hack:
As you can I see, it's smaller but I cannot change the color.
Is there a proper way to set shadow color and dimension for VerticalGridFragment and RowsFragment classes?
I'm using latest Leanback version:
compile 'com.android.support:leanback-v17:25.2.0'
My minSdkVersion is 17 because of a custom Android TV player, but it's fine to have it working starting from 21.
I've actually asked the Leanback team about this before and they said the recommended way of customizing their components is through overriding the styles and dimens. So that might help assuage some of your worry.
However, we also had to customize the shadows on our views. We did this by creating our own views and our own view presenters (instead of using their ImageCardView). With that we were able to set our own shadows at the presentation level.
If you look at the documentation for ListRowPresenter the docs say:
ListRowPresenter applies a default shadow to each child view. Call setShadowEnabled(boolean) to disable shadows. A subclass may override and return false in isUsingDefaultShadow() and replace with its own shadow implementation.
To see more of how they handle shadows, please look into the source code of ListRowPresenter and also check out the ShadowHelper and ShadowHelperApi21 classes to see how they've implemented adding shadows to their list items. We actually just copied over those two classes since they are package-local.
You can also override ShadowOverlayHelper.Options createShadowOverlayOptions() in ListRowPresenter which gives you some ability to change corner radius and focused and unfocused z.
I am in a fairly serious predicament. I have built my entire app using ?attr/colorPrimary to pick the color for background shapes, as I have devised a way to dynamically change the theme and color. This works perfectly on 5.0, but on all 4.x devices, ?attr/colorPrimary crashes the app. Why does Android studio not alert developers to this incompatibility?
Is there a support version of ?attr/colorPrimary?
colorPrimary is already part of AppCompat as of version 21 and works back to API 7. Your problem is instead with your theming code.
I believe it was added after Android Lollipop - API 21.
At least this link shows that it was added between API 20 and 21:
https://developer.android.com/sdk/api_diff/21/changes/android.R.attr.html
attr/colorPrimary just point to colorPrimary defined in current theme.
I'm not sure how you implemented your theme.. But you can create your own attr... This option is good only if you support several themes.
If you have a single theme, I believe you can replace it by a color.
API 21:
Material design style
Notifications are drawn with dark text atop white (or very light)
backgrounds to match the new material design widgets. Make sure that
all your notifications look right with the new color scheme. If your
notifications look wrong, fix them:
Use setColor() to set an accent color in a circle behind your icon
image. Update or remove assets that involve color. The system ignores
all non-alpha channels in action icons and in the main notification
icon. You should assume that these icons will be alpha-only. The
system draws notification icons in white and action icons in dark
gray.
The problem is a glitch in Android code. See this, it is not the exact same but the reason is.
In case anyone out there has this problem, I want to explain my workaround.
Remove all instances of "?attr/color(Primary, Dark, or Accent)" and attempt to mimic the effect in each individual element in each individual activity. This is not a full work around, but for me it works. Google really needs to resolve this issue. If you know a better work around, please let me know and I will accept it as the better answer as long as it works.
I am developing an app that will have a very similar interface to this , my question is, all that animation is from material design, but do i have to program all that stuff or android have anitmation libraries for material design that do that?
Some of the design stuff and animations are only available in android 5.0 and above only, like the FAB button and reveal effect.
2 options
Either write the code for animations and layout yourself for pre 5.0 devices
or
Use libraries that do the same thing like fab button and reveal effect etc
There are a lot of open source libraries that you can use in your project for e.g FAB button, arc animation etc.. to support devices before 5.0 Also then you don't forget to read there licence.
So, in short you will get small components from here and there like
reveal effect, arc animation, fab etc use them to achieve the effect.
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.+
There are lots of way to style ListViews to give them elegant look, but all of them involve modyfying the adapter or writing additional code.
With the release of Android 4.0, unfortunetely things have to change. Google polished their Holo theme and gave it new look. All of the developers are now encouraged to use it, in order to make all apps look the same.
And here's the problem. Google rolled out 4.0, but there are still people using older Android versions. We can't just leave our previous custom application themes and use Holo, because it will ruin visual experience for users with older devices. And we can't force 4.0 users just to use Holo, because let's be honest - it's still not perfect.
The goal is to use builtin themes system and prepare some alternatives for Holo, which will look great on all devices. Then we can just switch between Holo and our themes with just setTheme() and no additional problems. Unfortunetely it's not that simple. We are limited to the capabilities of existing theme system and some things are just hard to do. And here comes my question.
Taking everything I've mentioned into consideration, how can we control ListView look? I'm not able to figure out, how to:
create list with rounded corners and make sure the selector background doesn't ruin it when selecting first/last element
create rounded corners not for the list but sections separated by headers, something like here:
The solution should affect ListViews created by PreferenceActivity without any additional lines of code. Everything should be contained in the theme:
<theme name="SampleTheme" parent="android:Theme">
...
</theme>
I kindly ask not to post solutions that do not use styles & themes. They can be easily found in another questions, here on Stack Overflow.
Thanks in advance.
I can see two ways to solve this.
One is simply to use a theme for your listviews specifying the background, which in turn is a 9 patch with rounded corners or an xml shape you specify (with rounded corners as well). This will have the side-effect of the listview row selector appearing 'over' the background you specified, therefore kind of spoiling the effect. It is quite straightforward to implement though.
The second option is to simply always add headers and footers to your listviews, which have backgrounds that are selectors with rounded corners on top (and bottom). You can specify styles for these as well if you really want to.
Sorry for this last comment, but I had to say it. Please don't try to make your app look like an iPhone app :)