Develop Reference

Weird behaviour of elevation and translucent color

Here's my view:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_rounded"
android:backgroundTint="#color/view_primary_color"
android:elevation="4dp"
android:foregroundTint="#android:color/white">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tvTitle"
style="#style/Header4.Semibold16.White"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:text="Add to cart"
android:textAllCaps="false"
app:tint="#android:color/white"
tools:ignore="ContentDescription" />
<ProgressBar
android:id="#+id/pbLoading"
style="?android:attr/progressBarStyleSmall"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
And here's #color/view_primary_color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimary" android:state_enabled="true" />
<item android:color="#color/colorPrimaryDisabled" android:state_enabled="false" />
</selector>
When view's state is enabled it's color is colorPrimary.
When state is disabled view's color is colorPrimaryDisabled which is almost the same as colorPrimary but only with 20% of alpha.
Here's how my view looks like is idle (enabled) state.
But when I click on the view it became like this.
View supposed to just change it's color to slightly translucent, but for some reason there's some shadow inside it.
If I use non-translucent color everything is ok. Or if I remove elevation from the view everything is ok as well.
Feels like this is some kind of bug. Do you have any idea what is this?
Thanks!

using MaterialButton instead of textView like this
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_add_to_card"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginTop="24dp"
android:layout_marginBottom="16dp"
android:elevation="0dp"
android:enabled="false"
android:fontFamily="#font/sans_normal"
android:gravity="center"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:minWidth="0dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:stateListAnimator="#null"
android:text="#string/addToCard"
android:textColor="#color/white"
android:textSize="16sp"
android:translationZ="0dp"
app:backgroundTint="#color/btn_primary_state"
app:cornerRadius="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollview_edittext" />
background tint:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:color="#color/green_button" />
<item
android:state_enabled="false"
android:color="#color/gray_button"
/>
</selector>

How to apply custom button to the activity in Android Studio?

My MainActivity has 4 buttons, serving as navigation. UI is as below
And, I also created button.xml under the drawable folder.
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#457B9D"/>
<corners android:radius="20dp"/>
<stroke android:color="#fff" android:width="2dp"/>
</shape>
In the activity_main.xml, I wanted to apply the custom button to the view using android:background="#drawable/button"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#A8DADC"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button1"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_current_job"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_job_offer"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button3"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/adjust_comparison_settings"
android:textAllCaps="false"
android:textSize="20sp" />
<Button
android:id="#+id/button4"
android:layout_width="350dp"
android:layout_height="80dp"
android:background="#drawable/button"
android:text="#string/compare_job_offers"
android:textAllCaps="false"
android:textSize="20sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Also, I changed themes.xml a little bit to NoActionBar
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.JobCompare6300" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
But I am still having the default button. Did I miss anything or did I do something wrong?

As you use MaterialComponents theme, your Button is a MaterialButton which manages its own background drawable and therefore it is not recommanded to use android:background.
To achieve the style you want, you can use these custom attributes: app:backgroundTint, app:cornerRadius, app:strokeWidth and app:strokeColor
<Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
app:backgroundTint="#457B9D"
app:cornerRadius="20dp"
app:strokeColor="#fff"
android:text="qzeazeazeza"
android:textAllCaps="false"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Or if you need a specific drawable, you can always use android.widget.Button or use AppCompat as theme instead of MaterialComponents
<android.widget.Button
android:id="#+id/button2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginBottom="50dp"
android:background="#drawable/button"
android:text="#string/enter_job_offer"
android:textAllCaps="false"
android:textSize="20sp" />

You don't need to use a custom background.
Just use the attributes provided by the MaterialButton:
<Button
app:backgroundTint="#457B9D"
app:cornerRadius="20dp"
app:strokeColor="#FFFFFF"
app:strokeWidth="2dp"
../>
Since you are using a Material Components theme your Button is replace at runtime with a MaterialButton.

How can I remove shadow of Button on Dialog? Why is the shadow shown?

I created a dialog and there is a button.
I want different style of button. So I made this file and applied to the background attribute of the button.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/my_pink_color">
<item
android:id="#android:id/background"
android:drawable="#drawable/btn_line_border_dialogue"></item>
</ripple>
I don't know why it has shadow around the button. It has two buttons. And the second button doesn't have any thing. When I remove the second button, the shadow seems gone.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<Button
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
When I just apply btn_line_border_dialogue.xml without the ripple. It is the same.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/my_yellow" />
<stroke
android:width="1dp"
android:color="#color/my_pink" />
</shape>
How can I remove this effect?

Use style="?android:attr/borderlessButtonStyle" inside your Button
refer : https://developer.android.com/guide/topics/ui/controls/button.html#Borderless
Or If you don't need Button particularly, use TextView instead

try to set elevation t0 0 dp or you can use TextView or Layout instead of button.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
This can be also fixed by setting android:stateListAnimator="#null" globally in Resources\values\styles.xml:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/NoShadowButton</item>
</style>
<style name="NoShadowButton" parent="android:style/Widget.Button">
<item name="android:stateListAnimator">#null</item>
</style>
</resources>

set the stateListAnimator on the button as = "#null" in the xml. It will remove the shadow from the button.

Relativelayout turns grey when setting drawable to Edittext background

I created a drawable for EditText and set it as background(#drawable/edttxt_bg2) to the EditText. When I set the drawable to the view the parent RelativeLayout turns grey in the design preview. I tried cleaning and rebuilding the project and also invalidating caches. After doing that it displays correctly. Whenever I make changes to the views it changes the RelativeLayout color changes back to grey.
upload_lyt.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edt_txt_bg"
android:layout_marginTop="#dimen/rgstr_mrgn_top"
android:layout_marginLeft="#dimen/rgstr_mrgn_sides"
android:layout_marginRight="#dimen/rgstr_mrgn_sides">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:id="#+id/upload_lbl"
android:textColor="#ffffff"
android:background="#1565C0"
android:text="ENTER THE PAGE DETAILS"
android:gravity="center"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="#dimen/rgstr_edtxt_hght"
android:layout_below="#+id/upload_lbl"
android:background="#drawable/edttxt_bg2"
android:id="#+id/fb_uri"
android:gravity="center"
android:inputType="textPersonName"
android:layout_marginTop="#dimen/upld_edttxt_mrgn_top"/>
<EditText
android:layout_width="match_parent"
android:layout_height="#dimen/rgstr_edtxt_hght"
android:layout_below="#+id/fb_uri"
android:background="#drawable/edttxt_bg2"
android:id="#+id/price"
android:gravity="center"
android:inputType="numberDecimal"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/price"
android:id="#+id/qstnlbl"
android:gravity="center"
android:textSize="20sp"
android:layout_marginTop="#dimen/rgstr_edttxt_mrgn_top"
android:text="Where is the page mostly targetted? Care to specify location?"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/qstnlbl"
android:textSize="20sp"
android:id="#+id/neg_lbl"
android:text="Negotiable?"
android:gravity="center"
android:layout_marginTop="#dimen/rgstr_edttxt_mrgn_top"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/neg_lyt"
android:layout_marginTop="#dimen/neg_mrgn_top"
android:layout_below="#+id/neg_lbl">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:id="#+id/no"
android:text="No"
android:layout_centerVertical="true"
android:layout_marginStart="#dimen/neg_mrgn_sds"
/>
<com.suke.widget.SwitchButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:id="#+id/switch1"
app:sb_uncheckcircle_width="0dp"
app:sb_uncheckcircle_color="#android:color/transparent"
app:sb_checkline_width="0dp"
app:sb_button_color="#1565C0"
app:sb_checkline_color="#android:color/transparent"
app:sb_uncheck_color="#1565C0"
app:sb_checked_color="#1565C0"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/yes"
android:text="Yes"
android:textColor="#1565C0"
android:textSize="20sp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/neg_mrgn_sds">
</TextView>
</RelativeLayout>
<Button
android:layout_below="#+id/neg_lyt"
android:layout_marginTop="#dimen/rgstr_btn_top"
android:background="#drawable/otp_btn"
android:textColor="#ffffff"
android:text="UPLOAD"
android:id="#+id/upload"
android:layout_marginBottom="30dp"
android:layout_marginRight="#dimen/rgstr_btn_mrgn_sides"
android:layout_marginLeft="#dimen/rgstr_btn_mrgn_sides"
android:layout_width="match_parent"
android:layout_height="#dimen/rgstr_btn_hght"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</RelativeLayout>
#drawable/edttxt_bg2:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#FAFAFA">
</solid>
<stroke
android:color="#1565C0"
android:width="0.5dp">
</stroke>
</shape>
#drawable/edt_txt_bg
<?xml version="1.0" encoding="utf-8"?>
<layer-list>
<item
xmlns:android="http://schemas.android.com/apk/res/android"
android:top="-2dp"
android:bottom="2dp"
android:left ="-2dp"
android:right="-2dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ffffff"></solid>
<stroke
android:color="#1565C0"
android:width="0.5dp">
</stroke>
</shape>
</item>
</layer-list>
Layout Picture:

remove these lines from #drawable/edt_txt_bg.It will work. You have not defined any fixed dimension for stroke. That's the main reason.
<stroke
android:color="#1565C0"
android:width="0.5dp">
</stroke>

Don't force to change the Theme in layout xml, implement new style in styles.xml if you want to use custom actionbar.
<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="contentInsetStart">0dp</item>
<!--<item name="contentInsetEnd">0dp</item>-->
<item name="android:windowContentOverlay">#null</item>
<item name="android:homeAsUpIndicator">#null</item>
</style>
Then in AndroidManifest.xml, set this theme to your activity or application tag.
android:theme="#style/CustomTheme"
Hope it helps.

how to add color to the circle in the switch in android?

I want to create a switch which looks like this
i have done that in this way
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp"
/>
<Switch
android:id="#+id/theSwitchId"
android:textOn=""
android:textOff=""
android:layout_width="wrap_content"
android:layout_height="20dp"
android:thumbTextPadding="5dp"
android:switchMinWidth="90dp"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:layout_gravity="center|center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UnAvailable"
android:layout_marginStart="40dp"
android:textColor="#224e6d"
android:textSize="20sp"
/>
</LinearLayout>
i am not able to change the height of the switch and it doesnt look how its in this image. Please help me with this

all you need to do is just use a custom drawable as track of switch
this is the code for custom drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners
android:radius="#dimen/_40sdp" />
<solid
android:color="#android:color/darker_gray" />
<padding
android:bottom="#dimen/_5dp"
android:left="#dimen/_5dp"
android:right="#dimen/_5dp"
android:top="#dimen/_5dp" />
</shape>
</item>
Further make these modification to your existing layout
add android:thumbTint="#android:color/holo_blue_dark" or any color that meets your requirement
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp" />
<Switch
android:id="#+id/theSwitchId"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center|center_vertical"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:switchMinWidth="90dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp"
android:thumbTint="#android:color/holo_blue_dark"
android:track="#drawable/track_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:text="UnAvailable"
android:textColor="#224e6d"
android:textSize="20sp" />
hope this helps
click here to view the resulting screenshot
screenshot

In style.xml
<style name="switchCompatStyle">
<item name="colorControlActivated">#color/colorPrimary</item>
</style>
And code for switch is like
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_10sdp"
app:theme="#style/switchCompatStyle" />

You create Thumb in drawable xml:
thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/ic_thumbselecter"/>
<item android:drawable="#drawable/ic_thumbselecter"/>
</selector>
And put into switch (in my case I was using that):
<Switch
app:kswThumbDrawable="#drawable/thumb"/>

Change the thumb (circle on the switch) color by using:
android:thumbTint="#color/thumbColor"
On your colors.xml:
<color name="thumbColor">#FFFFFF</color>