Wie macht man die Ecken eines Knopfes rund?

457

Ich möchte die Ecken einer buttonRunde machen. Gibt es eine einfache Möglichkeit, dies in Android zu erreichen?

Künstler
quelle
2
Überprüfen Sie dies: nishantvnair.wordpress.com/2010/11/09/…
Lavanya
11
Dies ist keine breite Frage, es ist absolut auf den Punkt. es als "zu breit" zu markieren, ist nur eine SO-Mentalität, die geändert werden muss. Hör auf, Diktatoren zu sein.
user734028
2
stimme mit user734028 überein: was zum Teufel, wie kommt es, dass es zu breit ist? Dies wäre nur dann spezifischer gewesen, wenn das OP gefragt hätte, wie der Eckenradius auf N Pixel eingestellt werden soll. Komm schon!
Nyholku

Antworten:

679

Wenn Sie so etwas wollen

Tastenvorschau

Hier ist der Code.

1.Erstellen Sie eine XML-Datei in Ihrem Zeichenordner wie mybutton.xml und fügen Sie das folgende Markup ein:

<?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. Verwenden Sie dieses Zeichen jetzt für den Hintergrund Ihrer Ansicht. Wenn die Ansicht eine Schaltfläche ist, dann ungefähr so:

<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
quelle
es stürzte ab: Auslöser: org.xmlpull.v1.XmlPullParserException: Binäre XML-Dateizeile # 24: <item> -Tag erfordert ein 'drawable'-Attribut oder ein untergeordnetes Tag, das ein drawable definiert
Zennichimaro
3
können wir dies programmatisch tun?
Killer
Es heißt, dass die Elementauswahl als BEARBEITEN deklariert werden muss: Die Datei befand sich leider im Werteordner anstelle der Zeichendatei. Als ich es übertragen habe, hat es funktioniert.
F0r3v3r-A-N00b
Was erzeugt den Schatten beim Klicken? Ich versuche, die Schattenbreite unten zu reduzieren ... kein Glück
Neville Nazerane
Ich verstehe nicht, was das Zeigen, wie Selektoren codiert sind, damit zu tun hat, zu erklären, wie Tastenecken codiert werden sollten.
TavernSenses
345

Erstellen Sie eine XML-Datei in einem zeichnbaren Ordner wie unten

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

Wenden Sie dies als Hintergrund auf die Schaltfläche an, für die Ecken abgerundet werden sollen.

Oder Sie können einen separaten Radius für jede Ecke wie unten verwenden

android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
Sandip Jadhav
quelle
57
Sie können die Ecken einfach auf Android kürzen: radius = "10dp", was für alle gilt
Ben Simpson
22
Dies ist keine vollständige Lösung, da die verschiedenen Schaltflächenzustände (gedrückt, fokussiert, Standard) nicht unterstützt werden. Für eine bessere Lösung siehe stackoverflow.com/questions/9334618/rounded-button-android
JosephL
3
@BenSimpson, Sie werden sehen, dass es einen Unterschied in der Form gibt, wenn Sie nur diese eine Linie einfügen, anstatt jeden der Eckradien einzeln zu definieren.
Garima Tiwari
Dies funktioniert perfekter als die hervorgehobene Antwort. Danke eine Million!
Dan Linh
37

Erstellen Sie eine XML-Datei wie die folgende. Stellen Sie es als Hintergrund für die Schaltfläche ein. Ändern Sie das Radiusattribut nach Ihren Wünschen, wenn Sie mehr Kurve für die Schaltfläche benötigen.

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>

Stellen Sie den Hintergrund auf Ihre Schaltfläche ein:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>
Pavithra Purushothaman
quelle
30

Erstellen Sie die Datei shape.xml in einem zeichnbaren Ordner

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

und in myactivity.xml

Sie können verwenden

<Button
    android:id="@+id/btn_Shap"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:text="@string/Shape"
    android:background="@drawable/shape"/>
Fastafa
quelle
16

Erstellen Sie die Datei 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>

zu deiner Schaltfläche hinzufügen

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/myButton"/>
Himmel
quelle
16

Gibt es eine einfache Möglichkeit, dies in Android zu erreichen?

Ja, heute gibt es und es ist sehr einfach.
Verwenden Sie einfach das MaterialButtonin der Bibliothek Materialkomponenten mit dem app:cornerRadiusAttribut.

Etwas wie:

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

Geben Sie hier die Bildbeschreibung ein

Es reicht aus, einen Knopf mit abgerundeten Ecken zu erhalten.

Sie können einen der Materialschaltflächenstile verwenden . Zum Beispiel:

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

Geben Sie hier die Bildbeschreibung ein

Ab Version 1.1.0 können Sie auch die Form Ihrer Schaltfläche ändern . Verwenden Sie einfach das shapeAppearanceOverlayAttribut im Schaltflächenstil:

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

Dann benutze einfach:

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

Sie können das auch shapeAppearanceOverlayim XML-Layout anwenden :

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

Dies shapeAppearanceermöglicht auch unterschiedliche Formen und Abmessungen für jede Ecke:

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

Geben Sie hier die Bildbeschreibung ein

Gabriele Mariotti
quelle
Es erfordert auch das Material-Thema zu verwenden
Vlad
@Vlad Ja, Materialkomponenten erfordern ein Materialthema.
Gabriele Mariotti
11

Ich fand es einfach heraus, eine neue XML-Datei im Zeichenordner zu erstellen und dann den Hintergrund der Schaltflächen auf diese XML-Datei zu richten. Hier ist der Code, den ich verwendet habe:

<?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
quelle
3
Fügen Sie in der Schaltflächenansicht hinzu, um den Material-Design-Welligkeitseffekt im benutzerdefinierten zeichnbaren Hintergrund wiederherzustellen android:foreground="?attr/selectableItemBackground". Siehe stackoverflow.com/questions/38327188/…
Mr-IDE
11

Erstellen Sie die Datei round_btn.xml im Ordner Drawable ...

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

und verwenden Sie diese.xml-Datei als Schaltflächenhintergrund

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

Dieser Link enthält alle Informationen, die Sie benötigen. Hier

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>

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

Dies sollte Ihnen das gewünschte Ergebnis liefern.

Viel Glück

Deep Singh Baweja
quelle
6

Stilschaltfläche mit Symbol Geben Sie hier die Bildbeschreibung ein

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

Wenn Sie Vektor-Drawables verwenden, müssen Sie in Ihrer Drawable-Definition lediglich ein <corners> -Element angeben. Ich habe dies in einem Blog-Beitrag behandelt .

Wenn Sie Bitmap / 9-Patch-Drawables verwenden, müssen Sie die Ecken mit Transparenz im Bitmap-Bild erstellen.

Mark Allison
quelle
0

Zeichenordner

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

Layout-Ordner

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

Stellen Sie sicher, dass Sie Stil hinzufügen, um einen quadratischen Hintergrund zu vermeiden

Hamdy Abd El Fattah
quelle