Как сделать кнопки произвольной формы на Android?

Question

[Антон Мисягин]

Добрый день, делаю первые шаги на андроиде.
Подскажите как проще создать кнопки не стандартной формы. На рисунке 5 кнопок. Есть ли возможность накладывать маску на прямоугольную кнопку? Либо направьте в ту сторону куда копать, спасибо большое.

Answer 1

[Юрий]

Если ты хочешь иметь какие-то сегменты с разными обработчиками на клик, ну или на вид одна кнопка, а по факту там пять зон с разными обработчиками, это делается через viewgroup, т.е кнопки накладываются друга на друга или как-то еще сочетаются.
В твоем случаем можно сделать что-то вроде
код лэйаута, тебе нужно что в FrameLayout

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/top_left"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="top|start"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/top_right"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="top|end"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/bottom_left"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="bottom|start"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/bottom_right"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="bottom|end"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/center"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:background="@drawable/circle_black_stroke_40dp" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

circle_black_stroke_40dp

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

rect_black_stoke_40dp

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

Потом ставишь обработчики на id частей кнопки и готово. Можно один на все части (ну или сразу на весь FrameLayout) тогда будет на тап по любой части одна реакции. Либо, на каждый сегмент свой обработчик.

Comments

[Антон Мисягин]

Спасибо за отклик. Правильно ли я понимаю, что кнопки в итоге будут наложены друг на друга? Легко ли получится разрулить нажатие на "правильную" кнопку при клике в области кривизны вне круглой кнопки? Есть ли какие нибудь примеры на данную тему?

[Юрий]

Смотри, в андроид вью имеет форму прямоугольника. Кнопка, если упрощенно, регистрирует нажатие по всей своей поверхности.
Если ты хочешь иметь какие-то сегменты с разными обработчиками на клик, ну или на вид одна кнопка, а по факту там пять зон с разными обработчиками, это делается через viewgroup, т.е кнопки накладываются друга на друга или как-то еще сочетаются.
В твоем случаем можно сделать что-то вроде
код лэйата, тебе нужно что в FrameLayout

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/top_left"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="top|start"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/top_right"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="top|end"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/bottom_left"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="bottom|start"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/bottom_right"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="bottom|end"
            android:background="@drawable/rect_black_stroke_40dp" />

        <Button
            android:id="@+id/center"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:background="@drawable/circle_black_stroke_40dp" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

circle_black_stroke_40dp

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

rect_black_stoke_40dp

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

Потом ставишь обработчики на id частей кнопки и готово. Можно один на все части (ну или сразу на весь FrameLayout) тогда будет на тап по любой части одна реакции. Либо, на каждый сегмент свой обработчик.

[Антон Мисягин]

Весьма благодарю Вас за столь развернутый ответ, сажусь разбираться, пока ничего не понятно)))

[Юрий]

Обращайся)

[Антон Мисягин]

Юрий, еще раз благодарю за рабочий пример. Я собрал этот пример, повесил один обработчик на нажатие левой верхней кнопки, но получается так, что при клике на левый верхний угол круглой кнопки - этот обработчик не вызывается. Другими словами круглая кнопка только выглядит круглой, но она по поведению остается квадратной. Может быть я не до конца разобрался, или так подразумевалось? Как же сделать так чтобы круглая кнопка за пределами круга была "прозрачной" для нажатий?

[Юрий]

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

mRoundButtin.setOnTouchListener(new View.OnTouchListener() {
                @Nullable
                private MotionEvent mMotionEvent;
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    if (event.getAction() == MotionEvent.ACTION_UP && mMotionEvent != null && mMotionEvent.getAction() == MotionEvent.ACTION_DOWN){//если это тап
                        if (isWithinCirlce(event.getX(), event.getY()))return false;//если касания находится в пределах круга, пропускаем его далее
                        else {
//касание находится за логическими пределами кнопки. Считаем куда он попал и вызываем `performClick()` нужного на view
                            return true;
                        }
                    }
                    mMotionEvent = event;
                    return false;
                }
            });

[Антон Мисягин]

Спасибо, Вы очень добры!!

[Денис Загаевский]

Вот жесть. Фреймлэйаут внутри констрейнта... Где-то в гугле плачет разработчик констрейнта.

[Юрий]

Фрейм - это лайаут кнопки. Констраинт - лэйаут активити.