カスタムサークルボタン


187

カスタムボタンを作成し、円にする必要があります。サークルボタンを作成するにはどうすればよいですか?draw9patchではそれが可能だとは思いません。

また、カスタムボタンの作り方もわかりません!

何か提案はありますか?


ボタンクラスを拡張し、onDrawメソッドをオーバーライドする必要があります。
Ashwin N Bhanushali

2
しかし、私がそれを拡張し、ユーザーが円の外に触れた場合、問題はここにあります。Onlcickが呼び出され、これを解決する方法が呼び出されます。
Ata

ボタンの背景に丸い形の画像を設定しないでください。
MKJParekh 2012年

単純なOnDrawnを実行しましたが、デザインビューに表示されますが、アプリケーションを実行したい場合、読み込み時にこの問題が発生します。android.view.InflateException:Binary XML file line#52:Error inflating class com.inaros.magicbox._customButtonPlay
Ata

回答:


346

次のようにxml drawableを使用します。

次のコンテンツをフォルダに保存round_button.xmldrawableます

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Androidの重大な影響:が、FloatingActionButtonより良い選択肢である、あなたはXMLセレクタを使用してそれを実行したい場合は、フォルダを作成drawable-v21してres、別の保存round_button.xml次のXMLであり

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

そしてButton、次のようにxmlの背景として設定します。

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

重要:

  1. これらすべての状態(有効、無効、強調表示など)を表示する場合は、ここで説明するセレクターを使用します
  2. ドローアブルに下位互換性を持たせるには、両方のファイルを保持する必要があります。そうしないと、以前のAndroidバージョンで奇妙な例外が発生します。

ドローアブルフォルダーとは、「ドローアブル」という名前のフォルダーを開くこと、またはドローアブルmdpi、hdpiなどに保存することを意味します。
Jjang 2015年

ノー@Jjang、あなただけの「描画可能」フォルダ、描画可能なため任意のXMLリソースは、一般的に保存されているためにそれを保存する必要はありませMDPIで、hdpiなど、「描画可能」
アディルSoomro

K thx、私は今まで描画可能なフォルダーがありませんでした(mdpi、hdpi ...および-v21のみ):)
Jjang

PSボタンにデフォルトのリップルカラーを与えるには?デフォルトでアプリ内のすべてのボタンを着色している​​灰色のように。
チャン

私はあなたのメールアドレスplsはメールまたは私は必要@AdilSoomro adilm717@gmail.com、アディルPAKから
Adiii

67

Markushiは、驚くべき効果を持つサークルボタンウィジェットを作成しました。こちらをクリック!

ここに画像の説明を入力してください


非円形の画像でこれをどのように使用しますか?
tomsoft 2015

3
正解です。この回答にリンクされているライブラリは廃止されました。著者(Markushi)は、代わりにフローティングアクションボタンの使用を推奨しています。
モニカを

@ABoschmanサークルボタンウィジェットにテキストを配置できますか?または単にドローアブル用
Ruchir Baronia

@RuchirBaronia本当に​​Android FABを検討すべきだと思います。小さな丸いボタンの中にどれだけ散文を入れたいですか?アイコン用に作られているようです。チェックアウト:google.com/design/spec/components/…–
モニカを

@ABoschmanねえ、でも私はこのライブラリのこのボタンの効果が本当に好きです。何か方法はありますか?
Ruchir Baronia


12

公式のマテリアルコンポーネントライブラリを使用MaterialButtonすると、Widget.MaterialComponents.Button.Iconスタイルを適用できます。

何かのようなもの:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

現在app:iconPadding="0dp"android:insetLeftandroid:insetTopandroid:insetRightandroid:insetBottom属性は余分なパディングスペースを避けて、ボタン上のアイコンを中央に必要とされています。

app:shapeAppearanceOverlay属性を使用して、角を丸くします。この場合、円が表示されます。

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

最終結果:

ここに画像の説明を入力してください


1
@Gabriele Mariottiに感謝します。app:iconPadding="0dp"アイコンを確実に中央に配置する必要性を強調する価値があります。これが見つかるまで、かなりの時間をかけてセンターを試しました。app:iconGravityに「center」の値がないことが見落とされているようです。
scottyab

1
@Gabriele Mariottiに感謝します。私のためにうまくいきます!
Androidz

2

VectorDrawableとConstraintLayoutを使用する場合

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

サークルの背景:circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

2

FABのようなボタンの場合、このスタイルは次のMaterialButtonとおりです。

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

結果:

ここに画像の説明を入力してください

サイズを変更する場合は、ボタンサイズの半分をとして使用するように注意してくださいapp:cornerRadius

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.