Abgerundete Schaltfläche in Android

76

Ich möchte abgerundete Schaltflächen in einem Android-Programm erstellen. Ich habe mir angesehen, wie man EditText mit abgerundeten Ecken erstellt.

Was ich erreichen möchte, ist:

  1. Abgerundete Kantenknöpfe
  2. Ändern Sie den Hintergrund / das Erscheinungsbild der Schaltfläche in verschiedenen Zuständen (wie Onclick, Focus).
  3. Verwenden Sie mein eigenes PNG für den Hintergrund und erstellen Sie keine Form.
android  android-button  rounded-corners 
— Arnab C.
quelle
1
— Sergey Benner
Google hat neues Framework, neue Technologien sind besser Jetpack Compose
— Ucdemir

Antworten:

128

Sie können eine Schaltfläche mit abgerundeten Ecken ausführen, ohne auf eine ImageView zurückzugreifen.

Eine Hintergrundauswahlressource button_background.xml:

<?xml version="1.0" encoding="utf-8" ?> 
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <!--  Non focused states 
      --> 
      <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
      <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_unfocused" /> 
     <!--  Focused states 
      --> 
      <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
      <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/button_focus" /> 
     <!--  Pressed 
      --> 
      <item android:state_pressed="true" android:drawable="@drawable/button_press" /> 
    </selector>

Für jeden Status eine zeichnbare Ressource, z. B. button_press.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android:width="1dp" android:color="#FF404040" /> 
  <corners android:radius="6dp" /> 
  <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" /> 
</shape>

Beachten Sie das cornersElement, dies bringt Ihnen abgerundete Ecken!

Stellen Sie dann den Hintergrund auf die Schaltfläche ein:

android:background="@drawable/button_background"

BEARBEITEN (9/2018) : Mit derselben Technik kann eine kreisförmige Schaltfläche erstellt werden. Ein Kreis ist eigentlich nur eine quadratische Schaltfläche mit einem Radius von 1/2 der Seite des Quadrats

Darüber hinaus sind im obigen Beispiel die strokeund gradientnicht erforderlichen Elemente nur Beispiele und Möglichkeiten, wie Sie die abgerundete Eckform sehen können

— CSmith
quelle
1
CSMith. Ich habe den Selektor zum Laufen gebracht. Ich bin etwas verwirrt über den zweiten Teil, wo der Code abgelegt werden soll. Erstelle ich eine separate XML-Datei? Wenn ja, wie nenne ich es? Ich gehe davon aus, dass ich für den Button immer noch den Hintergrund auf @ drawable / button_background setze ... Thx
— Arnab C.
Ja, setzen Sie den Hintergrund auf button_background, und Sie haben eine XML-Datei für jeden "Status" in Ihrer Auswahl. Der zweite Teil ist ein Beispiel für button_press.xml.
— CSmith
1
CSmith. Wo also wird diese separate XML-Datei aufgerufen? Im obigen Beispiel haben Sie den Hintergrund auf ein zeichnbares Objekt festgelegt. Dies funktioniert hervorragend, damit sich der Hintergrund bei der Interaktion ändert. Die Schaltfläche wird jedoch nur gerundet, wenn Sie das PNG erstellen. mit abgerundeten Ecken und verwenden Sie neun Patches, um Verzerrungen zu vermeiden.
— Arnab C.
2
Ich bin ziemlich neu in der Android-Entwicklung und diese Frage könnte verdammt naiv herauskommen: Zu welchem drawableOrdner soll ich die XML-Datei hinzufügen? Ich habe vier verschiedene drawableOrdner : drawable-hdpi; drawable-mdpi;; drawable-xhdpi;; drawable-xxhdpi.
— ikartik90
3
@ ikartik90, zeichne verwenden. Die anderen Ordner werden im Allgemeinen verwendet, um Einstellungen zu überschreiben, die sich im zeichnbaren Ordner "base" für dichtespezifische Assets oder Einstellungen befinden. In diesem Beispiel sind keine dichtespezifischen Überschreibungen vorhanden.
— CSmith
76

Wenn Sie in Android eine abgerundete Schaltfläche benötigen, erstellen Sie eine XML-Datei "RoundShapeBtn.xml" als zeichnbar.

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">   
  <solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->
  <corners
   android:bottomRightRadius="10dp"
   android:bottomLeftRadius="10dp"
   android:topLeftRadius="10dp"
   android:topRightRadius="10dp"/>
</shape>

Fügen Sie dies Ihrem Schaltflächencode hinzu:

android:background="@drawable/RoundShapeBtn"
— Pir Fahim Shah
quelle
1
Füge ich auch hier die Schriftart hinzu, falls der Schaltflächentext eine bestimmte Schriftart haben soll?
— Garima Tiwari
@GarimaTiwari ja, Sie können dies und vieles mehr beim Entwerfen verwandter tun
— Pir Fahim Shah
4
Tatsächlich erhalten Sie einen Erstellungsfehler, wenn Sie die Datei mit CapitalLettersInTheName benennen .. :)
— tplive
17

Erstellen Sie eine XML-Datei in einem zeichnbaren Ordner in Android wie:

round_button.xml

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

    <corners android:radius="20dp"/> // if you want clear round shape then make radius size is half of your  button`s height.
    <solid android:color="#EEFFFFFF"/> // Button Colour
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"/>

</shape>

Nun diese XML-Datei als Hintergrund für Ihre Schaltflächen.

 <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/rounded_button"
        android:text="@string/button_text"
        android:textColor="@color/black"/>
— Arunendra
quelle
Dies ist das, wonach die meisten Menschen tatsächlich suchen. Sehr gebogene glatte rechteckige Kanten. Wie kann ich einen Schatten auf die Schaltfläche setzen? Vielen Dank!
— Bruce
Stellar! Wenn sich jemand darüber ärgert, separate XMLs mit abgerundeten Schaltflächen erstellen zu müssen, um unterschiedliche Farben zu erhalten, können Sie diese solid android:coloraus dem zeichnbaren XML entfernen und stattdessen Farben android:backgroundTintfür jedes angebenButton
— Kartik Chugh
@ K_7 Wenn du das tust, verlierst du die Höhe und den Schatten. Folgen Sie einfach diesem, Sie würden Höhe und Schatten erhalten, wenn Sie die Taste gedrückt halten.
— Jeffrey Liu
5

Erweitern Sie ImageViewwie folgt :

public class RoundedImageView extends ImageView {
  private static final String TAG = "RoundedImageView";

  private float mRadius = 0f;

  public RoundedImageView(Context context) {
    super(context);
  }

  public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);

    // retrieve styles attributes
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedView);
    mRadius = a.getDimension(R.styleable.RoundedView_radius, 0f);
    a.recycle();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    // only do this if we actually have a radius
    if(mRadius > 0) {
      RectF rect = new RectF(0, 0, getWidth(), getHeight());
      Path clipPath = new Path();
      clipPath.addRoundRect(rect, mRadius, mRadius, Path.Direction.CW);
      canvas.clipPath(clipPath);
    }
    super.onDraw(canvas);
  }
}

Wenden Sie Ihre normale Hintergrundressource darauf an, und sie sollte mit abgerundeten Ecken abgeschnitten werden.

— Cody Caughlan
quelle
Gibt es standardmäßig R.styleable.RoundedView_radius und R.styleable.RoundedView?
— Sergey Benner
Cody, wie kann ich den Quellcode für android.widget.imageview.class anzeigen? Ich bekomme immer wieder die Frage, ob Sie eine Quelldatei anhängen möchten, weil sie in Eclipse nicht gefunden wurde.
— Arnab C.
@ Jib können Sie auf den Android-Quellcode zugreifen unter: source.android.com/source/downloading.html
— Cody Caughlan
Danke Cody, diese programmatische Lösung ist genau das, was ich brauchte.
— DwarDoh
5

Es wird von Google empfohlen , keine UI-Elemente von anderen Plattformen nachzuahmen. Ich würde keine abgerundeten Schaltflächen im iOS-Stil in eine Android-Anwendung einfügen.

— Christopher Perry
quelle
61
Es ist nicht unsere Schuld, dass die Entwickler beschlossen haben, eine hässliche Benutzeroberfläche als Standard zu verwenden.
— Yehonatan
Dies ist ein bisschen nach dem alten, aber ich dachte, ich würde jedem, der liest, hinzufügen, dass die App meines vorherigen Unternehmens aufgrund des vielen iOS-UI-Stils fast nicht im App Store enthalten war. Wir mussten die entsprechenden Überlegungen zum Materialdesign überarbeiten und berücksichtigen. Immer wichtig, die Richtlinien zu befolgen!
— Lase
1
@lase völlig anderer Meinung, die Richtlinien sind nur das, sie sind keine harten Regeln
— martinseal1987
@ martinseal1987 gut, so locker wie Regeln sein können, ich bin zukünftige Leser anekdotische Beweise nur vorausgesetzt , dass die Plattform Halter tun durch die Antwort des Link zu den Styleguide und der großen Abschnitt auf Cross - Plattform - Implementierung kümmern sich um Stil Konsistenz, die vielleicht offensichtlich ist , . Fühlen Sie sich frei, die Würfel zu würfeln!
— Lase
@Lase der Playstore würde Ihre App niemals verweigern, weil sie sich nicht an die Richtlinien hält. Sie sind keine Regeln im
— wahrsten
3

Dies kann mit dem Eckattribut erfolgen. Schauen Sie sich die folgende XML an.

<item>
    <shape android:shape="rectangle" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

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

        <corners
            android:bottomLeftRadius="102.0dip"
            android:bottomRightRadius="102.0dip"
            android:radius="102.0dip"
            android:topLeftRadius="102.0dip"
            android:topRightRadius="102.0dip" />
    </shape>
</item>

— Rohit Goyal
quelle
3

Es ist viel besser, die Schaltflächenzustände und -formen in einer XML-Auswahldatei abzulegen. Dadurch sollte Ihre App schneller / besser laufen. Versuchen Sie dies (mit freundlicher Genehmigung von Introduction to Android Application Development). Hier nicht zu spammen, nur das zu zeigen, ist nicht mein Code.

    <?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="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333"      android:endColor="#555555"  />            
    </shape>
    </item>
    <item android:state_focused="true">
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <solid android:color="#58857e"/>       
    </shape>
    </item>  
    <item >
    <shape android:shape="rectangle"  >
     <corners android:radius="12dip" />
     <stroke android:width="1dip" android:color="#333333" />
     <gradient android:angle="-90" android:startColor="#333333" android:endColor="#555555" />            
    </shape>
    </item>

    </selector>

PS-Designtipp: Farbverläufe und abgerundete Rechtecke werden am besten verwendet, wenn Sie kaum erkennen können, dass sie sinnvoll verwendet werden.

2

Abgerundete Schaltflächen können auch mit Ringform erstellt werden, die gezeichnet werden kann (siehe http://www.zoftino.com/android-shape-drawable-examples)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thickness="40dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
    <padding android:bottom="50dp"
        android:left="16dp"
        android:right="16dp"
        android:top="50dp"/>
</shape>
— Arnav Rao
quelle
1

Erstellen Sie eine zeichnbare Ressource mit dem Namen btnOval -> und anschließend den Code.

 <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval"  
android:padding="10dp">   
      <solid android:color="#6E6E6E"/> 
    </shape>

und Benutzer innerhalb der Schaltfläche Tag wie,

<Button
andorid:width=""
android:hieght=""
android:background="@Drawable/btnOval"
/>
— Ashik Azeez
quelle
0

Versuchen Sie es mit dem folgenden Code: Erstellen Sie eine zeichnbare Datei mit dem Namen Circular_button.xml und fügen Sie die folgende Datei ein

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:bottomRightRadius="100dp"
    android:bottomLeftRadius="100dp"
    android:topRightRadius="100dp"
    android:topLeftRadius="100dp"/>
</shape>

Ändern Sie dann den Hintergrund der Schaltfläche in diese zeichnbare Datei

 <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_button"
                android:text="Button"/>

Wenn Sie eine Vollkreisschaltfläche möchten, können Sie die unten stehende Zeichenfläche verwenden

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

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

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>
— Udara Abeythilake
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.