CODEWITHSUNDEEP
androidstylescustomizationtogglebuttonandroid-togglebutton
Tiberiu Paduraru
Tiberiu Paduraru

Reputation: 383

How to customize toggle button in android?

I've been trying to customize a toggle button to look like this, but it seems like i'm not getting anywhere.

enter image description here

Can anyone give me an idea or any kind of tutorial on designing?

Upvotes: -1

Views: 310

Answers (1)

Mouaad Abdelghafour AITALI
Mouaad Abdelghafour AITALI

Reputation: 4337

Is that what you're looking for :

enter image description here

First create a ToggleButton XML :

<ToggleButton
    android:id="@+id/follow"
    android:layout_width="120dp"
    android:layout_height="35dp"
    android:layout_centerInParent="true"
    android:background="#61849f"
    android:checked="false"
    android:drawableStart="@drawable/ic_baseline_star_24"
    android:elevation="0dp"
    android:gravity="center"
    android:padding="8dp"
    android:textColor="#fff"
    android:textOff=" FOLLOW "
    android:textOn=" FOLLOWING " />

Java :

toggleButton = findViewById(R.id.follow);
        toggleButton.setOnCheckedChangeListener((buttonView, isChecked) -> {
            if (isChecked) setUnfollow();
            else setFollow();
        });

The setFollow & setUnfollow methods :

private void setUnfollow() {
    toggleButton.setChecked(true);
    toggleButton.setTextColor(Color.BLACK);
    toggleButton.setBackgroundColor(Color.WHITE);
    toggleButton.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
    toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(this, R.drawable.border));

}

private void setFollow() {
    toggleButton.setChecked(false);
    toggleButton.setTextColor(Color.WHITE);
    toggleButton.setBackgroundDrawable(ContextCompat.getDrawable(this, R.drawable.fill));
    toggleButton.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_baseline_star_24, 0, 0, 0);
}

Finally The fill.XML and bordre.XML (create these file in the drawable folder)

Border.XML :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="#61849f" />
</shape>

Fill.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#61849f" />
</shape>

Upvotes: 1

Related Questions