How to change the shape of the button with an animation

Question

I need to make a login screen and on the login button I have to change the format like this image

I would like to know how it is done, thanks in advance.

Answer 1

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

It’s just a button that turns into a view that covers the entire fabric.

I think in a basic research of working Transition you will already understand and get to do.

---

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());
}
}

---

Segunda ndatela.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 on the vestments android:transitionName="transtion_key", getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS) and in the method onButton(View view)

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