Button 3 circle button that can rotate

Question

I've been looking into an Android problem for some time. I have not found anything on the internet to advance this probelm...

I'm looking to make 3 buttons in a circle that would be one inside the other (See image)

The final objective is that I can insert an image in each of the buttons and that when I click on one, the latter rotates around the central point.

But for the moment I am already blocking the creation of the 3 buttons. I tested this :

<shape
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:innerRadiusRatio="20"
 android:shape="ring"
 android:thicknessRatio="0"
 android:useLevel="false">
 <solid android:color="@android:color/holo_green_dark"/>
</shape>

But : 1. The click is always on the last button which make sence... 2. I don't know how i can add a image here

I have also try to draw the 3 circles in Paint and then use them as background Button with different height. It works, but the shape of the button is still a rectangle. So it is not optimized.

Does anyone have a solution? I know it is possible because i've seen that in different apps. I just don't know how to realize that...

Thanks in advance

EDIT : I would like something like that. X "independant" rings where i can rotate each one separatly.

EDIT 2 : area click The button appear as a circle --> OK

But the shape of the area click is still a square. In my case I need precision, i can't afford to apply listener of button 1 when the user click of button 2.

Not sur if i am understandble... Please say if not.

Answer 1

EDIT - Reworked Code For Shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="100dp" />
    <stroke
        android:width="3dp"
        android:color="#808080" />
    <solid android:color="@color/colorPrimaryDark" />
</shape>

Set this as background of your button and add Manual Height & width to button. Your button will show up.

EDIT
Use Framelayout to overlay your buttons over each other. Change the sizes of button as per your liking. Animated the buttons (rotation) when a button gets clicked.

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <Button
            android:id="@+id/button"
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:layout_gravity="center"
            android:background="@drawable/oval_green"
            android:text="Button" />

        <Button
            android:id="@+id/button1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="@drawable/oval_blue"
            android:text="Button" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Buttons are under FrameLayout. Now attach code to them and test. both buttons are working fine. I hope this put you in the right path.

EDIT - With ImageView Ensure to cut the Images in proper portions.
Your layout.xml

<?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:id="@+id/frameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/ivLarge"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:focusableInTouchMode="false"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/large" />

        <ImageView
            android:id="@+id/ivMedium"
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:layout_gravity="center"
            android:focusableInTouchMode="false"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/medium" />

        <ImageView
            android:id="@+id/ivSmall"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:focusableInTouchMode="false"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/small" />
    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Your MainActivity.java

package com.auvitronics.testing;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity
{

    public static final String TAG = "TransparentButton";

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

        final ImageView ivLarge = findViewById(R.id.ivLarge);
        final ImageView ivMedium = findViewById(R.id.ivMedium);
        ImageView ivSmall = findViewById(R.id.ivSmall);

        ivLarge.setDrawingCacheEnabled(true);
        ivMedium.setDrawingCacheEnabled(true);
        ivSmall.setDrawingCacheEnabled(true);

        ivLarge.setOnTouchListener(new View.OnTouchListener()
        {

            @Override
            public boolean onTouch(View view, MotionEvent event)
            {

                Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
                int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());

                if (pixel == Color.TRANSPARENT)
                {
                    System.out.println("Large Transparent Color");
                    return false;
                }else {
                    view.setRotation(view.getRotation() + 90);
                    System.out.println("Large Colored Area");
                    return true;
                }
            }
        });

        ivMedium.setOnTouchListener(new View.OnTouchListener()
        {

            @Override
            public boolean onTouch(View view, MotionEvent event)
            {

                Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
                int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());

                if (pixel == Color.TRANSPARENT)
                {
                    System.out.println("Medium Transparent Color");
                    return false;
                }else {
                    view.setRotation(view.getRotation() - 90);
                    System.out.println("Medium Colored Area");
                    return true;
                }
            }
        });

        ivSmall.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View view, MotionEvent event)
            {
                Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
                int pixel = bitmap.getPixel((int) event.getX(),(int) event.getY());

                if (pixel == Color.TRANSPARENT)
                {
                    System.out.println("Small Transparent Color");
                    return false;
                }else {
                    view.setRotation(view.getRotation() + 45);
                    System.out.println("Small Colored Area");
                    return true;
                }
            }
        });

    }
}

And the Result is