Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material Design layout animation

One of the ideas of Android L is that popup window need to start their apparition from the point where the user tapped the screen.
For example, in Chrome Beta (@time * 5) :
Chrome Beta

The idea is to be able to make the view grow from any pivot point (not just the predetermined position of the overflow button) Has anybody been able to do this or is not doable at the moment ?

like image 853
Teovald Avatar asked Aug 09 '14 15:08

Teovald


People also ask

Who owns Material Design?

Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.

What is a motion design system?

Material Design's motion system is comprised of four patterns for transitioning between components or full-screen views. The patterns are designed to help users navigate and understand an app by reinforcing relationships between UI elements. The transition patterns are: Container transform.

What is Material Design pattern?

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. To use material design in your Android apps, follow the guidelines defined in the material design specification and use the new components and styles available in the material design support library.

What are the Material Design common ideas?

Material Design is an Android-oriented design language created by Google, supporting onscreen touch experiences via cue-rich features and natural motions that mimic real-world objects. Designers optimize users' experience with 3D effects, realistic lighting and animation features in immersive, platform-consistent GUIs.


1 Answers

It seems like it there is no clean way to do this.
The only viable option I have found is to write 4 different xml animations (for the 4 corners, more if you want to allow for centered growing), all ScaleAnimations from 0 to 1, with different pivot points for each (the 4 corners).

Then, use a DialogFragment :

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) 
{
    final Dialog dialog = super.onCreateDialog(savedInstanceState);
    dialog.getWindow().getAttributes().windowAnimations = 
         R.style.downRightCornerAnimation;
    //instead of referring to R.*, call a method to get the specific
    //resource you need for a given start position
    return dialog;
}

And one example of such an animation :

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/linear_interpolator"
       android:fromXScale="0.0"
       android:toXScale="1.0"
       android:fromYScale="0.0"
       android:toYScale="1.0"
       android:fillAfter="false"
       android:duration="200" 
       android:pivotX = "0%"
       android:pivotY = "100%"/>   

It is very unwieldy and hacky but I don't think the SDK gives us a better tool to do this (AFAIK you can't just inject a dynamic ObjectAnimator in DialogFragment or PopupWindow)

like image 96
Teovald Avatar answered Oct 22 '22 14:10

Teovald