Development issue/problem:
Google has shown some good ways to display buttons on Lollipop here.
I’m talking about raised keys and flat keys.
How can I mimic them on the preview versions of the lollipops, aside from the special effects (ripples, etc…)?
I’m talking about this and that.
Of course I want to use special effects for Lollipop and beyond.
I know there are already several (and even many) articles on this subject, but I don’t see any that attempt to reproduce it fully.
How can I solve this problem?
Solution 1:
Answer updated :
We recommend using the Google appcompat application library to transfer material design styles to your application. The button doesn’t seem to come back up (flat buttons are used instead), but it still moves back a button that adequately fits the design style of the material. I recommend you take this approach.
If you still want to move the relief effect to the back, you’ll need to use a third-party material library, or you can check out my old solution below that uses CardView and implement your own.
Implementation of the appcompat library with the official Google backport on Material Design :
Compile com.android.support:appcompat-v7:+
Next, you need to define the application’s theme in the styles.xml file.
And in your AndroidManifest.xml, make sure the above theme is configured correctly:
After the above configuration, you need to make sure that all your activities are expanded to AppCompatActivity, and from there all your buttons will be enlarged in Material Design style.
If you are using a custom button in your project, make sure you are extending the AppCompatible button rather than extending the button. This applies to most of your custom views: AppCompatTextView, AppCompatEditText, etc…..
How does it work?
All your xml android layouts are augmented with something called LayoutInflater. The LayoutInflater is provided by Activity and has a LayoutInflaterFactory option that can be used to replace the default implementation of standard Android widgets like Button and TextView. If you use AppCompatActivity, you get a non-standard LayoutInflater that blows up instances of special widgets that support Material Design!
—————–
Old answer:
—————–
So Android gave us CardView to replicate this behavior. It offers a view with rounded corners that casts a cast shadow. You can also look at the #setCardElevation() method.
You can add the CardView library to your Cradle project:
Compile com.android.support:cardview-v7:+.
CardView uses the Lollipop implementation for this if it is available (because Lollipop shadows are better), otherwise it copies it as best it can.
Here’s an example:
The above code works on version 5.0 :
The above code works under 4.4.4 :
There seems to be a discrepancy in the fonts, as the sans serif font has a different weight or is not supported in version 4.4.4, but this can be easily fixed by enabling the latest version of Roboto and replacing the fonts in TextViews.
Your defined hardware documentation indicates a higher level button. CardView is the way we do everything with Sublime.
Solution 2:
Add an account library to your application. (The latest version can be found here.) To do this, add a dependency to your build.gradle :
dependencies [
compile fileTree(dir: ‘libs’, include: [‘*.jar’])
compile ‘com.android.support:appcompat-v7:21.0.3’
}
Specify your program in the styles.xml file, located in the values folder:
In the manifest.xml file, define the declared style as the style to use for your :
Explain the embossed button in your layouts as follows
Explain the flat wrench as follows:
The result on both devices is 4.4 (phone) and 5.0 (tablet) :
Details can be found in the official documentation: http://developer.android.com/training/material/theme.html.
Solution 3:
I’m getting the same effect,
android:background=@android:drawable/dialog_holo_light_frame
My tested question:
Solution 4:
According to Yigit (google dev on cardview) he’s hacky, but he’s on his way down.
You can use negative numbers to get rid of pads and fields in the CardView.
Tested on api 15 nexus 1 and nexus 4 emulators. This solution works with the provisional Lollipop.
Code:
last CardView cardView = (CardView) rootView.findViewById(R.id.elevated_button_card);
last button = (button) rootView.findViewById(R.id.elevated_button);
button.setOnTouchListener(new View).OnTouchListener() {
ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, cardElevation, 2, 8)
.setDuration
(80) ;
ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, cardElevation, 8, 2)
.setDuration
(80) ;
General Boolean
touch screen display (see v, MotionEvent event) {
(event.getAction()) {
case MotionEvent.ACTION_DOWN:
o1.start();
pause;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
o2.start();
pause;
}
return;
}
})
Solution no. 5:
I’m working on a material compatibility library. I wrote my own class of buttons with styles close to the material, animated shadows and a swinging effect. While it’s not perfect yet, you can try it here.
Solution no. 6:
In addition to @spierce7’s reply, I changed the layout a bit. So now it has a relative layout that puts our custom text view in the middle of the map view. Well, here it is.
// set a non-standard height/
Solution no. 7:
See my answer for a solution that keeps the constraint and the increased effect on the precursor, while keeping the ripple effect on the lollipop without the drawback, here
Good luck!
Related Tags: