맞춤 서클 버튼

사용자 정의 버튼을 만들고 싶습니다. 원이어야합니다. 서클 버튼을 만들려면 어떻게해야합니까? 나는 draw9patch로 가능하지 않다고 생각합니다.

또한 사용자 정의 버튼을 만드는 방법을 모르겠습니다!

당신은 어떤 제안이 있습니까?

다음과 같이 XML 드로어 블을 사용하십시오.

로 다음과 같은 내용을 저장 round_button.xml에 drawable폴더

<?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 Material Effect :FloatingActionButton 더 나은 옵션 이지만 xml selector를 사용하여 폴더 drawable-v21를 만들려면 다음 XML을 사용하여 폴더 를 만들고 res다른 폴더 를 저장하십시오.round_button.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. Drawable이 이전 버전과 호환되도록하려면 두 파일을 모두 보관해야합니다. 그렇지 않으면 이전 Android 버전에서 이상한 예외가 발생합니다.

Markushi는 놀라운 효과를 가진 원 버튼 위젯을 작성했습니다. 여기를 클릭 하십시오 !

커스텀 안드로이드 버튼을위한 AngryTool

당신은이 도구 사이트와 함께 사용자 정의 안드로이드 버튼의 모든 종류를 만들 수 있습니다 ... 나는이 toolsite와 둥근 모서리와 원과 사각형 버튼을 확인 .. 방문 내가 당신을 도울 것입니다

공식 머티리얼 컴포넌트 라이브러리를 사용하면 MaterialButtonWidget.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:insetLeft,android:insetTop , android:insetRight, android:insetBottom속성은 통통함 공간을 피하는 버튼의 아이콘을 중심으로 필요하다.

사용 app:shapeAppearanceOverlay둥근 모서리를 얻으려면 속성을 . 이 경우 원이 생깁니다.

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

최종 결과 :

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>

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.