3

How do I create buttons like the one below in Android? For the most part I have the main section of the button down. I can't seem to figure out the shadow and the clicking animation.

Button

<Button
    android:text="Connect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/connectionStatus"
    android:layout_centerHorizontal="true"
    android:id="@+id/button"
    android:background="@drawable/button_background"
    android:minWidth="300dp"
    android:layout_marginTop="32dp"
    android:onClick="onClick"
    android:textColor="#fff"
    />

Here is the drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#21D4FD"
        android:endColor="#B721FF"
        android:angle="45"
    />
    <corners android:bottomLeftRadius="20dip"
        android:topRightRadius="20dip"
        android:topLeftRadius="20dip"
        android:bottomRightRadius="20dip"
    />
</shape>

This is what I currently have:

What I have

This is what I want to have:

What I want

Hunter Copp
  • 539
  • 7
  • 14
  • Look in to elevation for the shadow effect. As far as I am concerned for the buttons, you may want to use ImageButtons with gradients embedded from software such as Photoshop. https://developer.android.com/training/material/shadows-clipping.html – AeriaGlorisia Sep 08 '17 at 01:51

2 Answers2

2

You should try This to make gradient on your button.

to know more please click Here

Hector Morris
  • 118
  • 5
0

I found a solution for that 4 Buttons in your image. I combined a library with my own drawable and a trick and reached a Button like you were searching for. Take a look at this and here is my Spoiler:

My approach

Ole Pannier
  • 3,208
  • 9
  • 22
  • 33