I want to make a color picker like on my image. We have, for example, 6 buttons. When we press button picker color getting 1dp frame to show which color selected. I think the best way is to use RadioGroup with RadioButtons but how can i make Radio button square and take color in it? Or maybe i'm wrong?

Appreciate any help :) image with colors

CodePudding user response：

You could use multiple ToggleButtons in a LinearLayout.

1. Make sure that the ToggleButtons neither have a OnText nor OffText.

2. Set the Background of the ToggleButtons to something like the following.

bg_toggle.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_active_red" android:state_checked="true" />
    <item android:drawable="@drawable/bg_red">
</selector>

bg_red.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp">
    
            <shape android:shape="rectangle">
                <solid android:color="#F00" />
            </shape>
        </item>
    </layer-list>

bg_red_active.xml:

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

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">

        <shape android:shape="rectangle">
            <solid android:color="#F00" />
        </shape>
    </item>
</layer-list>

Android now switches the background resource dependent on weather or not the toggle is checked. You probably want to use ClickListeners to deactivate the not clicked buttons. There is a lot of optimization that could be done here, but since you asked a fairly vague question you get a vague answer.

You could encaplse this into a custom view and create something where this can be reused with custom colors.

Update: The following shows you how to use that background. If a Toggle is checked, the black border is visible.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal">

    <ToggleButton
        android:id="@ id/toggle_red"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_toggle_red" />

    <ToggleButton
        android:id="@ id/toggle_blue"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/bg_toggle_blue" />
</LinearLayout>