CODEWITHSUNDEEP
javaandroidimagebuttontext
Selutario
Selutario

Reputation: 73

How to make a button with rounded corners, background image and text in android

I'm trying to create an android button whose text can be changed (to be able to internationalize the app easily), but at the same time have a background, and using rounded corners if possible.

So far, if I use a background image I can not get the corners to be round and vice versa.

The last thing I tried is to create these xml file

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

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

and this button, but I can not put a background image:

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

What I'm trying to achieve is a result similar to the Morning Ritual button in this app, for example, if that is a button, which I do not know either.

Upvotes: 3

Views: 2079

Answers (3)

ahmad shafizadeh
ahmad shafizadeh

Reputation: 79

you can do all of them dynamically just like this

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

and by getRoundRect() you can get rounded corner shape with the color and size you want 

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;
}

or if you want to make gradient rounded corner shape you can easily use this code 

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

all of my suggestion was for making a button by dynamic text and rounded corners and colors

good luck and have fun (;

Upvotes: 2

Defolter Ricaris
Defolter Ricaris

Reputation: 129

You can use ImageButton, where android:src - image you need and android:background - rounded shape:

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

Or CardView:

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

Upvotes: 2

Deˣ
Deˣ

Reputation: 4371

You can use CardView or If you want to create Button, try this xml drawable:

<?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>

Upvotes: 2

Related Questions