GOTO 2016 • Smoke & Mirrors the Magic behind Wonderful UI in Android • Israel Ferrer Camacho

By: GOTO Conferences

41   1   3476

Uploaded on 10/28/2016

This presentation was recorded at GOTO Copenhagen 2016
http://gotocph.com

Israel Ferrer Camacho - Android developer at Twitter

ABSTRACT
Learn the secrets and tricks behind some of the most magical UIs in Android. [...]

Download slides and read the full abstract here:
https://gotocon.com/cph-2016/presentations/show_talk.jsp?oid=7708

https://twitter.com/gotocph
https://www.facebook.com/GOTOConference
http://gotocon.com

Comments (4):

By anonymous    2017-09-20

You should have a tolerance distance, which is called "slop" in Android world. If the gesture is less than that tolerance you should just disregard it.

private static final int SPAN_SLOP = 7;

...

@Override
public boolean onScale(@NonNull ScaleGestureDetector detector) {
    if (gestureTolerance(detector)) {
        // performing scaling
    }
    return true;
}

private boolean gestureTolerance(@NonNull ScaleGestureDetector detector) {
    final float spanDelta = Math.abs(detector.getCurrentSpan() - detector.getPreviousSpan());
    return spanDelta > SPAN_SLOP;
}

As an example you can see showcase open-source app made by @rallat.

enter image description here

Here you can find source code and presentation at GOTO Copenhagen 2016.

Original Thread

By anonymous    2017-09-20

Although the answer provided by rupps may solve the problem, but personally I would not use that approach, because:

  • It allocates Bitmap object on the main thread: you should strive not to do that unless in a real need.
  • It unnecessarily * adds boilerplate to the codebase.

* Unnecessarily, because framework provides appropriate API, which is mentioned below.

So, the problem you are trying to solve is to animate a View out of the bounds of it's parent. Let's get acquainted with ViewOverlay API:

An overlay is an extra layer that sits on top of a View (the "host view") which is drawn after all other content in that view (including children, if the view is a ViewGroup). Interaction with the overlay layer is done by adding and removing drawables.

As mentioned by Israel Ferrer Camacho in his "Smoke & Mirrors" talk:

ViewOverlay is gonna be your best friend forever ... in animations.

As an example use cases you can see this:

enter image description here Animating icons using ViewOverlay API. This looks like shared element transition?? Well, that's because Transitions API internally uses ViewOverlay.

Also a nice example by Dave Smith, demonstrating difference between using ViewOverlay and Animator:

In order to complete the answer, I'll post a chunk of code from Dave Smith's example. The usage is as simple as this:

container.getOverlay().add(button);

The button would be "overlayed" atop of container right in the coordinates where it is in the view hierarchy. Now you can perform animations on this button, but the crucial point is to remove the overlay once you do not need it:

@Override
public void onAnimationEnd(Animator arg0) {
    container.getOverlay().remove(button);
}

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.