Abgerundete Schaltfläche in Android

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.

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

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"

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

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.

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.

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>

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.

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>

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

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>