Niestandardowy przycisk koła

187

Chcę utworzyć niestandardowy przycisk i potrzebuję go w kółko. Jak mogę utworzyć przycisk koła? Nie sądzę, aby było to możliwe dzięki draw9patch.

Nie wiem też, jak zrobić niestandardowy przycisk!

Czy masz jakieś sugestie?

Ata
źródło
musisz rozszerzyć klasę przycisków i przesłonić metodę onDraw.
Ashwin N Bhanushali
2
ale problem pojawia się, jeśli go przedłużę, a użytkownik dotknie koła, Onlcick zostanie wezwany, jak to rozwiązać.
Ata
dlaczego nie ustawisz okrągłego obrazu jako tła do przycisku?
MKJParekh
Zrobiłem prosty OnDrawn, pokazuje w widoku Projekt, ale gdy chcę uruchomić aplikację, powoduje to ten problem podczas ładowania: android.view.InflateException: Binarna linia pliku XML # 52: Błąd podczas pompowania klasy com.inaros.magicbox._customButtonPlay
Ata

Odpowiedzi:

346

Użyj xml do rysowania w następujący sposób:

Zapisz następującą zawartość jak round_button.xmlw drawablefolderze

<?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 Materiał Efekt: Chociaż FloatingActionButtonjest lepszym rozwiązaniem, jeśli chcesz to zrobić przy użyciu wybieraka xml utwórz folder drawable-v21w reszaoszczędzisz inny round_button.xmltam z następującym 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>

I ustaw go jako tło Buttonw xml w następujący sposób:

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

Ważny:

  1. Jeśli chcesz, aby pokazywał wszystkie te stany (włączony, wyłączony, podświetlony itp.), Użyjesz selektora, jak opisano tutaj .
  2. Musisz zachować oba pliki, aby umożliwić rysowanie kompatybilność wsteczną. W przeciwnym razie napotkasz dziwne wyjątki w poprzedniej wersji Androida.
Adil Soomro
źródło
Przez folder do rysowania masz na myśli otwarcie folderu o nazwie „drawable” lub zapisanie go w formacie drawable-mdpi, hdpi itp.?
Jjang,
@Jjang nie, wystarczy zapisać go w folderze „wysuwnym”, każdy zasób xml przeznaczony do wysuwu jest zwykle zapisywany w „wysuwalnym”, a nie w mdpi, hdpi itp.
Adil Soomro
Dziękuję, do tej pory nie miałem folderu z możliwością rysowania (tylko mdpi, hdpi ... i -v21) :)
Jjang,
PS Jak nadać przyciskowi domyślny kolor marszczenia? Podobnie jak szary, który domyślnie koloruje wszystkie przyciski w aplikacji.
Jjang,
@AdilSoomro Potrzebuję twojego adresu e-mailowego pls lub napisz do mnie [email protected] , adil z Pak
Adiii
67

Markushi napisał widget z kółkiem z niesamowitymi efektami. Kliknij tutaj !

wprowadź opis zdjęcia tutaj

Jerome
źródło
Jak tego używać z obrazem innym niż okrągły?
tomsoft
3
Tylko jedna głowa: biblioteka połączona w tej odpowiedzi jest teraz przestarzała. Autor (Markushi) zaleca zamiast tego użycie pływającego przycisku akcji .
Przywróć Monikę
@ABoschman Czy możemy umieścić tekst w widżecie przycisku koła? Lub tylko dla drawables
Ruchir Baronia
@RuchirBaronia Myślę, że naprawdę powinieneś rozważyć Android FAB. Ile prozy chcesz umieścić w małym okrągłym przycisku? Wydaje się, że jest stworzony dla ikon. Sprawdź: google.com/design/spec/components/…
Przywróć Monikę
@ABoschman Hej, ale naprawdę podoba mi się efekt tego przycisku w tej bibliotece. Czy jest jakiś sposób?
Ruchir Baronia
22

AngryTool na niestandardowy przycisk Androida

Możesz stworzyć dowolny niestandardowy przycisk Androida za pomocą tej strony narzędzi ... Zrobię okrąg i kwadratowy przycisk z okrągłym rogiem za pomocą tego narzędzia .. Odwiedź to może być, pomogę

realpranav
źródło
12

Dzięki oficjalnej bibliotece komponentów materiałowych możesz użyć MaterialButtonzastosowania Widget.MaterialComponents.Button.Iconstylu.

Coś jak:

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

Obecnie app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, android:insetBottompotrzebne są atrybuty centrum ikonę na przycisk unikając dodatkową przestrzeń wyściółki.

Użyj app:shapeAppearanceOverlayatrybutu, aby uzyskać zaokrąglone rogi. W takim przypadku będziesz mieć koło.

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

Wynik końcowy:

wprowadź opis zdjęcia tutaj

Gabriele Mariotti
źródło
1
Dzięki @Gabriele Mariotti. Warto podkreślić potrzebę app:iconPadding="0dp"upewnienia się, że ikona jest wyśrodkowana. Spędziłem dużo czasu próbując centrum, dopóki tego nie znalazłem. Wygląda na przeoczenie, że aplikacja: iconGravity brakuje wartości „środkowej”.
scottyab
1
Dzięki @Gabriele Mariotti. Pracuj dobrze dla mnie!
Androidz
2

jeśli chcesz użyć VectorDrawable i 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>

koło w tle: koło_przycisk.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>
Milad Ranjbar
źródło
2

Dla przycisku wyglądającego FAB ten styl na 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" />

Wynik:

wprowadź opis zdjęcia tutaj

Jeśli zmienisz rozmiar, pamiętaj, aby użyć połowy rozmiaru przycisku jako app:cornerRadius.

Roberto Leinardi
źródło