2
votes

Comment créer un bouton avec des coins arrondis, une image d'arrière-plan et du texte sous Android

J'essaie de créer un bouton Android dont le texte peut être modifié (pour pouvoir internationaliser l'application facilement), mais en même temps avoir un arrière-plan, et utiliser des coins arrondis si possible.

Jusqu'à présent, si j'utilise une image d'arrière-plan, je ne peux pas faire en sorte que les coins soient ronds et vice versa.

La dernière chose que j'ai essayée est de créer ces fichiers xml

 <Button
        android:id="@+id/button"
        android:layout_width="235dp"
        android:layout_height="wrap_content"
        android:background="@drawable/background_selector"
        android:text="Button"
        tools:layout_editor_absoluteX="101dp"
        tools:layout_editor_absoluteY="277dp" />

XXX

et ce bouton, mais je ne peux pas mettre d'image d'arrière-plan:

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

Ce que j'essaye d'obtenir est un résultat similaire à le bouton Morning Ritual dans cette application , par exemple, s'il s'agit d'un bouton, qui Je ne sais pas non plus.

android java button image text

1 commentaires

C'est probablement une vue de carte, vérifiez ceci material.io/design/components/cards.html#

3 Réponses :

1
votes

Vous pouvez utiliser ImageButton, où android: src - image dont vous avez besoin et android: background - forme arrondie:

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="5dp"> 

     <ImageView
        android:src="@drawable/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

     <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="TEXT"/>

   </androidx.cardview.widget.CardView>

Ou CardView:

<ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/roundedImageButton"
            android:src="@drawable/backgound"
            android:text="TEXT" 
            android:background="@drawable/roundedShape" />

0 commentaires

2
votes

Vous pouvez utiliser CardView ou si vous souhaitez créer un Button , essayez ce dessin xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" android:padding="5dp">
            <corners
                 android:bottomRightRadius="4dp"
                 android:bottomLeftRadius="4dp"
                 android:topLeftRadius="4dp"
                 android:topRightRadius="4dp"/>
         </shape>
   </item>
   <item android:drawable="@drawable/yourImage" />
</layer-list>

0 commentaires

2
votes

vous pouvez tous les faire dynamiquement comme ceci

 GradientDrawable gd = new GradientDrawable(
            GradientDrawable.Orientation.TOP_BOTTOM,
            new int[] {0xFF616261,0xFF131313});
    gd.setCornerRadius(10f);
    button.setBackground(gd);

et par getRoundRect () vous pouvez obtenir une forme de coin arrondie avec la couleur et la taille que vous voulez

public Drawable getRoundRect() {
    RoundRectShape rectShape = new RoundRectShape(new float[]{
            10, 10, 10, 10,
            10, 10, 10, 10
    }, null, null);
    ShapeDrawable shapeDrawable = new ShapeDrawable(rectShape);
    shapeDrawable.getPaint().setColor(Color.parseColor("#FF0000"));
    shapeDrawable.getPaint().setStyle(Paint.Style.FILL);
    shapeDrawable.getPaint().setAntiAlias(true);
    shapeDrawable.getPaint().setFlags(Paint.ANTI_ALIAS_FLAG);
    return shapeDrawable;
}

ou si vous voulez créer une forme de coin arrondi dégradé, vous pouvez facilement utiliser ce code

 Button button = findViewById(R.id.button);
 button.setText("Test");
 button.setBackground(getRoundRect());

tout mon la suggestion était de faire un bouton avec du texte dynamique et des coins et des couleurs arrondis

bonne chance et amusez-vous bien (;

0 commentaires