Jak zrobić okrągły guzik?


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.


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.


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

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


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"

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>


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.



3

użyj ImageButton zamiast Button ....

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


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.


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




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'

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.