Develop Reference

MaterialDesign Switch styling not working and squeezing

I have added a switch in my android app and it's using Material Design. I followed their guidelines and also a bunch of example but every single time, it's kind of shrinking. I force a 60dp width and 32dp height and I can clearly see that the 60dp is not respected but the height is.
And it's also looking as below:
But I am trying to get something like this: This is checked = false status, for the checked = true, I just change the background to green.
I do not understand why the thumb is also as big as the track when I set as well both height.
Below is my layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/switchLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="90dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/settingsSwitch"
app:layout_constraintBottom_toBottomOf="#id/settingsSwitch"
android:orientation="vertical">
<TextView
android:id="#+id/switchSettingsName"
android:textAppearance="#style/SubHead2_bld14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/cell_padding"
android:text="#{item.name}"
tools:text="Notification Category Preference" />
<TextView
android:id="#+id/switchSettingsDescription"
android:textAppearance="#style/Body_12"
android:textColor="#color/gray200"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginStart="#dimen/cell_padding"
android:text="#{item.description}"
tools:text="Notification Category Preference" />
</androidx.appcompat.widget.LinearLayoutCompat>
<com.google.android.material.materialswitch.MaterialSwitch
android:id="#+id/settingsSwitch"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:layout_marginEnd="#dimen/cell_padding"
android:layout_marginBottom="14dp"
android:checked="#{item.enabled}"
style="#style/SwitchStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the SwitchStyle is defined as below:
<style name="SwitchStyle" parent="Widget.Material3.CompoundButton.MaterialSwitch">
<item name="android:thumb">#drawable/switch_thumb</item>
<item name="thumbTint">#color/white</item>
<item name="track">#drawable/custom_track</item>
<item name="trackTint">#color/switch_selector</item>
<item name="android:background">#null</item>
</style>
switch_thumb.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="28dp"
android:height="28dp"
android:viewportWidth="28"
android:viewportHeight="28">
<path
android:fillColor="#FFFFFF"
android:pathData="M14,14m-14,0a14,14 0,1 1,28 0a14,14 0,1 1,-28 0" />
</vector>
custom_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle">
<size android:height="32dp" android:width="60dp" />
<solid android:color="#color/green300" />
<corners android:radius="14dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<size android:height="32dp" android:width="60dp" />
<corners android:radius="14dp" />
</shape>
</item>
</selector>
and also the switch_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/green300" android:state_checked="true" />
<item android:color="#color/lightness200" android:state_checked="false" />
</selector>
Any idea how to prevent this ratio change and also not having the thumb bigger ?

Apple Music "My library"/"Apple Music" slider toggle button in Android Studio

I'm trying to achieve a Apple Music like slider button:
I have the style for the button that is checked and for the one that is unchecked:
<style name="Theme.My.Buttons.Outlined" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:textColor">#android:color/darker_gray</item>
<item name="android:textSize">11dp</item>
<item name="android:textAppearance">#style/Widget.AppCompat.Button.Small</item>
</style>
<style name="Theme.My.Buttons.Active" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">#color/white</item>
<item name="android:backgroundTint">#android:color/darker_gray</item>
<item name="android:textSize">11dp</item>
<item name="android:textAppearance">#style/Widget.AppCompat.Button.Small</item>
</style>
This is my xml file with the buttons, currently I used the styles manually:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".fragments.SearchFragment">
<com.google.android.material.button.MaterialButtonToggleGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/button"
style="#style/Theme.My.Buttons.Outlined"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
style="#style/Theme.My.Buttons.Active"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_weight="1"
android:text="Button"
/>
</com.google.android.material.button.MaterialButtonToggleGroup>
</LinearLayout>
How can I set the checked style when the button is checked and unchecked style when it is unchecked? Also, is it possible for me to do a slide like animation?
I tried using a drawable file setting the style to when it is checked and when it is unchecked, but in the field style I can't put a drawable resource file

I found out how to do it!
You have to create a xml file with the color for when the button is checked or not. I used here 4 files for the background, because I wanted to have the outside corners rounded but the inside not, so I had to create 2 backgrounds for each side, one for when it is checked and one to when it isn't checked.
If I used the same background file there would be a problem with the single side rounded corner as on the left side the outside corner is the left and on the right side it is the right
These are thef files:
These to define the backgrounds from when it is checked and when it isn't:
Selected right:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="#dimen/slider_button_corner_size"
android:topRightRadius="#dimen/slider_button_corner_size"
/>
<solid android:color="#color/android_darker_gray" />
</shape>
regular right:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="#dimen/slider_button_corner_size"
android:topRightRadius="#dimen/slider_button_corner_size"
/>
<solid android:color="#color/white" />
<stroke
android:width="0.5dp"
android:color="#color/slider_button_outline_color_unchecked" />
</shape>
regular left:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="#dimen/slider_button_corner_size"
android:topLeftRadius="#dimen/slider_button_corner_size"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp"
/>
<solid android:color="#color/white" />
<stroke
android:width="0.5dp"
android:color="#color/slider_button_outline_color_unchecked" />
</shape>
selected left:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="#dimen/slider_button_corner_size"
android:topLeftRadius="#dimen/slider_button_corner_size"
android:bottomRightRadius="0dp"
android:topRightRadius="0dp"
/>
<solid android:color="#color/android_darker_gray" />
</shape>
These to define what background will be used when it is checked and when it isnt:
Definer Right:
definer left:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_background_selected_left" android:state_checked="true" />
<item android:drawable="#drawable/radio_background_regular_left" />
</selector>
Then on the layout where you want to use it put:
<RadioGroup
android:id="#+id/radioGroupSliderSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:checkedButton="#id/radioButtonMyMaterialsSearch"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/radioButtonMyMaterialsSearch"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_weight="1"
android:background="#drawable/radio_button_background_definer_left"
android:button="#android:color/transparent"
android:checked="true"
android:clickable="true"
android:gravity="center"
android:text="Meus Materiais"
android:textColor="#color/radio_button_text_definer"
android:textSize="10sp" />
<RadioButton
android:id="#+id/radioButtonEdugatherSearch"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_weight="1"
android:background="#drawable/radio_button_background_definer_right"
android:button="#android:color/transparent"
android:checked="false"
android:clickable="true"
android:gravity="center"
android:text="EduGather"
android:textColor="#color/radio_button_text_definer"
android:textSize="10sp" />
</RadioGroup>
And that's it!

Rounding top and bottom corners of a listview

This is my issue I can't seem to round the edges on the bottom of my listview.
I've tried a couple of methods where you create a shape for the backgroup resource, tried it programmatic ally and in the layout xml's but it does not do anything at all.
Like I either did it wrong which I doubt since I am familiar with shapes, or something else interferes with my attempts.
Either way I need help is what I'm getting at.
Here's some of the xml's that make up what you're looking at.
This makes up the actual dialog. (settings_dialog.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="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:background="#drawable/bg_listview_corners"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
</RelativeLayout>
This is located in my styles.xml with a bunch of other stuff that has no relation to this.
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
And this makes up a list_item. (settings_list_item.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="80dp"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="#style/SettingsOptionNameStyle"
android:id="#+id/tvOptionName_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
style="#style/SettingsOptionDescStyle"
android:id="#+id/tvOptionDesc_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
And here is the shape I used to try and round the edges.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
I've also tried this piece for the shape.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners
android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" />
</shape>
This is all the information I think you'll need to help me on my way.
In case I missed some information or you just have questions don't hesitate to ask.
Update 1:
I figured out it somehow only shapes the container of the listview but not the listview itself.
Any ideas?

you can increase the padding (paddingRight, paddingLeft, and paddingBottom)
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">7dp</item>
<item name="android:paddingRight">7dp</item>
<item name="android:paddingBottom">3dp</item>
or use mask background over the listview (like this Post which use 9-Patch as mask, or you can use your "bg_listview_corners.xml" background for the mask)

You can create a custom background drawable selector file called custom_list.xml in your drawable folder with this code in it
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/list_focused" android:state_focused="true"/>
<item android:drawable="#drawable/list_default"/>
</selector>
then create another file list_default.xml in your drawable folder with this code in it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#1c95a0"
android:startColor="#1c95a0" />
<corners android:radius="5dip" />
</shape>
finally set the background property of the list view to
android:background="#drawable/custom_list"

Ended up using a mask as suggested by #Sally here is how I changed it.
<?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="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
<ImageView
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:background="#drawable/bg_listview_corners"/>
</RelativeLayout>
I added an ImageView on top of the relative layout matching the container.
This is the drawable I used for masking the layout.(bg_listview_corners.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="12dp"
android:color="#color/app_night_sky_color" />
<padding android:left="6px"
android:top="6px"
android:right="6px"
android:bottom="6px"/>
<corners android:radius="30dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="6dp"
android:color="#color/popup_bg_color" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>

Shadow in center on click image view

i am trying to show rounded shadow in center when status is pressed.
but it is giving full view (rectunglar) shadow in current case.
here is what i am trying...
1. left_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape >
<solid android:color="#ffffff"></solid>
</shape>
</item>
<item android:state_focused="true"><shape>
<solid android:color="#40454a"></solid>
</shape></item>
<item><shape>
<solid android:color="#40454a"></solid>
</shape></item>
</selector>
here is the xml layout where i am applying ...
<RelativeLayout
android:id="#+id/relative_activity_camera_bottom"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:background="#layout/footer_color" >
<LinearLayout
android:id="#+id/bottom_layout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#android:color/transparent"
android:gravity="center_vertical"
android:weightSum="1.0" >
<ImageView
android:id="#+id/captureImage"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#layout/left_button"
android:src="#layout/camera_image"
/>
<ImageView
android:id="#+id/recordButton"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:src="#layout/videocamera_image"
android:background="#layout/left_button"
android:onClick="startRecording"
/>
</LinearLayout>
</RelativeLayout>
original condition-
current case- (but i want to show white only in center)

For example, use a selector :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true" android:state_window_focused="false"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_selected="true"/>
<item android:drawable="#drawable/gradient_round_press_effect" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="#drawable/gradient_round_press_effect_inverse" android:state_selected="false"/>
</selector>
With two drawable shapes, the first when clicked (gradient_round_press_effect):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:endColor="#color/clr_the_color_behind"
android:gradientRadius="130"
android:startColor="#66000000"
android:type="radial" />
</shape>
Adapt the size of the radius with the size of the button
For start color use #66FFFFFF if you want white (66 is for the transparency)
For end color maybe you can use transparent ? i didn't try this
and when not clicked define your own colors (gradient_round_press_effect_inverse) not really "inverse" but this is an example of another gradient. You can just use a color instead
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:centerColor="#color/clr_gradient2"
android:endColor="#color/clr_gradient1"
android:startColor="#color/clr_gradient3"
android:type="linear" />
</shape>

Android Relative Layout Selector

How do I change the color of a Relative Layout Shape ? To work it like a button.
I tried to do it using a selector.
This is the code i used.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlGPS"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/relative_selector"
>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvs1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_below="#+id/tvl1"
android:layout_toLeftOf="#+id/iv1"
android:text="you can here protect ... "
android:textColor="#color/gray" />
<TextView
android:id="#+id/tvl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/iv1"
android:text="GPS"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
relative_selector.xml In here I'm doing the changes using selector.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/relative_focus"/>
<item android:state_pressed="true" android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
<item android:drawable="#drawable/relative_background"/>
</selector>
relative_background.xml This is the shape.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke android:width="1dp" android:color="#636161" />
<padding android:left="5dp"
android:top="2dp"
android:right="2dp"
android:bottom="5dp" />
<corners android:radius="6dp" />
<solid android:color="#88ffffff"
/>
</shape>
In "relative_clicked.xml" and "relative_focus.xml" I only changed the colors.
relative_focus.xml
<stroke android:width="1dp" android:color="#ffff00" />
relative_clicked.xml
<solid android:color="#88ffff00"/>
All .xml files are in drawable folder.
I want to work this like a button.Is someone having any idea?

From your selector xml:
<item android:state_pressed="true"
android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
Will it work if you remove state_enabled?
<item android:state_pressed="true"
android:drawable="#drawable/relative_clicked" />