Tombol lingkaran khusus


187

Saya ingin membuat tombol ubahsuaian dan saya ingin membuatnya menjadi lingkaran. Bagaimana saya bisa membuat tombol lingkaran? Saya tidak berpikir itu mungkin dengan draw9patch.

Saya juga tidak tahu cara membuat tombol kustom!

Apakah anda memiliki saran?


Anda harus memperluas kelas tombol dan mengganti metode onDraw.
Ashwin N Bhanushali

2
tetapi masalahnya ada di sini jika saya memperluas itu, dan pengguna menyentuh keluar dari lingkaran, Onlcick akan dipanggil, bagaimana menyelesaikannya.
Ata

mengapa Anda tidak menetapkan gambar bentuk bundar sebagai latar belakang tombol Anda?
MKJParekh

Saya melakukan OnDrawn sederhana, itu terlihat pada tampilan Desain, tetapi ketika saya ingin menjalankan aplikasi, itu membuat masalah ini saat memuat: android.view.InflateException: Binary XML file line # 52: Error inflating class com.inaros.magicbox._customButtonPlay
Ata

Jawaban:


346

Gunakan xml drawable seperti ini:

Simpan konten berikut seperti round_button.xmldalam drawablefolder

<?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: Meskipun FloatingActionButtonmerupakan pilihan yang lebih baik, Jika Anda ingin melakukannya menggunakan pemilih xml, buat folder drawable-v21di resdan simpan yang lain di round_button.xmlsana dengan mengikuti 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>

Dan atur sebagai latar belakang Buttondalam xml seperti ini:

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

Penting:

  1. Jika Anda ingin menampilkan semua status ini (diaktifkan, dinonaktifkan, disorot dll), Anda akan menggunakan pemilih seperti yang dijelaskan di sini .
  2. Anda harus menyimpan kedua file untuk membuat drawable-kompatibel mundur. Jika tidak, Anda akan menghadapi pengecualian aneh di versi android sebelumnya.

Dengan drawable folder Anda bermaksud membuka folder bernama 'drawable', atau menyimpannya di drawable-mdpi, hdpi, dll ...?
Jjang

@Jjang tidak, Anda hanya perlu menyimpannya di folder 'drawable', setiap xml resource untuk drawable biasanya disimpan dalam 'drawable', bukan di mdpi, hdpi dll.
Adil Soomro

K thx, saya tidak punya folder yang dapat digambar sampai sekarang (hanya mdpi, hdpi ... dan -v21) :)
Jjang

PS Bagaimana memberi tombol warna riak default? Seperti yang abu-abu yang mewarnai semua tombol di aplikasi secara default.
Jjang

@AdilSoomro saya memerlukan alamat email Anda, pls atau kirimkan saya adilm717@gmail.com , adil dari pak
Adiii

67

Markushi menulis widget tombol lingkaran dengan efek luar biasa. Klik di sini !

masukkan deskripsi gambar di sini


Bagaimana cara menggunakan ini dengan gambar non lingkaran?
tomsoft

3
Hanya kepala: perpustakaan yang ditautkan dalam jawaban ini sekarang sudah usang. Penulis (Markushi) merekomendasikan menggunakan Tombol Tindakan yang Mengambang sebagai gantinya.
Reinstate Monica

@ABoschman Bisakah kita menaruh teks di widget tombol lingkaran? Atau hanya untuk gambar
Ruchir Baronia

@RuchirBaronia Saya pikir Anda benar-benar harus mempertimbangkan FAB Android. Berapa banyak prosa yang ingin Anda tempatkan di dalam tombol bulat kecil? Tampaknya dibuat untuk ikon. Lihat: google.com/design/spec/components/…
Reinstate Monica

@ABoschman Hai, tapi saya sangat suka efek tombol ini di perpustakaan ini. Apakah ada cara
Ruchir Baronia


12

Dengan perpustakaan Komponen Bahan resmi Anda dapat menggunakan MaterialButtonmenerapkan Widget.MaterialComponents.Button.Icongaya.

Sesuatu seperti:

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

Saat ini app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottomatribut yang diperlukan untuk pusat ikon pada tombol menghindari ruang padding tambahan.

Gunakan app:shapeAppearanceOverlayatribut untuk mendapatkan sudut membulat. Dalam hal ini Anda akan memiliki lingkaran.

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

Hasil akhir:

masukkan deskripsi gambar di sini


1
Terima kasih @ Gabriele Mariotti. Layak menyoroti kebutuhan untuk app:iconPadding="0dp"memastikan ikon terpusat. Saya membakar banyak waktu mencoba pusat sampai saya menemukan ini. Tampaknya kekhilafan bahwa aplikasi: iconGravity hilang nilai "pusat".
scottyab

1
Terima kasih @ Gabriele Mariotti. Bekerja dengan baik untukku!
Androidz

2

jika Anda ingin menggunakan VectorDrawable dan 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>

latar belakang lingkaran: 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>

2

Untuk tombol cari FAB gaya ini pada 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" />

Hasil:

masukkan deskripsi gambar di sini

Jika Anda mengubah ukuran, berhati-hatilah untuk menggunakan setengah dari ukuran tombol sebagai app:cornerRadius.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.