Android - Добавление эффекта к статической кнопке, реагирующей на нажатие / нажатие пользователем

Question

Вот что я хочу сделать.

Кнопка по умолчанию должна быть такой: Кнопка по умолчанию

Когда пользователь нажимает или нажимает на эту кнопку, она должна выглядеть следующим образом: Выбранная кнопка

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

Мне также интересно, как кодировать эффект, если пользователь выбирает кнопку. После того, как она выбрана, линия, которая находится внизу кнопки, должна быть более толстой, а круг должен быть изменен на белый.

Текущая кнопка является просто статической, без эффекта, если пользователь нажимает или щелкает по ней: Изображение

Вот код.

game_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">

    <shape android:shape="rectangle" >

        <stroke
            android:width="1dp"
            android:color="@color/white" />

        <solid android:color="#00FFFFFF" />

        <padding android:left="10dp"
            android:right="10dp"
            android:top="10dp"
            android:bottom="10dp" />
    </shape>
    </item>
</layer-list>

---

Это кнопка xml.

            <Button
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="25dp"
                android:text="answer1"
                android:textColor="#fff"
                android:padding="8dp"
                android:background="@drawable/game_border"
                android:id="@+id/answer1"/>

Answer 1

Я надеюсь помочь вам.

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

Вам необходимо создать две круглые формы Drawable Resource:

Круг без фона:

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

Круг с фоном:

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

Создание пользовательского макета кнопки:

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ddd"
    android:clickable="true"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:text="@string/button_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/iv_circle"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_title"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/shape_circle_empty" />

    <LinearLayout
        android:id="@+id/ll_line"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginEnd="8dp"
        android:background="@color/colorAccent"
        android:contentDescription="@null"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="@+id/iv_circle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/iv_circle"
        app:layout_constraintTop_toTopOf="@+id/iv_circle" />
</androidx.constraintlayout.widget.ConstraintLayout>

В макете your_activity.xml добавьте «Включить», чтобы отобразить пользовательский вид кнопки

<include
        android:id="@+id/btn_custom"
        layout="@layout/button_custom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

В своем классе деятельности добавьте запись события, которое вы хотите прослушать. В моем случае я использовал событие OnTouchListener.

YourActivity:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btn = this.findViewById<View>(R.id.btn_custom)
        val circle = btn.findViewById<ImageView>(R.id.iv_circle)
        val line = btn.findViewById<LinearLayout>(R.id.ll_line)

        btn.setOnTouchListener(object : View.OnTouchListener {
            override fun onTouch(v: View?, event: MotionEvent?): Boolean {
                when (event?.action) {
                    MotionEvent.ACTION_DOWN -> {
                        circle.setBackgroundResource(R.drawable.shape_circle_solid)
                        lineSize(line, true)
                    }
                    MotionEvent.ACTION_UP -> {
                        circle.setBackgroundResource(R.drawable.shape_circle_empty)
                        lineSize(line, false)
                    }
                }

                return v?.onTouchEvent(event) ?: true
            }
        })
    }

Функция изменения размера строки:

fun lineSize(view: View, isSelect: Boolean) {
        val size: Float

        if (isSelect)
            size = 2F
        else
            size = 1F

        // conver to DPI
        val height = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                size,
                getResources().getDisplayMetrics());

        view.getLayoutParams().height = height.toInt()
        view.requestLayout()
    }

Результат:

Обычный вид

Когда касается вида