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 :
Related
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
I want to change background color to my CardView in Android Studio, I want to use selector, but I dont know what I do
This in my code:
<androidx.cardview.widget.CardView
android:id="#+id/card_ordina"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
app:cardBackgroundColor="#color/orange"
app:cardCornerRadius="20dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="40dp"
android:background="#drawable/options"
android:backgroundTint="#F44336"
android:padding="10dp"
android:src="#drawable/carrello"
android:tint="#color/background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="5dp"
android:fontFamily="#font/title"
android:text="ORDINA"
android:textColor="#color/background"
android:textSize="18sp" />
</androidx.cardview.widget.CardView>
You need to make a selector and set the following attributes to your CardView.
android:foreground="#drawable/card_foreground"
android:clickable="true"
android:focusable="true"
Here is the code for card_foreground.xml, add it in your project's drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#e0F5AD6E"/>
<corners android:radius="2dp" />
</shape>
</item>
<item android:state_focused="true" android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#0f000000"/>
<corners android:radius="2dp" />
</shape>
</item>
</selector>
You can change the state colors and radius according to your requirements. Now, when you click on the CardView the color will get changed.
I tried to set a drawable as a background for a button, but just the corners are rounded now.
Here is the code for the drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp"/>
<solid android:color="#color/light_notlight_themebased_accentColor" />
<padding
android:bottom="7dp"
android:top="7dp"
android:left="7dp"
android:right="7dp" />
<stroke
android:color="#color/ContrastAndText"
android:width="10dp" />
</shape>
And here is the code for the Button:
<Button
android:id="#+id/loginButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/login_loginbutton_default"
android:text="#string/login_loginButton"
android:textAllCaps="true"
android:textColor="#color/NavbarAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent" />
The stroke and the color is not shown (it stays the backgroundcolor), only the corners are rounded...
Here is what it looks like:
In the AndroidStudio Preview (Canary 4.1):
Final result on the device:
Whats my fault? Thanks in advance!
If you are using a MaterialComponents Theme there is no difference between <Button /> and <com.google.android.material.button.MaterialButton />. Check this answer for more details.
If you want to use the android:background attribute in your Button you have to use the version 1.2.0-alpha06 or higher.
<MaterialButton
app:backgroundTint="#null"
android:background="#drawable/button_gradient"
... />
Otherwise you have to use the AppCompatButton component.
Checking your shape you don't need to set a background.
Just use
<com.google.android.material.button.MaterialButton
app:cornerRadius="#dimen/..."
app:strokeColor="#color/.."
app:strokeWidth="#dimen/.."
..>
TextView is added to the screen
<TextView
android:id="#+id/eventDetail_SpecialInfos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/source_sans_pro"
android:text="Special Info"
android:drawableBottom="#drawable/information_underline"
android:textColor="#color/colorBlack"
android:textSize="14dp" />
information_underline drawable is :
<stroke
android:width="20dp"
android:color="#color/colorBlack" />
Check the #Suraj answer.
An alternative could be to use a TextInputLayout in the Material Component Library with a OutlinedBox style.
Something like:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
..>
<com.google.android.material.textfield.TextInputEditText
../>
</com.google.android.material.textfield.TextInputLayout>
Drawable you have created is not the right way to do that and use the below code to draw anything in bottom of textview
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size
android:height="1dp"
android:width="100dp" />
<solid android:color="#android:color/black" />
</shape>
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>