I want to design an sign in interface for my sample app, and like other app in the sign in i have 3 button.
- Sign in by using google
- Sign in by my app's account
- 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>