web-dev-qa-db-fra.com

Bouton Android avec coins arrondis, effet d'entraînement et pas d'ombre

J'essaie de construire Android Button avec des coins arrondis. Mais le long des coins arrondis (en bas à gauche et à droite), il y a une ombre de couleur grise indésirable autour.

 rounded corner button

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

Ensuite, dans le fichier XML de mise en page, j'ai:

<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) Comment puis-je me débarrasser de l’ombre de couleur grise supplémentaire autour des coins arrondis (coin inférieur gauche et droit)?

2) Le bouton a un effet d'entraînement par défaut. Comment puis-je conserver l'effet d'entraînement par défaut?

androidbuttonrounded-cornersripple
8
Shuwn Yuan Tee

Je l'ai finalement résolu avec le code ci-dessous. Cela permet d'obtenir des coins arrondis pour le bouton. En outre, pour la version Android> = V21, il utilise l'effet d'entraînement. Pour les versions antérieures d'Android, la couleur du bouton change lorsque vous cliquez dessus, en fonction de Android:state_pressed, Android:state_focused, etc.

Dans le fichier layout xml:

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

Pour l’effet d’ondulation sur le bouton (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>

Pour les versions antérieures d'Android, il suffit de changer la couleur de fond lors de onclick:

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>

Réglage du style et de l’ondulation sur le bouton

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

inspiré par link

cela ajoutera un effet d'ondulation des coins arrondis parfaits au bouton avec une forme d'angle arrondi et aucune ombre 

gif d'appuyer sur un bouton

7
Legend Mortal

Dans votre fichier, dessinez un fichier comme ceci:

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>

Augmentez le rayon pour le rendre plus incurvé.

Et dans votre bouton XML for, donnez un style sans bordure au bouton et à l’arrière-plan que vous avez définis comme ci-dessus:

<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

Essayez de définir ceci dans votre XML. Cela a fonctionné pour moi. 

style="?android:attr/borderlessButtonStyle"

De même, si vous ciblez une API de niveau 21 ou supérieur, vous pouvez utiliser 

Android:stateListAnimator="@null"

Ce lien a plus de réponses Comment supprimer un bouton d'ombre (Android)

1
wick.ed

Essayez ceci dans le 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