Android - Adding an Effect to a Static Button Responding to a User Tap/Click

Issue

Here is what I want to make.

The default button should be like this: Button default

Once a user taps or clicks this button, it should be like this: Button selected

What I have done so far is put a line on the bottom of the button. However, I can't put that small empty white circle on the left-bottom of the button. I think it's possible to make the circle as an image and put it fixed with the same height and width. But I have no idea how to put it on the button.

I also wonder how to code the effect if a user selects the button. Once it's selected, the line which is on the bottom of the button should be thicker and the circle should be changed to be colored white.

The current button is simply static, with no effect if the user taps or clicks it: Image

Here is the code.

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>

---

This is the button 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"/>

Solution

I hope to help you.

To solve this case, you must create a custom view and in this view, design your button with the elements you want to include.

You need to create two circular shape Drawable Resource:

Circle without background:

<?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>

Circle with background:

<?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>

Create a Custom Button Layout:

<?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>

In your_activity.xml layout, add an Include to show the Custom View of the Button

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

In your activity class, add the capture of the event you want to listen. In my case I used the OnTouchListener event.

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
            }
        })
    }

Function to change line size:

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()
    }

Result:

Normal view

When touches the view

Answered By - Dewin Martínez