Inbox SwitchCompat button - android

Today I saw the Inbox App.
(source: cbsistatic.com)
I'd like to know how can I make THAT switch button on the toolbar (left of searchButton).
I didn't find references to (Or I don't search a lot).
thanks ^^

This is an old question. But I'd like to answer to this question because I found a way of achieving the same thing without using any third party library.
1 - Add SwitchCompat to your layout
<android.support.v7.widget.SwitchCompat
style="#style/SwitchCompatStyle"
android:id="#+id/toolbar_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"/>
2 - Create an XML shape. switch_thumb_on.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<!--shadow color-->
<solid android:color="#color/colorGray2" />
</shape>
</item>
<!--padding to have shodow effect-->
<item
android:bottom="1dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<!--switch thumb color-->
<shape android:shape="oval">
<solid android:color="#color/colorWhite" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<!--switch image-->
<!--NOTE: switch_color_selector is not a color but a selector-->
<bitmap
android:src="#drawable/ic_network_on"
android:tint="#color/switch_color_selector" />
</item>
</layer-list>
ic_network_on is icon that is shown on switch thumb. You can add states/selector here if you like. switch_color_selector tints the icon according to the state switch is in.
3 - Here's the color selector switch_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorAccent" android:state_checked="true" />
<item android:color="#color/colorGray1" />
</selector>
4 - Create a style to be applied on the Switch added in first step.
<style name="SwitchCompatStyle" parent="Widget.AppCompat.CompoundButton.Switch" >
<item name="android:thumb">#drawable/switch_thumb_on</item>
<item name="trackTint">#color/switch_color_selector</item>
</style>
And thats the result I got.
Cheers.

Here you go. https://android-arsenal.com/details/1/1985
You can find similar material in the same site. Its easy to reuse something that is already available. Cheers!! Happy coding!

Related

Recreate switches similar to Android 12 settings

Android 12's settings' switches now look like this,
which its code is here:
https://android.googlesource.com/platform/packages/apps/Settings/+/c4cc279a2a32e6b5dfac9af4a16a4d98def82a22/res/xml/configure_notification_settings.xml#133
but neither androidx.preference.SwitchPreferenceCompat nor androidx.preference.SwitchPreference look like this in my app with updated material library (1.5.0, Material 3),
How can I have the same looking (and feeling, animation, etc) switches at least in Android 12 or how Android is doing it for itself? Thanks!
You can easily customize your switches to look like these.
In styles.xml add this :
<style name="App.Switches" parent="Widget.Material3.CompoundButton.Switch">
<item name="track">#drawable/switch_track</item>
<item name="android:thumb">#drawable/switch_thumb</item>
</style>
switch_track.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="#000000" />
<corners android:radius="56dp" />
<size
android:width="64dp"
android:height="28dp" />
</shape>
</item>
</layer-list>
switch_thumb.xml :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="oval">
<solid android:color="#000000" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
In the end add this line in your app's main theme to apply this style to all the switches in your app :
<item name="switchStyle">#style/App.Switches</item>
As Material 1.7.0 the suggestion is to use MaterialSwitch which more or less is like this by default,

Android: Solid color on button not working

API 22. I want to set a border radius for my button, so I did this: How to make the corners of a button round?
(I tried out the answer that is ticked as correct). How to change the color of a button?
None of the methods here work either.
I used to set the background color of my button with android:backgroundTint. That was the only method working. Unfortunately, when I link the file to my button via android:background="#drawable/roundbutton", the color that I selected via android:backgroundTint wont work. As well as the solid color I defined int the drawable/roundbutton. Strangely the border Radius works:
My Code in activity_main.xml:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/signinotherbutton"
android:background="#drawable/roundbutton"
android:backgroundTint="#color/grey"
android:textColor="#color/white"
android:textAllCaps="false"/>
My Code for the drawable/roundbutton.xml:
<?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="3dip" />
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<solid android:color="#color/grey"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<solid android:color="#color/grey"/>
</shape>
</item>
</selector>
Result: Button with the Radius I defined, but with the default color (ca. purple)
No, #color/grey is definitely grey, not purple.
Thanks for all answers
This is my code for the rounded button with the green color you can modify it as per your convenience.
Hope this will work.
button_rounded.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#57c885"/>
<corners
android:radius="25dp"/>
</shape>
I was able to solve my problem by creating a new style in the themes.xml and setting it as the theme of my button. Heres my code in the themes.xml:
<style name="Theme.ButtonWhite" parent="Base.Widget.AppCompat.Button.Colored">
<item name="colorPrimary">#color/white</item>
</style>
Code for the button in activity_main.xml:
android:theme="#style/Theme.ButtonWhite"
Im really asking myself why nobody else seems to have this problem as I had the exact same problem when creating a completely new project

Android drawable: state_selected working, superseding state_pressed?

Newbie in Android.
I have the following defined in res/drawable/ for a button in a menu that's defined in style.xml
<style name="menu_icon">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">#dimen/menu_item_height</item>
<item name="android:background">#drawable/menu_item_bg_sel</item>
</style>
Now, menu_item_bg_sel in drawable has two different color gradients for 2 states that I am interested in- pressed and selected.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item>
<shape>
<gradient android:angle="180"
android:endColor="#color/background_menu_gray_selected2"
android:centerColor="#color/background_menu_gray_selected1"
android:startColor="#color/background_menu_gray_selected" />
</shape>
</item>
</layer-list>
</item>
<item android:state_selected="true">
<layer-list>
<item>
<shape>
<gradient android:angle="180" android:endColor="#color/background_menu_home2"
android:centerColor="#color/background_menu_home1"
android:startColor="#color/background_menu_home" />
</shape>
</item>
</layer-list>
</item>
<item android:drawable="#color/transparent"/>
However, when I press the button (that transient state) the button still creates the gradient taking colors from the selected_state only.
What am I doing wrong? Any ideas?
state_selected is commonly used when navigating using d-pads or maybe a pen like what Samsung Notes so I suggest not to use state_selected since when you press automatically it will be selected or gain focus although selected and focus are kind or different. I suggest to use state_pressed, state_focused and state_hovered instead.
For more info click here
You can use this code. You can copy paste this code into one drawable file. You can assign different drawable files or define shapes in this file itself for the different states.I have assigned a drawable file for the focused state as an example.
simple_button_states.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:drawable="#drawable/rounded_edittext_focused"
/>
<!--pressed -->
<item
android:state_pressed="true" />
<!--selected -->
<item
android:state_selected="true" />
<!-- focused -->
<item
android:drawable="#drawable/rounded_edittext_unfocused"/>
</selector>
round_edittext_focused.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<solid android:color="#FFFFFF" />
<stroke
android:width="2dp"
android:color="#color/CornflowerBlue" />
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
/>
</shape>
Finally assign the background of the actual button as the drawable file that you have declared above.
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/simple_button_states"
/>
Hope this helps

How to make button style with xml definition shown correct on real android device instead of emulator?

Following code run correct on emulator. But wrong on real device.
I have 3 xml files for corresponding button status: button_default.xml\button_pressed.xml\button_selected.xml. Here is one of them. Others are same with it except for colors.
<?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="#FF484747" />
<corners
android:topLeftRadius="5px"
android:topRightRadius="5px"
android:bottomLeftRadius="5px"
android:bottomRightRadius="5px" />
</shape>
</item>
<item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">
<shape>
<gradient
android:startColor="#FF484747" android:endColor="#FF000000"
android:type="linear" android:angle="270"
android:centerX="0.5" android:centerY="0.5" />
<corners
android:topLeftRadius="5px"
android:topRightRadius="5px"
android:bottomLeftRadius="5px"
android:bottomRightRadius="5px" />
</shape>
</item>
</layer-list>
Then I wrote button.xml as following:
<?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" />
<item android:state_focused="true"
android:drawable="#drawable/button_selected" />
<item android:drawable="#drawable/button_default" />
</selector>
Last is the styles.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="button" parent="android:Widget.Button">
<item name="android:background">#drawable/button</item>
</style>
</resources>
This is the view on emulator(it's same on emulator 2.3 and 4.0):
(I can't upload image now. you can find it here:http://i.stack.imgur.com/uVtd9.jpg)
But it will be a yellow background button when I install the *.apk to my android pad(with android 2.3).
Anyone can provide me any direction to solve it? Thanks in advance!!!
Maybe your button is getting Highlighted? Does your emulator have the same specs as your phone? (Touchscreen specially)
Try adding another one into your Activity (If you only have one) and play with it.
Your selector has the state "android:state_focused" which defines the color of the button when the button has a focus on it. Try to use "android:state_selected" and see if it helps.
Btw, I would recommend to replace all the "5px" in your xml files to "5dp" to make it suitable for different screen densities.

Is there a way to set drawable's Alpha using XML?

Easy like itself . I wanna make an alpha button , which would have a selected drawable this way:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:state_selected="false" android:drawable="#drawable/item" />
<item android:state_selected="true" android:drawable="#drawable/item" />
</selector>
I would wanna make something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:alpha="125" android:state_selected="false" android:drawable="#drawable/item" />
<item android:alpha="255" android:state_selected="true" android:drawable="#drawable/item" />
</selector>
Thanks for all .
It's been a while since the OP, but personally found a solution that worked a lot better for me than the suggested answers. Creating a BitmapDrawable makes is easily possible to set the alpha:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_drawble"
android:alpha="77">
</bitmap>
Alpha can be any value between 0 and 255. Note that it is sort of the inverse of the HEX color value alpha, as for example 70% alpha would be B3 in HEX and 77 in the BitmapDrawable.
I achieved the same using a drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#5000ddff" />
</shape>
Over here used the alpha 50, which sets the opacity level.
I have been looking for the same thing. Even though this is posted over four years ago, this is the top post when googling the issue, so I'll reply here.
This is my solution
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<bitmap android:alpha="#integer/not_pressed_alpha" android:src="#drawable/item"/>
</item>
<item android:state_pressed="true" android:drawable="#drawable/item" />
</selector>
For those who have the same problem as OP, AppCompat now allows you to set 'alpha' parameter, as he wished in his target code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:alpha="125" android:state_selected="false" android:drawable="#drawable/item" />
<item android:alpha="255" android:state_selected="true" android:drawable="#drawable/item" />
</selector>
More info here.
My goal was to make a button have it's selected and pressed states at a different alpha - but using the same (png) resource and affecting as few files as possible.
My solution is similar to altering the alpha in a BitmapDrawable - but it does it from the selector so only one file is affected.
Use the tint function of Bitmap, remember that the tint will color the existing pixels so use a white color.
Eg, #80FFFFFF - to keep color as original but reduce alpha by 50%
This could also be used to change color of the icon when pressed.
This is my drawable XML file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<bitmap
android:src="#drawable/ic_camera"
android:tint="#80FFFFFF">
</bitmap>
</item>
<item android:state_pressed="true">
<bitmap
android:src="#drawable/ic_camera"
android:tint="#80FFFFFF">
</bitmap>
</item>
<item>
<bitmap
android:src="#drawable/ic_camera">
</bitmap>
</item>
</selector>
I'm using the following for a custom radio button which should be diagonally strikethrough when it is disabled.
Example Image of 5 radio buttons where 4 of them are enabled
<item android:state_enabled="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<size
android:height="35dp"
android:width="35dp"/>
<stroke
android:color="#color/someGrey"
android:width="1dp"/>
<corners android:radius="1dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees="135"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="135">
<shape android:shape="line">
<stroke
android:color="#color/someGrey"
android:width="1dp"/>
</shape>
</rotate>
</item>
</layer-list>
</item>
I agree with Kasium sugest, so for some Android versions the especification to Alpha is in percent.
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_drawble"
android:alpha="0.5">
</bitmap>
i think you could create your own drawable which could take this argument as a parameter. i've never done such a thing though.
check out this link :
How to set alpha value for drawable in a StateListDrawable?
if that's not possible, you can always do it in code...
here are 2 links i've found about it, in case you wish to use bitmaps instead:
https://plus.google.com/+RomanNurik/posts/FZQcNW8G75K
https://gist.github.com/romannurik/5779875
Its not that simple but its possible:
First you have to define color in color folder of your resources like this:
color/inst_control_pressed_transp.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.5" android:color="?attr/inst_control_pressed" />
</selector>
Now you can reference that color from some shape:
drawable/background_clear_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/inst_control_pressed_transp" />
</shape>
Tha you can use it in drawable:
drawable/background_bordered_clear_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/background_clear_pressed" android:state_pressed="true" android:state_selected="false" />
<item android:drawable="#drawable/background_clear_active" android:state_activated="true" />
<item android:drawable="#drawable/background_clear_selected" android:state_selected="true" />
<item android:drawable="#drawable/background_bordered_clear_round" />
</selector>

Categories

Resources