Home > other >  Android Studio: how to add gradient to button after corner it
Android Studio: how to add gradient to button after corner it

Time:01-13

I want to design an sign in interface for my sample app, and like other app in the sign in i have 3 button.

  1. Sign in by using google
  2. Sign in by my app's account
  3. Sign up an account

each button i had corner it through xml, but i still want some gradient in it but dont know how to add up

i did try add gradient into xml file

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomRightRadius="45dp"
        android:bottomLeftRadius="45dp"
        android:topRightRadius="45dp"
        android:topLeftRadius="45dp"
        ></corners>
    <gradient
        android:startColor="@color/white"
        android:endColor="#AEAEAE"
        android:angle="120"></gradient>
    </shape>

but the button always come out at it's base color and the corner still round

I'm still a newbie so I'd appreciate it if anyone could give step-by-step answers. Thanks

CodePudding user response:

Try using AppCompatButton instead of Button.

<androidx.appcompat.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"/>

CodePudding user response:

You can use AppCompatTextView, with android:background="@drawable/button_background" and don't forget make it clickable android:clickable="true" android:focusable="true" Example

<androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:background="@drawable/button_background"
                    android:text="sign_in" />

If you want ripple effect you can add it in button_background like this

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#8014B3">
  <item>
    <shape android:shape="rectangle">
        <corners
            android:bottomRightRadius="45dp"
            android:bottomLeftRadius="45dp"
            android:topRightRadius="45dp"
            android:topLeftRadius="45dp"
            ></corners>
        <gradient
            android:startColor="@color/white"
            android:endColor="#AEAEAE"
            android:angle="120"></gradient>
    </shape>
  </item>
</ripple>
  • Related