how to use transition to change the color of a circular button in android studio

Question

I'm a very basic beginner of android studio and im struggling a lot with adding transitions to my toggle button. As it is circular, once i change the background color, it turns into a square. Would be highly appreciated if someone could help me out. Thanks!

This is my layout XML for the button

<ToggleButton
        android:id="@+id/button2"
        android:layout_width="279dp"
        android:layout_height="279dp"
        android:layout_centerInParent="true"
        android:background="@drawable/roundcircle"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.012"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

This is my XML file that i used to create my circle (roundcircle)

<size android:height="283dp" android:width="283dp"/>
<solid android:color="#32CD32"/>

<corners android:radius="278dp"/>

This is the MainActivity

public class MainActivity extends AppCompatActivity {

    private ToggleButton Remote;

    private TextView Text;

    DatabaseReference database;

    TransitionDrawable transitiondrawable;

    ColorDrawable[] BackGroundColor = {
            new ColorDrawable(Color.parseColor("#ff0000")),
            new ColorDrawable(Color.parseColor("#56ff00"))
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Remote = (ToggleButton) findViewById(R.id.toggleButton);

        Button AppEffect = (Button) findViewById(R.id.button2);

        transitiondrawable = new TransitionDrawable(BackGroundColor);

        AppEffect.setBackground(transitiondrawable);

        Remote.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked){

                    transitiondrawable.startTransition(3000);

                }
                else{

                    transitiondrawable.startTransition(3000);
                }
            }
        });
    }
}

Answer 1

You can directly define a TransitionDrawable in a xml, eg button_bg.xml as follows.

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#ff0000"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="#56ff00"/>
        </shape>
    </item>

</transition>

Then set the background of the button to button_bg .

transitiondrawable = (TransitionDrawable) getResources().getDrawable(R.drawable.button_bg);