How to use new Android UI widgets used in Material Design specifications? - android

I have recently read over the Material Design specification and do not see any API changes/new classes/etc that relate to some of the UI widgets they use in their examples/pictures.
For example, the floating action button. I have read elsewhere that this is not (at least for the time being) included as a built in class. Is this the case for most of the other controls? Some other examples:
Flat buttons & Editable segmented pulldown buttons
Detached toolbar palette
I'm fairly new to Android development, so are these controls expected in the future? I know the L preview is a preview - so maybe these will be added eventually?

Related

How to add design tab to palette in Android Studio

This is what my palette looks like, I want to know how to add other tabs like design and appCompact.
Thank you
I'm not sure I understand what you are asking. The palette cannot be modified and is a container for components such as button, texts, etc.
Please refer to this for intro into Android Development.
AppCompact is a support library that allows for themes, colors, widgets, etc. to run on earlier devices i.e. backward compatibility.
The design view is accessed through the res folder in the layout folder. By default, called activity_main.xml.
You should go through the basics of android development so you can understand the structure, components and overview of android Studio.
EDIT:
See this link which shows you how to create custom view components
Please view this link which goes over the entire overview of the UI and how to use and customise the UI layout design(Very Useful!).
The folks that works on Android Studio redesigned the Palette window in Android Studio 3.1.2. Some of these widgets have been completely taken out.
"There is a new "Legacy" section and the "Advanced" section has gone. Along with it the NumberPicker, DataPicker, TimePicker, TextClock, Chronometer and, as far as I can see, the Transitions category has gone completely along with all its widgets."
"If you rely on any of the missing Widgets then my advice is don't upgrade until a workaround has been made available. There is no word from the Android Studio team as to why these widgets have been removed and no word on how to put them back."

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

Android Lollipop Buttons

I'm wondering about the different types of buttons available in android Lollipop. In Google's material design guidelines for buttons Google described the three different types of buttons available in API 21. The button, the flat button and the floating action button. I can't seem to find the documentation for the buttons (other than the regular). Does anyone know how to make use of the new button APIs?
Thanks,
26hmkk
There's no new API for the buttons. Material Design is a concept and can be realised using any API/framework (Android Gingerbread, HTML, Windows::Forms, etc.).
The flat button is a regular button with its elevation set to 0.
The floating action button is a regular button with its shape set to circle.
If you need a FloatingActionButton class or something like that, you should look for third party libraries.

Android: What's the difference between a title bar and an ActionBar

I can't tell if they're the same thing or not and they seem to have different methods for removing them but I'm not sure if those are just multiple methods to do the same thing or not.
So is there a difference and if there is what is it?
Ref:
https://developer.android.com/reference/android/R.id.html#title
https://developer.android.com/reference/android/app/ActionBar.html (with material design, it is usually represented by a Toolbar)
The Title bar is a small part of the UI that you can supply with some text and a color. You see it on a lot of Android 2.0 Apps. See here
The Actionbar is the bar with buttons that has back navigation etc. If you can chose, you use it instead of the Titlebar. See here
Different thing.
TitleBar - small (usually grey) strip at top of screen that lists your Application Name (mostly not used anywhere)
ActionBar - the core navigation component of modern Android apps - this is where you will put the main navigation components (including actions on the things in your activity, a title explaining where you are in the app, Share links, etc); To support this in all modern Android versions, you will need to use a library to implement this. ActionBarSherlock is a very popular one, and there is now ActionBarCompat, which was released in the latest Support Library.
Bottom line, TitleBar should be disabled in favor of ActionBar for applications targeting modern design standards

Change in seek bar in Android 3.0

I'm just wondering if the seekbar changed in Android 3.0 . I tried to create one but it showing up as a green line with a circle on it instead of the usual yellow rectangle. If so, is there any other option to create a similar seekbar to control volume on 3.0? Thanks guys.
I'm just wondering if the seekbar changed in Android 3.0 .
More accurately, it changed with the "holographic" theme that is the standard for Android 3.0 (and, presumably, beyond).
I tried to create one but it showing up as a green line with a circle on it instead of the usual yellow rectangle.
Correct. That is what your users will expect to see.
If so, is there any other option to create a similar seekbar to control volume on 3.0?
I would recommend that you leave it alone. The objective should be to give the user what they are familiar with. If most other applications with seek bars -- and the OS itself -- are using the new seek bar style, ideally you will too.
Note that the new style only takes effect if you are adopting the holographic theme (e.g., android:targetSdkVersion="11"), which means you are buying into the entire new Honeycomb look and feel (action bar, change to the way a Spinner looks, etc.).
You are welcome to use your own style and substitute in your own graphics, using the styleable portions of ProgressBar and SeekBar (SeekBar inherits from ProgressBar), or in your XML layouts (e.g., android:thumb), or via Java code.

Categories

Resources