チェックボックスを円形に作成する方法は？

Question

Androidで円形のチェックボックスを作成する際に問題に直面しています。多くの方法を試してみましたが、問題は解決しませんでした。シェイプを作成してチェックボックスに適用すると、問題も解決しません。円でチェックボックスを作成する方法を教えてください。

図のような円形のチェックボックスを作成する方法。

Answer 1

しばらくしてから、このテンプレートを作成しました。これを使用できます。 必要に応じて変更する必要がある場合があります。

Activity.xmlで

<CheckBox
    Android:id="@+id/checkb"
    Android:layout_width="115dp"
    Android:layout_height="50dp"
    Android:button="@drawable/custom_checkbox"
    Android:scaleX="3"
    Android:scaleY="3"
    Android:layout_centerVertical="true"
    Android:layout_alignParentRight="true"
    Android:layout_alignParentEnd="true"
    Android:layout_marginRight="15dp"
    Android:layout_marginEnd="15dp" />

custom_checkbox.xmlという名前のdrawableフォルダーに新しいxmlを作成します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:state_checked="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="false"
        Android:drawable="@drawable/unchecked" />
</selector>

checked.xmlという名前のドローアブルフォルダーに新しいxmlを作成します

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true">
        <layer-list>
            <item>
                <shape Android:shape="oval">
                    <corners Android:radius="1dp" />
                    <stroke
                        Android:width="1dp"
                        Android:color="#777" />
                    <gradient
                        Android:startColor="#990000"
                        Android:centerColor="#990000"
                        Android:endColor="#990000"
                        Android:angle="270" />
                    <size
                        Android:width="30dp"
                        Android:height="30dp" />
                </shape>
                </item>

            <item
                Android:width="8dp"
                Android:height="2dp"
                Android:top="20dp"
                Android:left="6dp">
                <rotate
                    Android:fromDegrees="45">
                    <shape Android:shape="rectangle">
                        <solid Android:color="#fff"/>
                    </shape>
                </rotate>
            </item>

            <item
                Android:width="19dp"
                Android:height="2dp"
                Android:top="16dp"
                Android:left="9dp">
                <rotate
                    Android:fromDegrees="-45">
                    <shape Android:shape="rectangle">
                        <solid Android:color="#fff"/>
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>

</selector>

unchecked.xmlという名前のdrawableフォルダーに新しいxmlを作成します

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">
        <corners Android:radius="1dp" />
        <stroke
            Android:width="1dp"
            Android:color="#777" />
        <gradient
            Android:startColor="#990000"
            Android:centerColor="#990000"
            Android:endColor="#990000"
            Android:angle="270" />
        <size
            Android:width="30dp"
            Android:height="30dp" />
    </shape>

チェックを外すと、次のようになります。 （checked.xmlからの間にコードを追加し、チェックボックスがチェックされていないときにXを与えるように上部と左側を変更できます）

チェックすると、以下のようになります

これが機能する場合は、回答としてマークします。

Answer 2

以前の回答の多くは、chirag90の回答が最高であるが、多くのコーディングが必要であるため、受け入れられます。私の回答では、彼の概念を取り戻しますが、あなたが必要としないすべてのスタイルで、コーディングが必要な場合は、このドロウアブルを使用して、chirag90の答えのようにチェックボックスの状態を特定します。

最初に freelogomaker.com に移動して、ドローアブルを作成します。非常に使いやすく、任意のものを作成できます。ウェブサイトで図形の検索バーに移動し、「丸いチェックボックス」と入力して検索をクリックしますボタンを押すと、複数のドロアブルのリストが表示されるので、選択できます

上記は私が選択したドロアブルで、希望通りにカスタマイズして保存してから appiconmaker.co に移動し、作成したドロアブルを使用してmdpi、hdpi、xhdpi、xxhdpiなどのドロアブルのさまざまなデザインサイズを生成します。以下は私が作ったドローアブルです

未チェックのチェックボックス

チェックボックス

それが完了したら、drawablesフォルダーで対応する名前をオンまたはオフにして、プロジェクトにドロウアブルを追加できます。これで、chirag90の答えのようにcustom_checkbox.xmlを作成できます。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:state_checked="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="false"
        Android:drawable="@drawable/unchecked" />
</selector>

レイアウトで次のようにチェックボックスを作成します

<CheckBox
 Android:id="@+id/checkman"
 Android:layout_width="wrap_content"
 Android:layout_height="wrap_content"
 Android:layout_alignParentEnd="true"
 Android:layout_alignParentRight="true"
 Android:layout_centerVertical="true"
 Android:layout_marginRight="15dp"
 Android:layout_marginEnd="15dp"
 Android:button="@drawable/custom_checkbox"
 Android:scaleX="0.8"
 Android:scaleY="0.8" />

次に、レイアウトに合わせてAndroid:scaleX="0.8"とAndroid:scaleY="0.8"を変更します

これは私のプロジェクトの結果です

チェックなし

チェック

これが多くの人に役立つことを願っています

Answer 3

受け入れられたソリューションは正しいですが、同じフローに従ってシェイプを変更して「checked.xml」でドロアブルを使用できます。このソリューションは、API 21より前のAndroidデバイスで動作します。 xmlドロウアブル。

未チェックのXML：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">


        <solid Android:color = "@color/lightgray" />
</shape>

チェック済みXML：

<?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:Android = "http://schemas.Android.com/apk/res/Android">
            <item>
                <shape Android:shape="oval">
                    <solid Android:color="@color/colorPrimary" />
                </shape>
                </item>

            <item
                         Android:drawable="@drawable/check_arrow_png" />
        </layer-list>

Answer 4

Rodolfoの回答に加えて、ドロウアブルが大きすぎる場合はinset属性を使用できることを付け加えます。注：@ chirag90のソリューションは、API 23以降でのみ機能します。注意： vector drawableが正しくレンダリングされない可能性があります。

Checked.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="oval">
            <solid
                Android:color="@color/col_chat_selected"/>
            <size
                Android:width="35dp"
                Android:height="35dp"/>
        </shape>
    </item>

    <item>
        <inset
            Android:drawable="@drawable/shape"
            Android:insetBottom="10dp"
            Android:insetLeft="10dp"
            Android:insetRight="10dp"
            Android:insetTop="10dp"/>
    </item>

</layer-list>