버튼 모서리를 둥글게 만드는 방법은 무엇입니까?


457

button둥근 모서리를 만들고 싶습니다 . 안드로이드에서 이것을 달성하는 쉬운 방법이 있습니까?


2
이것을 확인하십시오 : nishantvnair.wordpress.com/2010/11/09/…
Lavanya


11
이것은 광범위한 질문이 아니며 절대적으로 요점입니다. "너무 넓다"라고 표시하는 것은 변화해야 할 SO 사고 방식 일뿐입니다. 독재자가되는 것을 그만두십시오.
user734028

2
user734028에 동의하십시오 : 어떻게 도대체 너무 광범위해서 폐쇄 되었습니까? OP가 코너 반경을 N 픽셀로 설정하는 방법을 물었을 때 이것이 더 구체적 일 수 있었던 유일한 방법입니다. 어서!
nyholku

답변:


679

이런 것을 원한다면

버튼 미리보기

여기 코드가 있습니다.

1. mybutton.xml과 같은 drawable 폴더에 xml 파일을 만들고 다음 마크 업을 붙여 넣습니다.

<?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="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2.이보기를 배경의 배경으로 사용하십시오. 뷰가 버튼이면 다음과 같습니다.

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />

오류 : 원인 : org.xmlpull.v1.XmlPullParserException : 이진 XML 파일 행 # 24 : <item> 태그에는 'drawable'속성 또는 드로어 블을 정의하는 자식 태그가 필요합니다.
Zennichimaro

3
프로그래밍 방식으로이 작업을 수행 할 수 있습니까?
킬러

요소 선택기가 선언되어야한다고 말합니다. 파일이 드로어 블 대신 값 폴더 안에있었습니다. 내가 그것을 옮길 때 효과가있었습니다.
F0r3v3r-A-N00b

클릭시 그림자를 만드는 것은 무엇입니까? 나는 바닥에 그림자 너비를 줄이기 위해 노력하고 있습니다 ... 운이 없습니다
Neville Nazerane

선택기 코딩 방법을 보여주는 버튼 모서리를 코딩하는 방법을 설명하는 것과 관련이 없습니다.
TavernSenses

345

아래와 같이 drawable 폴더에 xml 파일을 만듭니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="#ABABAB"/> 
    <corners android:radius="10dp"/>
</shape>

모서리를 둥글게 만들려는 버튼에 배경으로 적용하십시오.

또는 아래와 같이 모든 모서리에 별도의 반경을 사용할 수 있습니다

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"

57
모퉁이를 android : radius = "10dp"로 단축하면 모두 적용됩니다.
Ben Simpson

22
다양한 버튼 상태 (눌림, 초점, 기본값)를 지원하지 않으므로 완벽한 솔루션이 아닙니다. 더 나은 솔루션을 보려면 stackoverflow.com/questions/9334618/rounded-button-android
JosephL

3
@ BenSimpson, 각 코너 반경을 개별적으로 정의하는 대신 한 줄만 넣으면 모양에 차이가 있음을 알 수 있습니다.
가리마 티 와리

이것은 강조 표시된 답변보다 더 완벽하게 작동합니다. 백만 감사합니다!
Dan Linh

37

아래와 같은 XML 파일을 작성하십시오. 버튼의 배경으로 설정하십시오. 버튼에 더 많은 곡선이 필요한 경우 반경 속성을 원하는대로 변경하십시오.

button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/primary" />
    <corners android:radius="5dp" />
</shape>

배경을 버튼으로 설정하십시오.

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>

30

드로어 블 폴더에 shape.xml 만들기

shape.xml처럼

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp"
    android:color="#FFFFFF"/>
  <gradient 
    android:angle="225"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
   android:topRightRadius="7dp" />
</shape>

그리고 myactivity.xml에서

당신이 사용할 수있는

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>

16

myButton.xml 파일 작성

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorButton"/>
    <corners android:radius="10dp"/>
</shape>

버튼에 추가

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myButton"/>

16

안드로이드에서 이것을 달성하는 쉬운 방법이 있습니까?

그렇습니다. 오늘날에는 매우 간단합니다.
그냥를 사용 MaterialButton재료 구성 요소 라이브러리app:cornerRadius속성.

다음과 같은 것 :

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

여기에 이미지 설명을 입력하십시오

둥근 모서리가있는 버튼을 얻는 것으로 충분합니다.

재료 단추 스타일 중 하나를 사용할 수 있습니다 . 예를 들면 다음과 같습니다.

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

여기에 이미지 설명을 입력하십시오

또한 버전 1.1.0 부터 버튼 모양 을 변경할 수도 있습니다 . shapeAppearanceOverlay버튼 스타일 의 속성을 사용하십시오 .

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

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

그런 다음 사용하십시오.

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

shapeAppearanceOverlayxml 레이아웃에서를 적용 할 수도 있습니다 .

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

shapeAppearance각 모서리에 대해 서로 다른 모양과 크기를 가지고도 할 수 있습니다 :

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

여기에 이미지 설명을 입력하십시오


재료 테마를 사용해야합니다
Vlad

@Vlad 예, 재료 구성 요소에는 재료 테마가 필요합니다.
Gabriele Mariotti

11

내가 찾은 간단한 방법은 drawable 폴더에 새 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="#ff8100"/>
<corners android:radius="5dp"/>

</shape>

3
사용자 정의 드로어 블 배경에서 머티리얼 테마 파급 효과를 복원하려면 android:foreground="?attr/selectableItemBackground"단추보기를 추가하십시오 . 참조 stackoverflow.com/questions/38327188/...
씨-IDE

11

Drawable 폴더에 rounded_btn.xml 파일 생성 ...

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

     <stroke android:width="1dp"
        android:color="@color/#000000"
        />

     <padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

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

this.xml 파일을 버튼 배경으로 사용하십시오.

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_btn"
android:text="Test" />

7

이 링크에는 필요한 모든 정보가 있습니다. 여기

Shape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape      xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

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

    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

그리고 main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />
</LinearLayout>

원하는 결과를 얻을 수 있습니다.

행운을 빌어 요


6

스타일 버튼 아이콘 여기에 이미지 설명을 입력하십시오

   <Button
        android:id="@+id/buttonVisaProgress"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape"
        android:onClick="visaProgress"
        android:drawableTop="@drawable/ic_1468863158_double_loop"
        android:padding="10dp"
        android:text="Visa Progress"
        android:textColor="@android:color/white" />

shape.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="14dp" />
<gradient
    android:angle="45"
    android:centerColor="#1FA8D1"
    android:centerX="35%"
    android:endColor="#060d96"
    android:startColor="#0e7e1d"
    android:type="linear" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<size
    android:width="270dp"
    android:height="60dp" />
<stroke
    android:width="3dp"
    android:color="#000000" />


4

벡터 드로어 블을 사용하는 경우 드로어 블 정의에 <corners> 요소를 지정하면됩니다. 나는 이것을 블로그 포스트 에서 다루었 다 .

비트 맵 / 9 패치 드로어 블을 사용하는 경우 비트 맵 이미지에서 투명도를 가진 모서리를 만들어야합니다.


0

드로어 블 폴더

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#999999"/>
</shape>

레이아웃 폴더

<Button
    android:id="@+id/button2"
    <!-- add style to avoid square background -->
    style="@style/Widget.AppCompat.Button.Borderless"
    android:background="@drawable/corner_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

사각형 배경을 피하기 위해 스타일을 추가하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.