Develop Reference

How to make upper shadow for button in android?

I want to make a button like this. I used cardview to give the radius and drop shadow effect. But only dropshadow does not gives an edgy style like in the image above.
Here is my code for creating this type of button:
<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
app:cardCornerRadius="20dp"
app:cardBackgroundColor="#color/tuna2"
app:strokeColor="#color/gun_powder"
app:cardElevation="6dp"
app:contentPadding="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView28"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/transfer"
android:textColor="#color/white"
android:layout_marginStart="30dp"
android:layout_marginEnd="37dp"
android:fontFamily="#font/dm_sans"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
app:layout_constraintBottom_toBottomOf="#+id/textView28"
app:layout_constraintStart_toEndOf="#+id/textView28"
app:layout_constraintTop_toTopOf="#+id/textView28"
app:srcCompat="#drawable/ic_arrow_right" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
This code creates a button like in the image below:
How can I make the button look like the sun is hitting from above?

Try This
drawable/custom_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#41445F"/>
<corners android:radius="20dp"/>
<size android:width="100dp" android:height="40dp"/>
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#303348"/>
<corners android:radius="20dp"/>
<size android:width="100dp" android:height="40dp"/>
</shape>
</item>
</layer-list>
and set background in ConstraintLayout layout like this
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/custom_bg">
output like this

TextInputLayout endIcon background color

Is it possible to have background color only behind endIcon?
At the moment all I can do is only showing the custom icon.
Here the code I write to get current design.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/date_of_birth_input_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:endIconDrawable="#drawable/ic_calendar"
app:endIconMode="custom"
app:endIconTint="#color/redText"
app:endIconTintMode="multiply"
app:hintEnabled="false"
app:layout_constraintTop_toBottomOf="#id/date_of_birth_title">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/date_of_birth_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="6dp"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:focusable="false"
android:fontFamily="#font/opensans_regular"
android:hint="#string/date_of_birth_hint"
android:imeOptions="actionNext"
android:inputType="text"
android:paddingLeft="10dp"
android:paddingTop="13dp"
android:paddingRight="10dp"
android:paddingBottom="13dp"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>

Add new calendar.xml to drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1.5dp"
android:top="1.5dp"
android:right="1.5dp"
android:drawable="#drawable/background"
android:gravity="center_horizontal|center_vertical"
android:width="48dp"
android:height="48dp"
/>
<item
android:drawable="#drawable/ic_calendar"
android:gravity="center_horizontal|center_vertical"
android:width="36dp"
android:height="36dp"
/>
</layer-list>
backgroud.xml like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/red" />
<corners android:bottomRightRadius="2.5dp"
android:topRightRadius="2.5dp"/>
</shape>
and change like this:
app:endIconDrawable="#drawable/calendar"
if you get an error(vector) you should add this to build.gradle:
defaultConfig {
vectorDrawables.useSupportLibrary = true
}

Button state drawable pressed triggering multiple buttons

Have some buttons with their background set to the drawable custom_button.xml. The selector is suppose to change the drawable when pressed, disabled, and default. For some reason when I press any button in the view the last button in my layout will also have its drawable set to rounded_corner_pressed. This is all done through the selector. I've tried adding state_focus to no avail. Any ideas?
EDIT Tried to make the question more clear
custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true" f
android:drawable="#drawable/rounded_corner_pressed" />
<item
android:state_enabled="false"
android:drawable="#drawable/rounded_corner_disabled" />
<item
android:drawable="#drawable/rounded_corner" />
</selector>
rounded_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"/>
<stroke
android:width="1dp"
android:color="#color/background_color" />
<padding android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
rounded_corner_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_green_light"/>
<corners android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"/>
<stroke
android:width="1dp"
android:color="#color/background_color" />
<padding android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
Layout It's in
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_margin="10sp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/questionView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner"
android:gravity="center_horizontal|center_vertical"
android:minHeight="85dp"
android:text="Question"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black"
android:textStyle="bold" />
<Button
android:id="#+id/answerOne"
android:layout_width="match_parent"
android:layout_height="65dip"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/custom_button"
android:layout_below="#id/questionView"
android:text="Answer 1" />
<Button
android:id="#+id/answerTwo"
android:layout_width="match_parent"
android:layout_height="65dip"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/custom_button"
android:layout_below="#id/answerOne"
android:text="Answer 2" />
<Button
android:id="#+id/answerThree"
android:layout_width="match_parent"
android:layout_height="65dip"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/custom_button"
android:layout_below="#id/answerTwo"
android:text="Answer 3" />
<Button
android:id="#+id/answerFour"
android:layout_width="match_parent"
android:layout_height="65dip"
android:layout_marginTop="8dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/custom_button"
android:layout_below="#id/answerThree"
android:text="Answer 4" />
<ProgressBar
android:id="#+id/retrievingProgress"
style="?android:attr/progressBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:indeterminate="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

You can semplify your layout.
For your buttons just use the MaterialButton in the Material Components library.
Something like:
<com.google.android.material.button.MaterialButton
android:text="BUTTON"
app:cornerRadius="8dp"
app:strokeWidth="1dp"
app:strokeColor="#color/myColor"
android:backgroundTint="#color/myselector"
../>
For the TextView you can use a TextInputLayout.
Something like:
<com.google.android.material.textfield.TextInputLayout
app:hintEnabled="false"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:boxCornerRadiusBottomStart="8dp"
app:boxCornerRadiusBottomEnd="8dp"
app:boxCornerRadiusTopEnd="8dp"
app:boxCornerRadiusTopStart="8dp"
...>
<com.google.android.material.textfield.TextInputEditText
android:text="Text"
.../>
</com.google.android.material.textfield.TextInputLayout>

try
onlick{
lastbuttonName.performClick();
}

Well I figured out the answer, I am not happy with it but it did fix the problem. After I click one of the buttons I change the background to an incorrect drawable (similar to rounded corner just different background color) for a few seconds then set it back like so.
Drawable defaultDrawable = ContextCompat.getDrawable(this, R.drawable.custom_button);
answerOne.setBackground(defaultDrawable);
answerTwo.setBackground(defaultDrawable);
answerThree.setBackground(defaultDrawable);
answerFour.setBackground(defaultDrawable);
This must cause a reference issue because now whenever I click buttons 1, 2, or 3 then the state is changed for button 4 for as well. To fix this I just hacked it and added a unique drawable to each button like so.
Drawable defaultDrawable = ContextCompat.getDrawable(this, R.drawable.custom_button);
Drawable defaultDrawable1 = ContextCompat.getDrawable(this, R.drawable.custom_button);
Drawable defaultDrawable2 = ContextCompat.getDrawable(this, R.drawable.custom_button);
Drawable defaultDrawable3 = ContextCompat.getDrawable(this, R.drawable.custom_button);
answerOne.setBackground(defaultDrawable);
answerTwo.setBackground(defaultDrawable1);
answerThree.setBackground(defaultDrawable2);
answerFour.setBackground(defaultDrawable3);

How to create android button background svg with elevation?

I have been trying to achieve button like in attached image & for that I have created gradient SVG with shadow so that it looks like elevation but when this svg applied to button as background drawable it looks flat & ripple effect is also gone.
I want to achieve same button as below image :
And here is my code :
<Button
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:enabled="false"
android:elevation="10dp"
android:translationZ="10dp"
android:stateListAnimator="#null"
android:background="#drawable/bg_gradient"
android:text="#string/btn_txt_login"
android:textColor="#android:color/white"
android:textSize="18sp" />
I'm using SVG file for creating background gradient with rounded border. Any help would be appreciated.

I have a solution for you.
Add this into your build.gradle(Module:app) dependency:
implementation 'com.android.support:cardview-v7:27.1.1'
Now use CardView layout instead of Button:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:gravity="center_vertical|center_horizontal"
android:textSize="18sp"
android:text="LOGIN"
android:textColor="#android:color/white"
android:textStyle="bold"
android:background="#drawable/gradient"/>
</android.support.v7.widget.CardView>
Create gradient.xml file into drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#8b0ab7"
android:endColor="#0b85d0"
android:angle="0"/>
<corners android:radius="10dp"/>
</shape>

Add these attributes, if still it doesn't work use cardview
android:clipChildren="false"
android:clipToPadding="false"
and here is your code
<Button android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:enabled="false"
android:elevation="10dp"
android:translationZ="10dp"
android:stateListAnimator="#null"
android:clipChildren="false"
android:clipToPadding="false"
android:background="#drawable/bg_gradient"
android:text="#string/btn_txt_login"
android:textColor="#android:color/white"
android:textSize="18sp" />

Please try with using the following drawable content.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorDefaultButtonRipple">
<item>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
<corners android:radius="15dp" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="0" android:endColor="#5789bc" android:startColor="#8e6fa6" />
<corners android:radius="15dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</ripple>

Adding a colored shadow to a Button

I need to add a shadow to a Button with these attributes "from zeplin":
and this is the design
I tried this code
<Button
android:id="#+id/btn_sign_in"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginTop="35dp"
android:background="#drawable/auth_button_shape"
android:shadowColor="#41ff4800"
android:shadowDx="0"
android:shadowDy="8"
android:text="#string/sign_in"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="14sp" />
auth_button_shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff7c44" />
<corners android:radius="100dp" />
</shape>
But not worked and the other attributes "Blur" and "Spread" How I can set them for the button.
Thanks.

Thanks to Taras I have solution. You can use this library for creating colored shadow to button. Just place your view element inside shadow layout. Of course basic layout is ConstraintLayout.
Some pieces of code for example
<com.gigamole.library.ShadowLayout
android:id="#+id/shadowLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:sl_shadow_angle="90"
app:sl_shadow_color="#color/light_orange_color"
app:sl_shadow_distance="2dp"
app:sl_shadow_radius="7dp"
app:sl_shadowed="true">
<ImageView
android:id="#+id/ivYourImageName"
android:layout_width="144dp"
android:layout_height="44dp"
android:background="#drawable/button_shape"
android:foregroundGravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</com.gigamole.library.ShadowLayout>
Button shape :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp" />
<gradient android:angle="180" android:endColor="#ffc349" android:startColor="#ff8006" />
</shape>
</item>
</selector>
Result:

you need to add this line of code inside button tag
android:stateListAnimator="#null"
because button override any evelation value you set by passing null to android:stateListAnimator it will remove stateList attrs
for color you can add this line to show colored shadow
android:outlineSpotShadowColor="#303030"
check answer
Android elevation not showing shadow on Button

use AppCompatButton instead of Button,use elevation and use android:backgroundTint for button colour.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sign_in"
android:backgroundTint="#ccd3e0ea"
android:elevation="4dp"/>
output is,

bg_test.xml :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--the shadow comes from here-->
<item
android:bottom="-6dp"
android:drawable="#android:drawable/dialog_holo_light_frame"
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
</item>
<item
android:bottom="-6dp"
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<stroke
android:width="#dimen/_1sdp"
android:color="#color/yellow" />
</shape>
</item>
</layer-list>
Activity.xml code:
<Button
android:layout_width="#dimen/_150sdp"
android:layout_height="48dp"
android:layout_marginTop="10dp"
android:text="#string/sign_In"
android:layout_marginLeft="#dimen/_80sdp"
android:layout_gravity="center"
android:textSize="14sp"
android:background="#drawable/bg_test" />
Design Button :