Android：切换按钮以使按钮单击 animation？

Question

I want to replicate the same animation when you click a button on a toggle button. Like the area to turn grey with a darker grey circle to come from the middle etc.

Currently the toggle button doesn't do anything when clicked except change the text (which I want it to do).

In the layout I've got the top text view to as a placeholder to check if the toggle button below performs identically to it.

Is it possible to replicate a button click animation?

Here is the Java code:

package com.example.testttsactivity;
import android.os.Build;
import android.speech.tts.TextToSpeech;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import android.widget.ToggleButton;

import androidx.appcompat.app.AppCompatActivity;

import java.util.Locale;

public class MainActivity extends AppCompatActivity implements TextToSpeech.OnInitListener {
    TextView speakText;
    TextToSpeech textToSpeech;
    ToggleButton toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        speakText = findViewById(R.id.txtToSay);
        toggle = findViewById(R.id.toggleButton);
        textToSpeech = new TextToSpeech(this, this);

        toggle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (toggle.isChecked()){
                    textToSpeak();
                } else {
                    silence();
                }
            }
        });
    }
    @Override
    public void onInit(int status) {
        if (status == TextToSpeech.SUCCESS) {
            int result = textToSpeech.setLanguage(Locale.US);
            if (result == TextToSpeech.LANG_MISSING_DATA || result == TextToSpeech.LANG_NOT_SUPPORTED) {
                Log.e("error", "This Language is not supported");
            }
        } else {
            Log.e("error", "Failed to Initialize");
        }
    }
    @Override
    public void onDestroy() {
        if (textToSpeech != null) {
            textToSpeech.stop();
            textToSpeech.shutdown();
        }
        super.onDestroy();
    }
    private void textToSpeak() {
        String text = speakText.getText().toString();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            textToSpeech.speak(text, TextToSpeech.QUEUE_FLUSH, null, null);
        }
        else {
            textToSpeech.speak(text, TextToSpeech.QUEUE_FLUSH, null);
        }
    }

    private void silence() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            textToSpeech.speak("", TextToSpeech.QUEUE_FLUSH, null, null);
        }
        else {
            textToSpeech.speak("", TextToSpeech.QUEUE_FLUSH, null);
        }
    }
}

and the xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txtToSay"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text='"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."' />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView"
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:layout_marginStart="15dp"
            android:layout_marginEnd="15dp"
            android:layout_weight="1"
            android:background="?android:attr/selectableItemBackground"
            android:clickable="true"
            android:drawableTop="@android:drawable/ic_menu_call"
            android:focusable="true"
            android:text="listen"
            android:textAlignment="center" />

    </LinearLayout>

    <ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:drawableTop="@android:drawable/ic_menu_call"
        android:text="listen"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#8A000000"
        android:textOff="listen"
        android:textOn="stop" />

</LinearLayout>

Any help would be appreciated, thank you!

Answer 1

This effect is called ripple. You need to make a custom background

For example, create bg_ripple.xml for API 21+:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/darker_gray">
    <item >
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" /> 
        </shape>
    </item>
</ripple>

Or For below 21

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/darker_gray" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

And use it in Toggle Buttton

<ToggleButton
        android:id="@+id/toggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_ripple" // here
        android:drawableTop="@android:drawable/ic_menu_call"
        android:text="listen"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#8A000000"
        android:textOff="listen"
        android:textOn="stop" />