изменить цвет моего ToggleButton при нажатии

Question

У меня есть несколько кнопок переключения, которые представляют дни недели.

Когда пользователь нажимает на ToggleButton, я хочу, чтобы он переключал состояния и изменял цвет, указывая пользователю, что он был нажат.

Вот как выглядит один из моих ToggleButton:

<ToggleButton
    android:id="@+id/toggleButton_monday"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="16dp"
    android:background="@drawable/button_border"
    android:textOff="MON"
    android:textOn="MON"
    app:layout_constraintEnd_toStartOf="@+id/toggleButton_tuesday"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView10" />

Я хочу, чтобы кнопка выглядела так после нажатия (я хочу, чтобы та же граница и форма, но изменились только другой цвет и состояние):

---

Ответ здесь не работает, поскольку у меня уже есть android:background для моих кнопок переключения, чтобы показать пользовательскую рамку вокруг кнопки.

Ответ здесь не работает, так как я использую ToggleButton, а не SwitchCompat

---

EDIT:

Вот текущее значение android:background. Я устанавливаю ToggleButton с:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="10dp"
        />
    <solid
        android:color="#FFFFFF"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="75dp"
        android:height="40dp"
        />
    <stroke
        android:width="3dp"
        android:color="#878787"
        />
</shape>

---

РЕДАКТИРОВАТЬ: РЕШЕНИЕ

Спасибо @Broken и @Moustafa Shahin, я использовал комбинацию их ответов.

Сначала я создал два файла ресурсов для моих кнопок ToggleButton toggle_button_default.xml и toggle_button_checked.xml (проверьте код выше в первом редактировании). По сути, цвета фона просто различаются в двух XML.

Во-вторых, я создал селектор с именем toggle_button_state.xml и загрузил соответствующие файлы ресурсов, которые я создал выше:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- WHEN IS CHECKED -->
    <item android:drawable="@drawable/toggle_button_default" android:state_checked="false" />

    <!-- WHEN IS NOT CHECKED -->
    <item android:drawable="@drawable/toggle_button_checked" android:state_checked="true" />

</selector>

И, наконец, для моих кнопок ToggleButtons я установил toggle_button_state в качестве фона для них:

<ToggleButton
    android:id="@+id/toggleButton_monday"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/toggle_button_state"
    android:textOff="MON"
    android:textOn="MON"/>

В Activity у меня есть метод onClick, который я могу использовать для отслеживания кликов:

class RentActivity : AppCompatActivity(), View.OnClickListener {
    override fun onClick(v: View?) {
        when(v?.id){
            R.id.toggleButton_monday ->{
                Toast.makeText(this, "Monday Clicked", Toast.LENGTH_LONG).show()
                return
            }
     ...

Answer 1

Вы должны создать новый файл в каталоге drawable со списком состояний.

Вы можете назвать это toggle_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- WHEN IS CHECKED -->
    <item android:drawable="@color/colorPrimary" android:state_checked="false" />

    <!-- WHEN IS NOT CHECKED -->
    <item android:drawable="@color/colorAccent" android:state_checked="true" />

</selector>

Выше файла вы можете использовать как background из ToggleButton:

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

    <ToggleButton
        android:id="@+id/toggleButton_monday"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/toggle_background"
        android:textOff="ON"
        android:textOn="OFF" />

</LinearLayout>

По умолчанию кнопка имеет серую рамку. Когда вы хотите удалить его, просто добавьте:

style="?android:attr/borderlessButtonStyle"

в ToggleButton в XML-файле.

Вы также можете добавить OnCheckedChangeListener. Если у вас много кнопок, вы можете добавить все из них в список, и в цикле добавить один и тот же слушатель для всех из них:

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.widget.CompoundButton;
import android.widget.ToggleButton;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<ToggleButton> listOfButtons = new ArrayList<>();

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

        // Add ToggleButtons to list
        listOfButtons.add(findViewById(R.id.toggleButton_monday));

        // Create listener for all of them
        CompoundButton.OnCheckedChangeListener listener = (buttonView, isChecked) -> {
            // Do something
        };


        // Add listener to all od buttons
        for (ToggleButton button : listOfButtons) {
            button.setOnCheckedChangeListener(listener);
        }
    }
}

Answer 2

Вы можете создать 2 файла фоновых ресурсов и изменять их в зависимости от статуса:

ToggleButton toggle = (ToggleButton) findViewById(R.id.togglebutton);
toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    if (isChecked) {
        // The toggle is enabled
        //the background resource which mean status is enable
    } else {
        // The toggle is disabled
        //the background resource which mean status is disabled
    }
}

});

Answer 3

Если вы ищете элегантный способ сделать это, вы можете попробовать использовать GridView ....

<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:columnWidth="100dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="24dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="spacingWidthUniform"
    />

..., который позволит вам заполнить макет элементамитаким образом, чтобы вам было проще проходить через них.Вы можете создать собственный Адаптер и назначить его для вида сетки:

GridView gridview = findViewById(R.id.gridview);
MyCustomAdapter _Adapter = new MyCustomAdapter(getApplicationContext());
gridview.setAdapter(_Adapter);

, который позволит вам установить один onClickListener для всех ваших кнопок в одном месте:

gridview.setOnItemClickListener((parent, view, position, id) -> {
        _Adapter.toggleItem(position);
    });

Вы можетеподробное руководство по созданию настраиваемого адаптера gridview здесь