How I can implement a button on Android like this (3D-ish)?

Question

I want to implement a button like the one in the "Big Web Quiz App" (Link to Play Store).

For me, it doesn't seems to use some sort of OpenGL, i can't found any references on the dissasembled code. Maybe is an image?

Thanks in advance

UPDATE: I've uploaded a video, to state clearly that there is a transition, it's not a pressed-unpressed button. LINK

It's only 2 images (un/pressed). Use a [StateListDrawable](http://developer.android.com/intl/ru/guide/topics/resources/drawable-resource.html#StateList). — Phantômaxx, Aug 26 '15 at 11:28
That's not really a 3-D button.. Its just mimicking 3D, by adding different colors, and after clicking its being replaced by another image.. basically as Frank said, they are 2 images, you have to use `Selector` — Sharp Edge, Aug 26 '15 at 11:35
My fault, in that GIF appears to be only a two-state button. I've edited the question with a link to a video. Sorry — webo80, Aug 26 '15 at 12:11

score 2 · Answer 1 · edited May 23 '17 at 10:30

2

You can achieve this by using Frame Animations, its like a short video build from few images.

animation-list is one option to go, read more about it here:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="true">

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_0"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_25"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_50"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_75"/>

    <item
        android:duration="500"
        android:drawable="@drawable/ic_heart_100"/>

</animation-list>

News since 2015 to Aug 2016 lol

Today there are more options to solve this problem, you can use AnimatedVectorDrawable or ObjectAnimator or use android-pathview library that was developed on top of AnimatedVectorDrawable, it makes the life easier. But in any way you will have to put some work to achieve your desired effect.

edited May 23 '17 at 10:30

Community

1
1

answered Aug 26 '15 at 12:19

Ilya Gazman

31,250
24
137
216

Thanks for the response, but using this, I'm not going to get a smooth transition like in the video, or I'm wrong? Sure I can add more frames, but I don't think it will be the more efficient way to do that – webo80 Aug 26 '15 at 12:28
@webo80 I think it will be just fine. But alternatively you can try building vector animation using Canvas or OpenGL, do some research about the verity of android animations. – Ilya Gazman Aug 26 '15 at 12:31
Thanks, I'll definitively take a look at it! – webo80 Aug 26 '15 at 15:30
This answer was not exactly I was looking for, but thanks anyway – webo80 Aug 09 '16 at 06:31
@webo80 lol, you got yourself a timing... I update the answer any way ;) – Ilya Gazman Aug 09 '16 at 07:37

score 0 · Answer 2 · answered Aug 09 '16 at 12:54

Off the cuff, this would seem to require a custom widget.

The widget itself would consume the entire space, from the upper-left corner of the foreground through the bottom-right corner of the 3D background. The custom onDraw() of the widget would render the foreground, perhaps in the form of a TextView with a compound drawable on the left. onDraw() would also render the shaded parallelograms that form the 3D effect, to consume the rest of the space between the foreground and the lower-right corner of the widget.

On a click event, you would use the animator framework to change the size of the widget, anchoring it on its bottom-right corner. The animation would change the size to the smallest position, then reverse it back to its original size (assuming that this button is to behave like a Button, instead of some sort of CompoundButton). The onDraw() logic should be able to handle this, rendering the foreground in the correct location and reducing the size of the parallelograms accordingly.

This is all an educated guess, as I have never tried anything like this. It will also get complicated if you want to support RTL by reversing the 3D effect (foreground moves down to the left, instead of down to the right).

How I can implement a button on Android like this (3D-ish)?

2 Answers2