丸いボタンの作り方は?


141

丸いボタンを作ろうとしていますが、どうしたらいいのか分かりません。角の丸いボタンを作ることはできますが、どうやって丸くすることができますか。同じではありません。教えてください、Androidで可能ですか?ありがとうございました。


1
ここに良い説明がありますstackoverflow.com/questions/9884202/custom-circle-button
Milon

回答:


265

roundedbutton.xmlドローアブルフォルダーで指定されたxmlファイルを作成する

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

最後に、あなたの背景としてあることを設定するButtonなどandroid:background = "@drawable/roundedbutton"

完全に丸くしたい場合は、半径を変更して、問題のないものを選択してください。


.xmlサフィックスが必要ですか?ない例を見たことがあります
Neil

@Neilあなたはxmlサフィックスを追加する必要はありません。読者が間違った例をとらないように、概念と明確な理解の目的でそれを行いました。かどうかにかかわらず、私は自分のWindowsマシンでctrl + spaceを使用してxmlコマンドを自動補完する習慣があります。
Arif Nadeem 2012

2
ドローアブルという単語の前に「@」記号は必要ありませんか?
シム

このソリューションの結果は、背景として円形の画像を使用するだけとは異なりますか?
Siavash

6
また、なぜandroid:shape = "oval"を使用しないのですか
Siavash

39

Android Studioを使用している場合は、次のように使用できます。

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
        <solid android:color="#FFFFFF"/>

    </shape>

これは私にとってはうまくいきます。これが誰かを助けることを願っています。


2
これは受け入れられる答えであるはずです。cornersの値を使用しても、丸みを帯びた角を超えることはありません。この質問は円に関するものです。この回答を提供してくれたShaunに感謝します
Don

12
を使用ringしても何も表示されません。使用する方が良いoval
CopsOnRoad 2017

31
  1. 以下を含むdrawable / button_states.xmlファイルを作成します。

    <?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="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>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
  2. レイアウトファイルのボタンタグで使用する

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="@drawable/button_states"
        android:text="@string/btn_scan_qr"
        android:id="@+id/btn_scan_qr"
        android:textSize="15dp"
    />

そのworkngは完全に、ありがとう。あなたは私が「Q」のような円形に見えるの中心から外側に四角形を描画するために助けることができる
CLIFFORD PY

正常に動作していますが、なぜ半径を1000dpにしたのですか?説明していただけますか?
Jamshaid Kamran 2017

@JamshaidKamran 1000dpは、ボタンを丸めるのに十分な大きさの任意のサイズです。
rraallvv

1000dpの代わりに使用できるAndroidディメンションリソースはありますか?
rraallvv


6

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

これをボタンコードに追加します

    android:layout_width="50dp"
    android:layout_height="50dp"

5

楕円形として使用しました。これはボタンを楕円形にします

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

        <solid android:color="#ffee82ee" />

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>


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

それをXMLドローアブルリソースに設定し、シンプルな使用と丸いイメージのイメージボタンをドローアブルを背景として使用します。



3

Button ....の代わりにImageButtonを使用します。

背景が透明な丸い画像を作る


3

FABのような円形のボタンが必要で、公式のMaterial Componentライブラリを使用している場合は、次のように簡単に実行できます。

<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


2

丸いボタンの場合、形状を作成します。

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

<solid android:color="#ffee82ee" />


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

ボタンリンクの背景として使用する




0

GoogleのFloatingActionButtonを使用できます

XMl:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

Java:

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

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

Gradle:

    compile 'com.android.support:design:23.4.0'

0
  1. 画像ボタンを使用して、背景を目的の画像にします。
  2. Android Asset Studioリンクから画像を作成します-

" https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142% 2C%200)&backColor = rgb(96%2C%20125%2C%20139)&crop = 1&backgroundShape = circle&effects = none&name = ic_home "

そしてそれをダウンロードし、extraxt it、その中にmipmap-hdpiフォルダーを探します。

  1. mipmap-hdpiフォルダーから画像をコピーし、androidプロジェクトのdrwableフォルダーに貼り付けます。

  2. 次に、背景をその画像として設定します。

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