Jak zrobić rundy rundy guzika?

456

Chcę zrobić rogi buttonrundy. Czy istnieje prosty sposób na osiągnięcie tego w Androidzie?

artysta
źródło
material.io/develop/android/components/material-button właśnie ustaw promień narożnika
Swagger 68
11
nie jest to szerokie pytanie, jest absolutnie istotne. oznaczenie go jako „zbyt szerokiego” to tylko mentalność SO, którą należy zmienić. Przestańcie być dyktatorami.
user734028,
2
Zgadzam się z użytkownikiem 734028: Co do cholery, jak to się stało, że jest zbyt szeroki? jedynym sposobem mogłoby to być bardziej szczegółowe, gdyby OP zapytał, jak ustawić promień narożnika na N pikseli. Daj spokój!
nyholku

Odpowiedzi:

679

Jeśli chcesz czegoś takiego

Podgląd przycisku

oto kod.

1. Utwórz plik xml w folderze do rysowania, takim jak mybutton.xml, i wklej następujący znacznik:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <solid android:color="#58857e"/>       
        </shape>
    </item>  
    <item >
       <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#5e7974" />
            <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
       </shape>
    </item>
</selector>

2. Teraz użyj tego rysowania jako tła widoku. Jeśli widok jest przyciskiem, to coś takiego:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/mybutton"
    android:text="Buttons" />
Md. Monsur Hossain Tonmoy
źródło
zawiesił się: Przyczyną: org.xmlpull.v1.XmlPullParserException: Wiersz 24 pliku binarnego XML: znacznik <item> wymaga atrybutu „drawable” lub znacznika potomnego definiującego drawable
Zennichimaro
3
czy możemy to zrobić programowo.
Killer
Mówi, że selektor elementów musi być zadeklarowany. EDYCJA: Niestety, plik znajdował się w folderze wartości zamiast w Drawable. Kiedy go przesłałem, zadziałało.
F0r3v3r-A-N00b
co tworzy cień po kliknięciu? staram się zmniejszyć szerokość cienia na dole ... nie ma szczęścia
Neville Nazerane
Nie rozumiem, co pokazanie, jak kodowane są selektory, ma związek z wyjaśnieniem, jak należy zakodować narożniki przycisków.
TavernSenses
344

Utwórz plik xml w folderze do rysowania, jak poniżej

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <!-- you can use any color you want I used here gray color-->
    <solid android:color="#ABABAB"/> 
    <corners android:radius="10dp"/>
</shape>

Zastosuj to jako tło do przycisku, który chcesz zaokrąglić.

Lub możesz użyć oddzielnego promienia dla każdego rogu, jak poniżej

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
Sandip Jadhav
źródło
57
Możesz po prostu skrócić rogi do Androida: radius = "10dp", co będzie dotyczyło wszystkich
Ben Simpson
22
To nie jest kompletne rozwiązanie, ponieważ nie obsługuje różnych stanów przycisków (naciśnięty, skupiony, domyślny). Aby uzyskać lepsze rozwiązanie, zobacz stackoverflow.com/questions/9334618/rounded-button-android
JosephL
3
@BenSimpson, zobaczysz, że istnieje różnica w kształcie, gdy umieścisz tylko tę jedną linię zamiast definiować każdy promień narożnika osobno.
Garima Tiwari
działa to lepiej niż wyróżniona odpowiedź. dziękuję milionowi!
Dan Linh
37

Utwórz plik XML jak poniżej. Ustaw jako tło dla przycisku. Zmień atrybut promienia na swoje życzenie, jeśli potrzebujesz więcej krzywej dla przycisku.

button_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/primary" />
    <corners android:radius="5dp" />
</shape>

Ustaw tło przycisku:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>
Pavithra Purushothaman
źródło
30

utwórz shape.xml w folderze z możliwością rysowania

jak shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <stroke android:width="2dp"
    android:color="#FFFFFF"/>
  <gradient 
    android:angle="225"
    android:startColor="#DD2ECCFA"
    android:endColor="#DD000000"/>
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
   android:topRightRadius="7dp" />
</shape>

oraz w myactivity.xml

możesz użyć

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>
Almostafa
źródło
16

Utwórz plik myButton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorButton"/>
    <corners android:radius="10dp"/>
</shape>

dodaj do swojego przycisku

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myButton"/>
Niebo
źródło
16

Czy istnieje prosty sposób na osiągnięcie tego w Androidzie?

Tak, dzisiaj jest i jest to bardzo proste.
Wystarczy użyć MaterialButtonw bibliotece komponentów materiałów z app:cornerRadiusatrybutem.

Coś jak:

    <com.google.android.material.button.MaterialButton
        android:text="BUTTON"
        app:cornerRadius="8dp"
        ../>

wprowadź opis zdjęcia tutaj

Wystarczy uzyskać przycisk z zaokrąglonymi narożnikami.

Możesz użyć jednego ze stylów przycisków Materiał . Na przykład:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    .../>

wprowadź opis zdjęcia tutaj

Począwszy od wersji 1.1.0 możesz również zmienić kształt przycisku. Wystarczy użyć shapeAppearanceOverlayatrybutu w stylu przycisku:

  <style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MyApp.Button.Rounded</item>
  </style>

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

Następnie użyj:

<com.google.android.material.button.MaterialButton
   style="@style/MyButtonStyle"
   .../>

Możesz także zastosować shapeAppearanceOverlayukład xml:

<com.google.android.material.button.MaterialButton
   app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
   .../>

shapeAppearancePozwala również mieć inny kształt i wymiar każdym rogu:

<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

wprowadź opis zdjęcia tutaj

Gabriele Mariotti
źródło
Wymaga także użycia motywu materiałowego
Vlad
@Vlad Tak, komponenty materiałowe wymagają motywu materiałowego.
Gabriele Mariotti,
11

Prostym sposobem, w jaki się dowiedziałem, było utworzenie nowego pliku xml w folderze, który można wyciągać, a następnie skierowanie tła przycisków na ten plik xml. oto kod, którego użyłem:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

<solid android:color="#ff8100"/>
<corners android:radius="5dp"/>

</shape>
AntonioSanchez
źródło
3
Aby przywrócić efekt falowania Motyw materiałowy na niestandardowym tle do rysowania, dodaj android:foreground="?attr/selectableItemBackground"w widoku przycisku. Zobacz stackoverflow.com/questions/38327188/…
Mr-IDE,
11

Utwórz plik rounded_btn.xml w folderze rysowalnym ...

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
     <solid android:color="@color/#FFFFFF"/>    

     <stroke android:width="1dp"
        android:color="@color/#000000"
        />

     <padding android:left="1dp"
         android:top="1dp"
         android:right="1dp"
         android:bottom="1dp"
         /> 

     <corners android:bottomRightRadius="5dip" android:bottomLeftRadius="5dip" 
         android:topLeftRadius="5dip" android:topRightRadius="5dip"/> 
  </shape>

i użyj tego pliku.xml jako tła przycisku

<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/rounded_btn"
android:text="Test" />
Ravi Makvana
źródło
7

Ten link zawiera wszystkie potrzebne informacje. Tutaj

Shape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape      xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

    <solid   android:color="#EAEAEA"/>

    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

i main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />
</LinearLayout>

To powinno dać ci pożądany rezultat.

Powodzenia

Deep Singh Baweja
źródło
6

stylowy przycisk z ikoną wprowadź opis zdjęcia tutaj

   <Button
        android:id="@+id/buttonVisaProgress"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape"
        android:onClick="visaProgress"
        android:drawableTop="@drawable/ic_1468863158_double_loop"
        android:padding="10dp"
        android:text="Visa Progress"
        android:textColor="@android:color/white" />

shape.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="14dp" />
<gradient
    android:angle="45"
    android:centerColor="#1FA8D1"
    android:centerX="35%"
    android:endColor="#060d96"
    android:startColor="#0e7e1d"
    android:type="linear" />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />
<size
    android:width="270dp"
    android:height="60dp" />
<stroke
    android:width="3dp"
    android:color="#000000" />

AGTHAMAYS
źródło
4

jeśli używasz wektorowych elementów do rysowania, po prostu musisz określić element <corners> w definicji rysunku. Omówiłem to w poście na blogu .

Jeśli używasz rysowanych map bitowych / 9 łatek, musisz utworzyć narożniki z przezroczystością na obrazie bitmapowym.

Mark Allison
źródło
0

rozkładany folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="30dp"/>
    <stroke android:width="2dp" android:color="#999999"/>
</shape>

folder układu

<Button
    android:id="@+id/button2"
    <!-- add style to avoid square background -->
    style="@style/Widget.AppCompat.Button.Borderless"
    android:background="@drawable/corner_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

upewnij się, że dodajesz styl, aby uniknąć kwadratowego tła

Hamdy Abd El Fattah
źródło