Material Design Buttons and other components - android

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.+

Related

Using material design, how to programmatically create a Material Button?

I know how to create a normal button and textview programmtically. However, the documentation for Material design components is a bit lacking. How would I dynamically create a Material Button (and other Material Design components)?
Was referring to the official documentation here but it only shows xml creation. Seems like it should be fairly straightforward but I haven't found anything on google / stackoverflow covering this.
You need to add proper dependency. Check this link Then you can create it as average view.

In Android, how to achieve this transition effect where incoming material elements expand into view?

As per Google's material design specs, under Animation - meaningful transitions
https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3RXRFb0tRZEZDUUU/animation_meaninfultransitions_considerations_do.webm
Sometimes wish they could provide some sample codes right beside the design specs..
I couldn't find anything on google, probably because I am not sure what keywords to use.
Thanks!
The example that you linked appears to be using a reveal transition animation with a shared element between two Activities. For details on how to get your feet wet, take a look at the Android training documentation on Defining Custom Animations.

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
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

How can I get the Material Design Viewpager design and transition effect in android 4.0+ app

I'm using a ViewPager in my app but I would like to make it look exactly like the material design view pager. How can I go about this?
Take a closer look at the Android Developers blog post about how to achive Material Design features for Pre-Lollipop Devices: http://android-developers.blogspot.de/

Custom Title Bar Similar to this one

I want to create a custom title bar, somewhat like this, in my Android app. Please pardon if my question seems idiotic, I'm a beginner. Can anyone tell me if it is a titlebar or an Action bar? Plus how can I give this Shaded Black color to my titlebar/action bar?
PS: I'm using GingerBread on my Android. My app will require minimum SDK version to be 4 but it targets Jelly bean too. In GingerBread, I can't make use of ActionBars. Please help me with the problem. It would be highly appreciated.
You will want to use the ActionBarSherlock library for this (which will allow you to use this all the way back to SDK version 4).
It is reasonably easy to style, and is for sure the right way to do this. Lots of examples for this, as it is a very popular library.
http://actionbarsherlock.com/
If you are wanting to target min API 4, then as you state you'll be unable to use the ActionBar.
So you could just create your bar as a LinearLayout or something with whatever buttons / icons you want on it and have it at the top of all of your Activities. If you have many of them it would probably be worth it to refactor the Bar (click handlers and such) handling into a subclass of Activity, and then extend that with all of your other activities.
The visual effect could be easily achived with a 9-patch png set as the background of a LinearLayout. Just make the gradient you want in photoshop/Gimp and drop it into draw9Patch to add the pixels on the edge that will allow it to stretch nicely to fit any screen.
Edit: using actionbar sherlock as others suggested is probably a better idea than doing it "manually" as I suggested.

Categories

Resources