Кнопка переключения в Android

Question

Может кто-нибудь помочь или поделиться ссылкой о том, как реализовать эту кнопку переключения в Android:

Я пытался использовать это:

<ToggleButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textOn="Active"
                android:textOff="Completed"/>

но у него нет желаемого выхода.

У него есть только одна кнопка, и она меняется, когда я нажимаю на нее. То, что я хочу, это две кнопки рядом, как показано на рисунке выше.

Answer 1

С некоторыми исследованиями я нашел лучший способ с новым Материальным Дизайном. Нам нужно использовать MaterialButtonToggleGroup, которая предоставляется в библиотеке материалов Android:

<com.google.android.material.button.MaterialButtonToggleGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    app:checkedButton="@id/active">

<com.google.android.material.button.MaterialButton
        android:id="@+id/active"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Active"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>

<com.google.android.material.button.MaterialButton
        android:id="@+id/completed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Completed"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>
</com.google.android.material.button.MaterialButtonToggleGroup>

Надеюсь, это поможет и другим людям ...

Answer 2

Пользовательская реализация ----

Цвета

<color name = "background">#5cc0fa</color>
<color name = "white">#FFFFFF</color>

XML-макет

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<LinearLayout
    android:id="@+id/linear_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/background"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:textColor="@color/white"
        android:background="@color/background"
        android:text="All" />

    <Button
        android:id="@+id/btn_done"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:textColor="@color/background"
        android:background="@color/white"
        android:text="Done" />

</LinearLayout>
</android.support.constraint.ConstraintLayout>

Внутренняя деятельность

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

int var = 0;
Button btnAll;
Button btnDone;
LinearLayout linearLayout;

public void toggle() {
    if(var == 0) {
        var = 1;
        btnAll.setBackgroundColor(getResources().getColor(R.color.white));
        btnAll.setTextColor(getResources().getColor(R.color.background));
        btnDone.setBackgroundColor(getResources().getColor(R.color.background));
        btnDone.setTextColor(getResources().getColor(R.color.white));
    } else {
        var = 0;
        btnAll.setBackgroundColor(getResources().getColor(R.color.background));
        btnAll.setTextColor(getResources().getColor(R.color.white));
        btnDone.setBackgroundColor(getResources().getColor(R.color.white));
        btnDone.setTextColor(getResources().getColor(R.color.background));
    }
}

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

    linearLayout = findViewById(R.id.linear_layout);
    btnAll = findViewById(R.id.btn_all);
    btnDone = findViewById(R.id.btn_done);

    linearLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toggle();
        }
    });

    btnAll.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toggle();
        }
    });

    btnDone.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            toggle();
        }
    });
}
}