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!
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>
enter code here
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"
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" />
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments