Develop Reference

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!

How to implement the round border and ?selectableItemBackground in textview android?

I am trying to have two text views inside a Linear Layout with a horizontal orientation. Now I want to have the following things for each text view:
An icon at left - implemented using android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
A round border around the text view - implemented using android:background="#drawable/round_border"
Also, need that ripple effect on touching a touch item
The 3rd point is implemented in other text views using the att.
android:background="?selectableItemBackground"
android:clickable="true"
But there is already a background att. for the round border. Now my question is how to achieve that ripple effect? Is using following att. only way:
android:foreground="?selectableItemBackground"
Android shows this att. is not supported in lower api versions so worried.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/vision_mission"
android:gravity="center"
android:layout_margin="8dp"
android:padding="8dp"
android:textSize="16sp"
android:onClick="openVisionMission"
android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/team"
android:textSize="16sp"
android:drawableLeft="#drawable/ic_people_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"
android:padding="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:gravity="center"/>
</LinearLayout>

You can achieve ripple effect and text view rounded background at the same time using the following code.
Custom ripple drawable, it require API level 21+
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/grey">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
</ripple>
After that set background of your text view
android:background="#drawable/custom_ripple"
For pre lollypop ie. below API level 21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorDarkGray"/>
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreen"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreenFocused"/>
</shape>
</item>
</selector>

It is not exactly what you are looking for.
You can achieve easily something similar with a MaterialButton with a OutlinedButton style.
Something like:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
android:text="...."
.../>
You can customize the padding between the icon and the text, the textColor, the strokeWidth, the strokeColor and also the color selector used for the app:rippleColor
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
app:strokeColor="#color/primaryDarkColor"
app:strokeWidth="2dp"
app:iconPadding="16dp"
.../>

you can change your background drawable with selector tag
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>

Android round button with icon

I am trying to make a button like this
Button Image but I cannot put the icon in front of the text. The button I made now looks like this button image now. So, the main problem is how could I get the icon to be near in front of the text?
This is my button shape code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"
/>
<solid
android:color="#00A651"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="300dp"
android:height="20dp"
/>
</shape>
This is the code I use to implement button into activity:
<Button
android:id="#+id/problem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/buttonshape"
android:drawableStart="#drawable/ic_rate_review_black_24dp"
android:textColor="#FFFFFF"
android:textSize="15sp"
android:text="#string/button_problem" />

Everything worked as Muhib Pirani suggested. Thanks to him.
Button's code now looks like this:
<Button
android:id="#+id/problem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/buttonshape"
android:drawableStart="#drawable/ic_rate_review_black_24dp"
android:drawablePadding="5dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:text="#string/button_problem"
android:textColor="#FFFFFF"
android:textSize="15sp" />
The ButtonShape.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="50dp"/>
<solid
android:color="#00A651"
/> </shape>

remove size and padding from your buttonXml reduce your radius
and add paddingTop and paddinBottom to your
or you can also use TextView as button have some padding already assigned with it.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="10dp"
/>
<solid
android:color="#00A651"
/>
</shape>

You can use the MaterialButton:
<MaterialButton
style="#style/Widget.MaterialComponents.Button.IconOnly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
with:
<style name="Widget.MaterialComponents.Button.IconOnly">
<item name="iconPadding">0dp</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:minWidth">12dp</item>
<item name="android:minHeight">12dp</item>
<item name="iconGravity">textStart</item>
</style>

button with rounded corner + icon +text
style="#style/Base.Widget.AppCompat.Button.Borderless"
this work for me no need of much customisation

Change styling values of a button programmatically android

I created the following design for a button
by using
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:right="245dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#000" />
</shape>
</item>
<item android:left="0dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#80000000" />
</shape>
</item>
</layer-list>`
What I want to achieve is:
The + sign is supposed to change in a 'tick' signed once the fragment that will be opened is completed(an address). How can I make the opacity of the black rectangle lower ? I still haven't figured out how to make the + sign, so any ideas are welcomed.
And the main question is: How can I set those styling values by using code in android ? I want to change the size of the first item(245dp) to 5% of the width of the button.
layout of my button:
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginTopPercent="7%"
app:layout_marginBottomPercent="6%"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
app:layout_widthPercent="50%"
android:layout_below="#id/button7"
android:background="#drawable/btnstyle"
android:text="Create"
android:textColor="#fff" />
and btnstyle is defined above.

Assuming the background is background.xml placed in drawables folder.
You can use this-
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/background"
android:orientation="horizontal">
<ToggleButton
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:drawablePadding="80dp"
android:drawableRight="#drawable/button_image"
android:textColor="#android:color/white"
android:textOff="Button1"
android:textOn="Button1"/>
</LinearLayout>
For the drawable button_image.xml, here is the code-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:state_focused="true" android:drawable="#drawable/plus_img"/>
<item android:state_checked="false" android:state_focused="false" android:drawable="#drawable/plus_img"/>
<item android:state_checked="true" android:state_focused="true" android:drawable="#drawable/tick_img"/>
<item android:state_checked="true" android:state_focused="false" android:drawable="#drawable/tick_img"/>
</selector>
On the clickListener of your toggleButton, you can open up the fragment and setChecked of your togglebutton to !toggleButton.isChecked(). Basically like this- toggleButton.setChecked(!toggleButton.isChecked());
Regarding opacity
In your xml that you have written, the color of first item in rectangle is in the format #RGB. It can also be #ARGB where 'A' is for alpha. So if you set A = 0, the view will be transparent and with A = f, the view will be opaque.

Is there any attribute for the button to make it look stylish?

I am using the following. I want to add stylish properties like color and style.
Please help
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="OK" />

paste the following code into new xml file in drawable folder and name the file draw and
and in button give background of this xml file name
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#1F2120" />
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:textColor="#android:color/white"
android:topLeftRadius="6dp"
android:topRightRadius="6dp" />
</shape>
this is how you can use this
<Button
android:id="#+id/force"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="15dp"
android:layout_weight="1"
android:background="#drawable/draw"
android:text="some txt"
android:textColor="#android:color/white"
android:textSize="20dp" />

<!-- Custom Style for bottom displaying confirm and cancel -->
<style name="Widget.GsMenuButton" parent="#style/Widget.Button">
<item name="android:layout_height">36px</item>
<item name="android:layout_width">82px</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
<item name="background">#drawable/gs_menu_btn</item>
<item name="android:textColor">#fff</item>
</style>
This is what i have done to make my button. It change the button background color with background attribute and change the text color with android:textColor. I think you can just add these to your button attribute.

you can add images to this button by using :
android:background="#drawable/image_name"
if you want to simply add some color to this button's background, you can do it like this:
android:background="#ff0000" // color code for red color
besides, you can specify text color like this :
android:textColor="#0000ff" // color code for blue color
if you want to change your button's background on different events like while the button is foccused, pressed etc. you need to create an xml file say mybutton_style.xml indrawable folder.
// code for mybutton_style.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/btn_image_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/btn_image_focussed" /> <!--focused -->
<item android:drawable="#drawable/btn_image_default" /> <!-- default -->
</selector>
after that you just need to specify it as your button's background:
android:background="#drawable/mybutton_style"

copy following bg.xml file in to your 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">
<corners android:radius="10dp" />
<gradient
android:endColor="#fffffa"
android:startColor="#ffffff"
android:angle="270" />
<solid android:color="#00aa00" />
<padding android:bottom="10.0dip" android:left="10.0dip" android:right="10.0dip" android:top="10.0dip" />
</shape></item>
<item android:state_pressed="false"><shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#ffffff" />
<gradient
android:endColor="#fffffa"
android:startColor="#ffffff"
android:angle="270" />
<padding android:bottom="10.0dip" android:left="10.0dip" android:right="10.0dip" android:top="10.0dip" />
</shape></item>
</selector>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:background="#drawable/bg"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="OK" />

if you want to make your button stylish but in simple way then you can try the following:
android:background="#null"
android:typeface="serif"
if you don't want simple stuff then you can customize it as you want.