How can I add a gradient background to a button

Question

I am trying to create a gradient background on a button, but when I follow the answers of previously asked question to do this, all I get is the default purple.

Below is my code as an example:

layout.xml

<Button
        android:id="@+id/instagram_button"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:background="@drawable/gradient_shape"
        android:text="Open Instagram Profile"
        ></Button>

gradient_shape.xml

android:shape="rectangle">
<gradient
    android:angle="270"
    android:centerColor="#F82634"
    android:endColor="#FA3B6F"
    android:startColor="#FA7D6F" />

<padding
    android:bottom="7dp"
    android:left="7dp"
    android:right="7dp"
    android:top="7dp" />

<corners android:radius="60dp" />

Button background I am getting

Have a look here https://stackoverflow.com/a/62276399/1133011 — David Kroukamp, Jan 08 '21 at 19:47
@CSmith I wasn't sure on the formatting used here and was just giving it a general name for the post. — , Jan 08 '21 at 20:10
@DavidKroukamp thanks for the link. I added null to the background tint to no avail. — , Jan 08 '21 at 20:10

score 0 · Accepted Answer · 2021-01-13T14:49:40.967

|Final Update|: Changed the button to an ImageButton and set the srcCompat to the drawable I wanted and this method worked! To get text with my button on top of each other, I used a Frame layout to encapsulate them all as below.

 <FrameLayout
    android:layout_width="380dp"
    android:layout_height="50dp"
    android:layout_gravity="center">
        <ImageButton
            android:id="@+id/image_button"
            android:text="Open Instagram Profile"
            android:layout_width="380dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:backgroundTint="@null"
            android:background="@null"
            app:srcCompat="@drawable/custom_button" />

    <Button
        android:id="@+id/instagram_button"
        android:layout_width="380dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@null"
        android:backgroundTint="@null"
        android:text="Open Instagram Profile"
        android:alpha="0"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Open Instagram Profile"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="@color/white"
        ></TextView>
</FrameLayout>

score 0 · Answer 2 · answered Jan 09 '21 at 10:15

0

create new Drawable Resource write below code:

gradient_background:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape>
        <corners android:radius="60dp"/>
        <gradient android:startColor="#fa7d6f"
            android:centerColor="#f82634"
            android:endColor="#fa3b6f"
            android:angle="180"/>
    </shape>
  </item>
</selector>

layout:

 <Button
     android:layout_width="250dp"
     android:layout_height="60dp"
     android:text="test button"
     android:textColor="@color/white"
     android:textStyle="bold"
     android:textSize="25sp"
     android:background="@drawable/gradient_background"/>

answered Jan 09 '21 at 10:15

Farid Sharif Moghaddam

157
3
12

This didn't work for me. It seems like it works for everyone else so I'm not sure why I'm having this problem. I am working with a scrolling activity so I wouldn't assume that would prevent it from working but maybe? – Jan 10 '21 at 15:41
Test it on a single button or textview in activity and test on other emulator or mobile with higher api – Farid Sharif Moghaddam Jan 10 '21 at 18:14
Which api do you use for testing ?? – Farid Sharif Moghaddam Jan 10 '21 at 18:22
I've been testing it on the pixel 3a. I thought about testing it on a new project but thought that there wasn't much of a point to test if it works on something else if it still doesn't work on my project. I don't love that logic so I will probably test it out when I get a chance. – Jan 11 '21 at 19:40
It should work fine but i don't know what is your problem. Do you test on real mobile?? – Farid Sharif Moghaddam Jan 12 '21 at 11:00
Nope just the emulator. – Jan 12 '21 at 23:29
I just tested it on a blank, new scrolling activity and it didn't work again. Not sure why this would be or how to check what could be wrong. – Jan 13 '21 at 00:00
Test on a real mobile and once again test on emulator with higher api to check it – Farid Sharif Moghaddam Jan 13 '21 at 10:01
Gradient doesn't work on some emulator but work on real device – Farid Sharif Moghaddam Jan 13 '21 at 10:11
Alright, Thank you for you continued help. – Jan 13 '21 at 14:48

How can I add a gradient background to a button

2 Answers2