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.