How to change the shape of the button with an animation

7

I need to make a login screen and the login button I have to change the format of the image

I'd like to know how it's done, thank you in advance.

    
asked by anonymous 09.06.2016 / 02:15

1 answer

7

Like the Leonardo Dias commented. This is a Fragment Transition Animation Material Design . Sounds complicated but it is not.

It's just a button that turns into a view that covers the entire screen.

I think in a basic Transition workup you will already understand and succeed.

A simple example:

MainActivity.class

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.principal);
}

public void onButton(View view) {
    Intent intent = new Intent(this, SegundaTela.class);
    Button button = (Button) findViewById(R.id.button);
    ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, button, "transtion_key");
    ActivityCompat.startActivity(this,intent, compat.toBundle());
}
}

SecondTele.class

public class SegundaTela extends AppCompatActivity {

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}
}

First Layout           

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<Button
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:transitionName="transtion_key"
    android:text="Button"
    android:id="@+id/button"
    android:background="@color/colorPrimary"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:onClick="onButton"
    android:layout_marginBottom="79dp" />

 </RelativeLayout>

Second layout

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

android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:transitionName="transtion_key"
android:background="@color/colorAccent"
android:orientation="vertical">
</LinearLayout>

Detail in android:transitionName="transtion_key" , getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS) and onButton(View view) %

This code makes the animation that your image shows after the login is done (fullscreen).

    
18.09.2016 / 01:15