It is a simple gist to realize the UI ANIMATION IN PHOTOSHOP – TUTORIAL #1 provided by Taylor Ling .
Due to shadow and Z-animation, this code can work only on L-devices.
It is a simple gist to realize the UI ANIMATION IN PHOTOSHOP – TUTORIAL #1 provided by Taylor Ling .
Due to shadow and Z-animation, this code can work only on L-devices.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" | |
xmlns:tools="http://schemas.android.com/tools" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
android:background="#F3F3F3"> | |
<LinearLayout | |
android:id="@+id/container" | |
android:layout_width="match_parent" | |
android:layout_height="match_parent" | |
android:paddingLeft="@dimen/activity_horizontal_margin" | |
android:paddingRight="@dimen/activity_horizontal_margin" | |
android:paddingTop="@dimen/activity_vertical_margin" | |
android:paddingBottom="@dimen/activity_vertical_margin" | |
android:orientation="vertical" | |
tools:context=".TaylorActivity"> | |
<TextView | |
android:layout_width="match_parent" | |
android:layout_height="48dp" | |
android:gravity="center_vertical" | |
android:text="Move form one point to another point" | |
android:textSize="@dimen/text_size"/> | |
<ImageButton | |
android:layout_marginTop="@dimen/top_margin" | |
android:id="@+id/fab_move" | |
style="@style/fabButton.Move" | |
/> | |
<TextView | |
android:layout_marginTop="@dimen/top_margin" | |
android:layout_width="match_parent" | |
android:layout_height="48dp" | |
android:gravity="center_vertical" | |
android:text="Move and fade out" | |
android:textSize="@dimen/text_size"/> | |
<ImageButton | |
android:layout_marginTop="@dimen/top_margin" | |
android:id="@+id/fab_movefade" | |
style="@style/fabButton.Fade" | |
/> | |
<TextView | |
android:layout_marginTop="@dimen/top_margin" | |
android:layout_width="match_parent" | |
android:layout_height="48dp" | |
android:gravity="center_vertical" | |
android:text="Scale" | |
android:textSize="@dimen/text_size"/> | |
<ImageButton | |
android:layout_marginTop="@dimen/top_margin" | |
android:id="@+id/fab_scale" | |
style="@style/fabButton.Scale" | |
/> | |
<TextView | |
android:layout_marginTop="@dimen/top_margin" | |
android:layout_width="match_parent" | |
android:layout_height="48dp" | |
android:gravity="center_vertical" | |
android:text="Style Change" | |
android:textSize="@dimen/text_size"/> | |
<LinearLayout | |
android:layout_marginTop="@dimen/top_margin" | |
android:layout_width="match_parent" | |
android:layout_height="150dp" | |
> | |
<FrameLayout | |
android:layout_width="wrap_content" | |
android:layout_height="match_parent" | |
android:layout_weight="1"> | |
<ImageButton | |
android:layout_gravity="center_horizontal" | |
android:id="@+id/fab1" | |
style="@style/fabButton.z" | |
android:elevation="1dp" | |
/> | |
</FrameLayout> | |
<FrameLayout | |
android:layout_width="wrap_content" | |
android:layout_height="match_parent" | |
android:layout_weight="1"> | |
<ImageButton | |
android:layout_gravity="center_horizontal" | |
android:id="@+id/fab2" | |
style="@style/fabButton.z" | |
android:elevation="1dp" | |
/> | |
</FrameLayout> | |
<FrameLayout | |
android:layout_width="wrap_content" | |
android:layout_height="match_parent" | |
android:layout_weight="1"> | |
<ImageButton | |
android:layout_gravity="center_horizontal" | |
android:id="@+id/fab3" | |
style="@style/fabButton.z" | |
android:elevation="1dp" | |
/> | |
</FrameLayout> | |
<FrameLayout | |
android:layout_width="wrap_content" | |
android:layout_height="match_parent" | |
android:layout_weight="1"> | |
<ImageButton | |
android:layout_gravity="center_horizontal" | |
android:id="@+id/fab4" | |
style="@style/fabButton.z" | |
android:elevation="1dp" | |
/> | |
</FrameLayout> | |
</LinearLayout> | |
</LinearLayout> | |
</ScrollView> |
<resources> | |
<!-- Default screen margins, per the Android Design guidelines. --> | |
<dimen name="activity_horizontal_margin">16dp</dimen> | |
<dimen name="activity_vertical_margin">16dp</dimen> | |
<dimen name="fab_size">48dp</dimen> | |
<dimen name="top_margin">8dp</dimen> | |
<dimen name="text_size">14sp</dimen> | |
</resources> |
<?xml version="1.0" encoding="utf-8"?> | |
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/white"> | |
<item> | |
<shape android:shape="oval"> | |
<solid android:color="#2979FF" /> | |
</shape> | |
</item> | |
</ripple> |
<?xml version="1.0" encoding="utf-8"?> | |
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/white"> | |
<item> | |
<shape android:shape="oval"> | |
<solid android:color="#F50057" /> | |
</shape> | |
</item> | |
</ripple> |
<?xml version="1.0" encoding="utf-8"?> | |
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/white"> | |
<item> | |
<shape android:shape="oval"> | |
<solid android:color="#1DE9B6" /> | |
</shape> | |
</item> | |
</ripple> |
<?xml version="1.0" encoding="utf-8"?> | |
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> | |
<item> | |
<shape android:shape="oval"> | |
<solid android:color="#FFFFFF" /> | |
</shape> | |
</item> | |
</ripple> |
<resources> | |
<style name="fabButton"> | |
<item name="android:layout_width">@dimen/fab_size</item> | |
<item name="android:layout_height">@dimen/fab_size</item> | |
<item name="android:gravity">center</item> | |
</style> | |
<style name="fabButton.Move"> | |
<item name="android:background">@drawable/ripplemove</item> | |
</style> | |
<style name="fabButton.Fade"> | |
<item name="android:background">@drawable/ripplefade</item> | |
</style> | |
<style name="fabButton.Scale"> | |
<item name="android:background">@drawable/ripplescale</item> | |
</style> | |
<style name="fabButton.z"> | |
<item name="android:background">@drawable/ripplez</item> | |
</style> | |
</resources> |
public class TaylorActivity extends Activity { | |
ImageButton b1; | |
ImageButton b2; | |
ImageButton b3; | |
ImageButton b4; | |
ImageButton move; | |
ImageButton fade; | |
ImageButton scale; | |
private float width; | |
private float move_x; | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(savedInstanceState); | |
setContentView(R.layout.activity_taylor); | |
//Get all ui elements | |
final View view = findViewById(R.id.container); | |
move = (ImageButton)findViewById(R.id.fab_move); | |
fade = (ImageButton)findViewById(R.id.fab_movefade); | |
scale = (ImageButton)findViewById(R.id.fab_scale); | |
b1 = (ImageButton)findViewById(R.id.fab1); | |
b2 = (ImageButton)findViewById(R.id.fab2); | |
b3 = (ImageButton)findViewById(R.id.fab3); | |
b4 = (ImageButton)findViewById(R.id.fab4); | |
//set a layout listener to retrieve all dimensions | |
final ViewTreeObserver obs = view.getViewTreeObserver(); | |
obs.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { | |
@Override | |
public void onGlobalLayout() { | |
view.getViewTreeObserver().removeOnGlobalLayoutListener(this); | |
width = view.getWidth() - view.getPaddingRight(); //container width - container right padding | |
move_x = move.getX() + move.getWidth(); //button x.position + button width | |
} | |
}); | |
//Outline for elevation | |
int size = getResources().getDimensionPixelSize(R.dimen.fab_size); | |
Outline outline = new Outline(); | |
outline.setOval(0, 0, size, size); | |
b1.setOutline(outline); | |
b1.setClipToOutline(true); | |
b2.setOutline(outline); | |
b2.setClipToOutline(true); | |
b3.setOutline(outline); | |
b3.setClipToOutline(true); | |
b4.setOutline(outline); | |
b4.setClipToOutline(true); | |
} | |
/** | |
* Provide the animations | |
*/ | |
private void startAnimation(){ | |
int duration = 2500; //animation duration | |
//Move | |
move.animate().setDuration(duration).translationX(width-move_x).start(); | |
//Move and fade out | |
fade.animate().setDuration(duration).translationX(width-move_x).alpha(0).start(); | |
//Move and scale | |
scale.animate().setDuration(duration).translationX(width-move_x).scaleX(0.2f).scaleY(0.2f).start(); | |
//Animate Z-values | |
b2.animate().setDuration(duration/4*2).translationZ(4).start(); | |
b3.animate().setDuration(duration/4*3).translationZ(6).start(); | |
b4.animate().setDuration(duration).translationZ(8).start(); | |
} | |
@Override | |
public boolean onCreateOptionsMenu(Menu menu) { | |
// Inflate the menu; this adds items to the action bar if it is present. | |
getMenuInflater().inflate(R.menu.taylor, menu); | |
return true; | |
} | |
@Override | |
public boolean onOptionsItemSelected(MenuItem item) { | |
// Handle action bar item clicks here. The action bar will | |
// automatically handle clicks on the Home/Up button, so long | |
// as you specify a parent activity in AndroidManifest.xml. | |
int id = item.getItemId(); | |
if (id == R.id.action_animate) { | |
startAnimation(); | |
return true; | |
} | |
return super.onOptionsItemSelected(item); | |
} | |
} |
<resources> | |
<!-- Example customization of dimensions originally defined in res/values/dimens.xml | |
(such as screen margins) for screens with more than 820dp of available width. This | |
would include 7" and 10" devices in landscape (~960dp and ~1280dp respectively). --> | |
<dimen name="activity_horizontal_margin">56dp</dimen> | |
<dimen name="activity_vertical_margin">16dp</dimen> | |
<dimen name="fab_size">56dp</dimen> | |
<dimen name="top_margin">16dp</dimen> | |
<dimen name="text_size">20sp</dimen> | |
</resources> |