web-dev-qa-db-ja.com

Androidの丸いボタン

Androidプログラムで丸いボタンを作成したい。 角の丸いEditTextの作成方法

私が達成したいのは：

  1. 角の丸いボタン
  2. さまざまな状態でボタンの背景/外観を変更する（オンクリック、フォーカスなど）
  3. 背景に独自のPNGを使用し、形状を作成しません。
androidandroid-buttonrounded-corners
68
Arnab C.

ImageViewを使用せずに角丸ボタンを実行できます。

バックグラウンドセレクターリソースbutton_background.xml：

<?xml version="1.0" encoding="utf-8" ?> 
     <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
     <!--  Non focused states 
      --> 
      <item Android:state_focused="false" Android:state_selected="false" Android:state_pressed="false" Android:drawable="@drawable/button_unfocused" /> 
      <item Android:state_focused="false" Android:state_selected="true" Android:state_pressed="false" Android:drawable="@drawable/button_unfocused" /> 
     <!--  Focused states 
      --> 
      <item Android:state_focused="true" Android:state_selected="false" Android:state_pressed="false" Android:drawable="@drawable/button_focus" /> 
      <item Android:state_focused="true" Android:state_selected="true" Android:state_pressed="false" Android:drawable="@drawable/button_focus" /> 
     <!--  Pressed 
      --> 
      <item Android:state_pressed="true" Android:drawable="@drawable/button_press" /> 
    </selector>

状態ごとに、描画可能なリソース、例えばbutton_press.xml：

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
  <stroke Android:width="1dp" Android:color="#FF404040" /> 
  <corners Android:radius="6dp" /> 
  <gradient Android:startColor="#FF6800" Android:centerColor="#FF8000" Android:endColor="#FF9700" Android:angle="90" /> 
</shape>

corners属性に注意してください。これにより、角が丸くなります。

次に、ボタンに描画可能な背景を設定します。

Android:background="@drawable/button_background"

EDIT（9/2018）：同じ手法を使用して、円形ボタンを作成できます。円は実際には正方形のボタンであり、半径のサイズは正方形の辺の1/2に設定されています

さらに、上記の例では、strokeとgradientは必須の要素ではなく、丸みを帯びた角の形を見ることができる例と方法にすぎません

119
CSmith

Androidで丸いボタンが必要な場合は、XMLファイル「RoundShapeBtn.xml」を描画可能として作成します。

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" Android:padding="10dp">   
  <solid Android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
  <corners
   Android:bottomRightRadius="10dp"
   Android:bottomLeftRadius="10dp"
   Android:topLeftRadius="10dp"
   Android:topRightRadius="10dp"/>
</shape>

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

Android:background="@drawable/RoundShapeBtn"
69
Pir Fahim Shah

Androidのようなドローアブルフォルダーにxmlファイルを作成します。

rounded_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="20dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid Android:color="#EEFFFFFF"/> // Button Colour
    <padding
        Android:bottom="5dp"
        Android:left="10dp"
        Android:right="10dp"
        Android:top="5dp"/>

</shape>

次に、ボタンの背景としてこのxmlファイルを使用します。

 <Button
        Android:id="@+id/button"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:background="@drawable/rounded_button"
        Android:text="@string/button_text"
        Android:textColor="@color/black"/>
13
Arunendra

Googleによる推奨 他のプラットフォームのUI要素を模倣しないでください。丸いiOSスタイルのボタンをAndroidアプリケーションに入れません。

8
Christopher Perry

ImageViewを次のように拡張します。

public class RoundedImageView extends ImageView {
  private static final String TAG = "RoundedImageView";

  private float mRadius = 0f;

  public RoundedImageView(Context context) {
    super(context);
  }

  public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // retrieve styles attributes
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
    mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
    a.recycle();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    // only do this if we actually have a radius
    if(mRadius > 0) {
      RectF rect = new RectF(0, 0, getWidth(), getHeight());
      Path clipPath = new Path();
      clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
      canvas.clipPath(clipPath);
    }
    super.onDraw(canvas);
  }
}

そして、通常の背景リソースをそれに適用すると、丸い角で切り取られるはずです。

5
Cody Caughlan

これは、コーナー属性を使用して実行できます。以下のxmlを見てください。

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

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

        <corners
            Android:bottomLeftRadius="102.0dip"
            Android:bottomRightRadius="102.0dip"
            Android:radius="102.0dip"
            Android:topLeftRadius="102.0dip"
            Android:topRightRadius="102.0dip" />
    </shape>
</item>
3
Rohit Goyal

ボタンの状態とシェイプを1つのxmlセレクターファイルに入れる方がはるかに優れています。これにより、アプリの実行速度が向上します。これを試してください（Androidアプリケーション開発入門）。ここでスパムを送信しないことは、これが私のコードではないことを示すだけです。

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

    <item Android:state_pressed="true" >
    <shape Android:shape="rectangle"  >
     <corners Android:radius="12dip" />
     <stroke Android:width="1dip" Android:color="#333333" />
     <gradient Android:angle="-90" Android:startColor="#333333"      Android:endColor="#555555"  />            
    </shape>
    </item>
    <item Android:state_focused="true">
    <shape Android:shape="rectangle"  >
     <corners Android:radius="12dip" />
     <stroke Android:width="1dip" Android:color="#333333" />
     <solid Android:color="#58857e"/>       
    </shape>
    </item>  
    <item >
    <shape Android:shape="rectangle"  >
     <corners Android:radius="12dip" />
     <stroke Android:width="1dip" Android:color="#333333" />
     <gradient Android:angle="-90" Android:startColor="#333333" Android:endColor="#555555" />            
    </shape>
    </item>

    </selector>

P.S.設計のヒント：グラデーションと丸みを帯びた長方形は、それらが賢明に使用されていることがほとんどわからない場合に最適です。

2
Evan Espey

BtnOval-> then past codeという名前のDrawableリソースを作成します。

 <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:Android="http://schemas.Android.com/apk/res/Android" 
Android:shape="oval"  
Android:padding="10dp">   
      <solid Android:color="#6E6E6E"/> 
    </shape>

そして、ボタンタグ内のユーザーは、

<Button
andorid:width=""
Android:hieght=""
Android:background="@Drawable/btnOval"
/>
1
Ashik Azeez

丸いボタンは、リング形状のドローアブルを使用して作成することもできます。 http://www.zoftino.com/Android-shape-drawable-examples

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:innerRadius="0dp"
    Android:shape="ring"
    Android:thickness="40dp"
    Android:useLevel="false">
    <solid Android:color="@color/colorPrimary" />
    <padding Android:bottom="50dp"
        Android:left="16dp"
        Android:right="16dp"
        Android:top="50dp"/>
</shape>
1
Arnav Rao

以下のコードを試してくださいcircular_button.xmlという名前の描画可能なファイルを作成し、以下を挿入します

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

次に、ボタンの背景をこの描画可能ファイルに変更します

 <Button
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:background="@drawable/circle_button"
                Android:text="Button"/>

完全な丸ボタンが必要な場合は、以下のドロウアブルを使用できます

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

    <solid
        Android:color="#008577"/>

    <size
        Android:width="120dp"
        Android:height="120dp"/>
</shape>
0
Udara Abeythilake