ปุ่มวงกลมที่กำหนดเอง

ฉันต้องการสร้างปุ่มที่กำหนดเองและฉันต้องการให้มันเป็นวงกลม ฉันจะสร้างปุ่มวงกลมได้อย่างไร ฉันไม่คิดว่าเป็นไปได้ด้วย draw9patch

นอกจากนี้ฉันไม่ทราบวิธีการทำปุ่มที่กำหนดเอง!

คุณมีข้อเสนอแนะใด ๆ ?

ใช้ xml drawable ดังนี้:

บันทึกเนื้อหาต่อไปนี้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:แม้ว่าFloatingActionButtonจะเป็นตัวเลือกที่ดีกว่าหากคุณต้องการใช้ตัวเลือก xml ให้สร้างโฟลเดอร์drawable-v21ขึ้นมาresและบันทึกอีกอันround_button.xmlด้วย 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. คุณต้องเก็บไฟล์ทั้งสองไว้เพื่อให้สามารถย้อนกลับได้ มิฉะนั้นคุณจะต้องเผชิญกับข้อยกเว้นแปลก ๆ ใน Android รุ่นก่อนหน้า

Markushi เขียนวิดเจ็ตปุ่มวงกลมที่มีเอฟเฟกต์ที่น่าทึ่ง คลิกที่นี่ !

AngryTool สำหรับปุ่ม android ที่กำหนดเอง

คุณสามารถสร้างปุ่ม android แบบกำหนดเองได้ด้วยเว็บไซต์เครื่องมือนี้ ... ฉันสร้างปุ่มวงกลมและสี่เหลี่ยมจัตุรัสที่มีมุมกลมด้วยเครื่องมือไซต์นี้ .. เยี่ยมชมฉันอาจช่วยฉันได้

อย่างเป็นทางการห้องสมุดวัสดุส่วนประกอบคุณสามารถใช้MaterialButtonการใช้Widget.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คุณลักษณะที่มีความจำเป็นไปยังศูนย์ไอคอนบนปุ่มหลีกเลี่ยงพื้นที่ padding พิเศษ

ใช้แอ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หากคุณเปลี่ยนขนาดต้องระมัดระวังในการใช้ครึ่งหนึ่งของขนาดปุ่มเป็น