web-dev-qa-db-de.com

Android-Button mit abgerundeten Ecken, Welleneffekt und ohne Schatten

Ich versuche, Android Button mit abgerundeten Ecken zu bauen. An den abgerundeten Ecken (untere linke und rechte Ecke) befindet sich jedoch ein unerwünschter grauer Farbschatten.

 rounded corner button

Hier ist mein Code:

drawable/my_button.xml

<?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
      <shape Android:shape="rectangle">
        <stroke Android:width="1dp" Android:color="#ffa6c575" />
        <solid Android:color="#ffa6c575"/>
        <corners Android:radius="15dp" />
      </shape>
    </item>
  </selector>

Dann habe ich in der Layout-XML-Datei:

<LinearLayout
  <Button
    Android:id="@+id/buy_button"
    Android:layout_width="0dp"
    Android:layout_weight="1"
    Android:layout_height="35dp"
    Android:layout_gravity="center"
    Android:background="@drawable/my_button"
    Android:textColor="@Android:color/white"
    Android:text="BUY" />

  <View
    Android:layout_width="10dp"
    Android:layout_height="match_parent"
    Android:background="@Android:color/transparent" >
  </View>

  <Button
    Android:id="@+id/sell_button"
    Android:layout_width="0dp"
    Android:layout_weight="1"
    Android:layout_height="35dp"
    Android:layout_gravity="center"
    Android:background="@drawable/my_button"
    Android:textColor="@Android:color/white"
    Android:text="SELL" />

</LinearLayout>

1) Wie kann ich den zusätzlichen grauen Schatten um die abgerundeten Ecken (untere linke und rechte Ecke) entfernen?

2) Die Schaltfläche hat einen Standard-Welligkeitseffekt. Wie kann ich den Standard-Ripple-Effekt beibehalten?

androidbuttonrounded-cornersripple
8
Shuwn Yuan Tee

Ich habe es schließlich mit dem folgenden Code gelöst. Dadurch werden abgerundete Ecken für die Taste erzielt. Für Android-Version> = V21 wird außerdem der Ripple-Effekt verwendet. Bei früheren Android-Versionen ändert sich die Farbe der Schaltflächen, wenn auf sie geklickt wird, basierend auf Android:state_pressed, Android:state_focused usw.

In layout xml-Datei:

<Button
    style="?android:attr/borderlessButtonStyle"
    Android:id="@+id/buy_button"
    Android:layout_width="0dp"
    Android:layout_weight="1"
    Android:layout_height="match_parent"
    Android:gravity="center"
    Android:background="@drawable/green_trading_button_effect"
    Android:textColor="@Android:color/white"
    Android:text="BUY" />

Für den Klick-Klick-Ripple-Effekt (Android> = v21):

drawable-v21/green_trading_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/ripple_material_dark">

    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@Android:color/white" />
            <corners Android:radius="5dp" />
        </shape>
    </item>

    <item Android:drawable="@drawable/green_trading_button" />
</ripple>

Bei früheren Android-Versionen ändern Sie einfach die Hintergrundfarbe während des Klickens:

drawable/green_trading_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/green_trading_button_selected" />
    <item Android:state_focused="true" Android:drawable="@drawable/green_trading_button_selected" />
    <item Android:state_selected="true" Android:drawable="@drawable/green_trading_button_selected" />
    <item Android:drawable="@drawable/green_trading_button" />
</selector>

drawable/green_trading_button.xml

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

    <solid Android:color="#ffa6c575"/>
    <!-- rounded corners -->
    <corners Android:radius="5dp" />
</shape>

drawable/green_trading_button_selected.xml

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

    <solid Android:color="#ffc5dca8"/>
    <!-- corners corners -->
    <corners Android:radius="5dp" />
</shape>
20
Shuwn Yuan Tee

drawable/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/circle" Android:state_pressed="true">
        <shape Android:shape="rectangle">
            <corners Android:bottomLeftRadius="25dp" Android:bottomRightRadius="25dp" Android:topLeftRadius="25dp" Android:topRightRadius="25dp" />
        </shape>
    </item>
    <item Android:drawable="@Android:color/transparent" />
</selector>

drawablev21/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/ripple_white">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <corners
                Android:bottomLeftRadius="25dp"
                Android:bottomRightRadius="25dp"
                Android:topLeftRadius="25dp"
                Android:topRightRadius="25dp" />
            <solid Android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

drawable/button_circle_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners
        Android:bottomRightRadius="25dp"
        Android:topRightRadius="25dp"
        Android:bottomLeftRadius="25dp"
        Android:topLeftRadius="25dp"/>
    <solid Android:color="@color/colorAccent" />
</shape>

drawable/circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners
        Android:bottomRightRadius="25dp"
        Android:topRightRadius="25dp"
        Android:bottomLeftRadius="25dp"
        Android:topLeftRadius="25dp"/>
    <solid Android:color="@color/ripple_white" />
</shape>

Einstellungsstil und -welligkeit für den Button

<Button
            Android:id="@+id/choose_folder"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_margin="8dp"
            Android:background="@drawable/button_circle_background"
            Android:foreground="@drawable/ripple_circle"
            Android:text="Chose Folder"
            Android:textColor="@Android:color/white" />

inspiriert von link

dadurch wird der Rundungseffekt der runden Ecken mit runden Ecken und ohne Schatten perfekt 

GIF des Tastendrucks

7
Legend Mortal

Erstellen Sie in Ihrer Zeichnungsdatei eine Datei wie folgt:

button_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
    <corners
        Android:bottomRightRadius="15dp"
        Android:topRightRadius="15dp"
        Android:bottomLeftRadius="15dp"
        Android:topLeftRadius="15dp"/>
    <solid Android:color="@color/blue_500" />
</shape>

Erhöhen Sie den Radius, um ihn gebogener zu machen.

Geben Sie in Ihrem XML for button den Button und den Hintergrund, die Sie wie oben gemacht haben, randlos an:

<Button
    Android:id="@+id/task_action_btn"
    style="@style/Base.Widget.AppCompat.Button.Borderless"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    Android:background="@drawable/button_background"
    Android:textAppearance="@style/Base.TextAppearance.AppCompat.Body1"
    Android:textColor="@Android:color/white" />
2
Meikiem

Versuchen Sie dies in Ihrer XML-Datei einzustellen. Das hat bei mir funktioniert. 

style="?android:attr/borderlessButtonStyle"

Wenn Sie auf API-Ebene 21 oder höher abzielen, können Sie auch verwenden 

Android:stateListAnimator="@null"

Dieser Link hat mehr Antworten So entfernen Sie die Schaltfläche Schatten (Android)

1
wick.ed

Versuchen Sie dies im Code 

Button buyButton = (Button) findViewById(R.id.buy_button);
Button sellButton = (Button) findViewById(R.id.sell_button);

hideShadow(buyButton);
hideShadow(sellButton);


public void hideShadow(Button button) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        button.setElevation(0);
    }
}
0
VinayagaSundar