둥근 버튼을 만드는 방법?


141

둥근 버튼을 만들려고하는데 어떻게 할 수 있는지 모르겠습니다. 모서리가 둥근 버튼을 만들 수 있지만 원을 어떻게 둥글게 만들 수 있습니까? 이건 같은게 아니야. 제발 말해봐, 안드로이드에서도 가능해? 감사합니다.


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>

마지막으로 설정 배경에 당신의 Buttonandroid:background = "@drawable/roundedbutton"

완전히 둥글게 만들려면 반지름을 변경하고 자신에게 맞는 것을 고정하십시오.


.xml 접미사가 필요하십니까? 내가없는 예를 보았습니다
Neil

@ Neil xml 접미사를 추가 할 필요가 없습니다. 시연과 개념을 명확하게 이해하기 위해 독자가 예제를 잘못 취하지 않도록 Eclipse 자동 지원자가 .xml이 필요한지 찾는 데 도움이됩니다. xml 명령을 자동 완성하기 위해 Windows 컴퓨터에서 ctrl + space를 사용하는 습관이 있습니다.
Arif Nadeem

2
단어 드로어 블 앞에 '@'기호가 필요하지 않습니까?
shim

이 솔루션은 원형 이미지를 배경으로 사용하는 것과 다른 결과가 있습니까?
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
모서리 값을 사용하는 것이 둥근 모서리를 넘어서는 안되며이 질문은 원에 관한 것입니다. 이 답변에 감사드립니다 Shaun
Don

12
사용하면 ring아무것도 표시되지 않습니다. 사용하는 것이 좋습니다 oval.
CopsOnRoad

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

@ JamshaidKamran 1000dp는 버튼을 둥글게 만들기에 충분한 임의의 크기입니다.
rraallvv 2016 년

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

사용 하여 ImageButton 대신 버튼의 ....

투명한 배경으로 둥근 이미지를 만듭니다.


3

FAB 모양의 원형 버튼을 원하고 공식 머티리얼 컴포넌트 라이브러리를 사용하는 경우 다음과 같이 쉽게 할 수 있습니다.

<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

구글의 FloatingActionButton을 사용할 수 있습니다

XM1 :

<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" />

자바:

  @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
        }
    });
}

그레들 :

    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 = 없음 & 이름 = ic_home "

mipmap-hdpi 폴더를 찾으면 extraxt it로 다운로드하십시오.

  1. mipmap-hdpi 폴더에서 이미지를 복사하여 Android 프로젝트의 drwable 폴더에 붙여 넣습니다.

  2. 이제 배경을 해당 이미지로 설정하십시오.

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