Jak zrobić okrągły guzik?

141

Próbuję zrobić okrągły guzik, ale nie wiem, jak mam to zrobić. Mogę zrobić guzik z zaokrąglonymi rogami, ale jak mogę zaokrąglić koło. To nie to samo. Powiedz mi, czy to możliwe na Androidzie? Dziękuję Ci.

user1166635
źródło
1
mam dobre wyjaśnienie tutaj stackoverflow.com/questions/9884202/custom-circle-button
Milon

Odpowiedzi:

265

Utwórz plik xml o nazwie roundedbutton.xmlw folderze do rysowania

<?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>

Na koniec ustaw to jako tło dla swojego Buttonasandroid:background = "@drawable/roundedbutton"

Jeśli chcesz, aby był całkowicie zaokrąglony, zmień promień i zdecyduj się na coś, co jest dla Ciebie w porządku.

Arif Nadeem
źródło
Czy potrzebujesz sufiksu .xml? Widziałem przykład bez
Neil
@Neil nie musisz dodawać sufiksu xml, zrobiłem to w celu demonstracji i jasnego zrozumienia koncepcji, aby czytelnik nie pomylił przykładu, automatyczna pomoc eclipse powinna pomóc Ci znaleźć, czy .xml jest potrzebny czy nie, mam zwyczaj używania ctrl + spacja na moim komputerze z systemem Windows do automatycznego wypełniania poleceń xml.
Arif Nadeem
2
Nie potrzebujesz symbolu „@” przed słowem do rysowania?
shim
Czy to rozwiązanie daje inny skutek niż zwykłe użycie okrągłego obrazu jako tła?
Siavash,
6
Dlaczego nie użyć androida: shape = "oval"
Siavash,
39

Jeśli korzystasz z Android Studio, możesz po prostu użyć:

<?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>

to działa dobrze dla mnie, mam nadzieję, że to komuś pomoże.

Shaun Jones
źródło
2
to powinna być akceptowana odpowiedź, użycie wartości narożników nie wykracza poza zaokrąglone rogi, a to pytanie dotyczy koła. Dzięki Shaun za tę odpowiedź
Don
12
Użycie ringniczego nie pokazuje. Lepiej używać oval.
CopsOnRoad,
31
  1. Utwórz plik do rysowania / button_states.xml zawierający:

    <?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. Użyj go w tagu przycisku w dowolnym pliku układu

    <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"
    />
    
Mohit
źródło
działa idealnie, dziękuję. czy możesz mi pomóc narysować prostokąt od środka na zewnątrz koła, który wygląda jak „Q”
CLIFFORD PY
Działa dobrze, ale dlaczego ustawiliśmy promień na 1000 dp? czy możesz wyjaśnić?
Jamshaid Kamran
@JamshaidKamran 1000dp to dowolny rozmiar, który jest na tyle duży, że przycisk jest okrągły.
rraallvv
Czy istnieje zasób wymiaru Androida, którego możemy użyć zamiast 1000dp?
rraallvv
14

Android Circlebutton Markushiego:

(Ta biblioteka jest przestarzała i nie ma nowego rozwoju. Zamiast tego rozważ użycie FAB).

wprowadź opis obrazu tutaj

LOG_TAG
źródło
4
ostrzeżenie: WYCOFANE!
dialex
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 -->

i dodaj to do kodu przycisku

    android:layout_width="50dp"
    android:layout_height="50dp"
user4512768
źródło
5

Użyto kształtu jako owalnego. To sprawia, że ​​przycisk jest owalny

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

Rohit Goyal
źródło
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>

Ustaw to w swoich zasobach do rysowania XML i prostym użyciu i przycisku obrazu z okrągłym obrazem, używając jako tła do rysowania.

Giovanny Piñeros
źródło
3

użyj ImageButton zamiast Button ....

i zrób okrągły obraz z przezroczystym tłem

PROCHOWIEC
źródło
3

Jeśli chcesz mieć okrągły przycisk FAB i korzystasz z oficjalnej biblioteki komponentów materiałowych, możesz to łatwo zrobić w ten sposób:

<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 obrazu tutaj

Jeśli zmienisz rozmiar przycisku, po prostu uważaj, aby użyć połowy rozmiaru przycisku jako app:cornerRadius.

Roberto Leinardi
źródło
2

Dla okrągłego przycisku utwórz kształt:

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

użyj go jako tła linku do przycisku

Naqash
źródło
0

Możesz użyć FloatingActionButton Google

XMl:

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

Jawa:

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

Gradle:

    compile 'com.android.support:design:23.4.0'
kalebora
źródło
0
  1. Użyj przycisków obrazu i ustaw tło jako żądany obraz.
  2. Utwórz obrazy, korzystając z łącza 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 = none & name = ic_home "

i pobierz go, ekstrahuj, wewnątrz tego folderu szukaj mipmap-hdpi.

  1. skopiuj obraz z folderu mipmap-hdpi i wklej go w folderze drwable projektu Android.

  2. Teraz ustaw tło jako ten obraz.

Naren
źródło