ButtonView with different background - android

I have designed a rounded corners button.
button_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="10dp"/>
</shape>
In layout:
<Button
android:background="#drawable/button_selector"
.../>
on every click the color of the should button changes :
In activity, inside onClickListener():
btn1.setBackgroundColor(getAnswerColor(choiceArray[0]));
but if I do this, I am not getting the rounder corners.
How to get rounder corners? Please suggest.

You can make your button from this toolsite ==> Android Button Maker
You can make any kind of button with this tool with Code.
Here i edit this Answer as your requirement.
so,make two different button for with different background color and use selector for changing background onClick.For that use this code.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/click_button" android:state_pressed="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/not_click_button" android:state_pressed="false" />
</selector>

try this way
i checked with below xml
<?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="13dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />
</shape>
</item>
</selector>
on button click add this code
StateListDrawable drawable = (StateListDrawable) v.getBackground();
drawable.setColorFilter(Color.RED,PorterDuff.Mode.SRC_ATOP);
button1.setBackground(drawable);

btn1.setBackgroundResource(R.drawable.button_selector);
GradientDrawable drawableGradient = (GradientDrawable) btn1.getBackground();
drawableGradient .setColor(Color.RED);

Related

Change FloatingActiongButton background and image color when clicked

I want to make this layout
in Android, when the buttons are clicked I want to change the background color.
Currently in the XML I have app:backgroundTint="#color/white",
but when I click the button I want the background color to change to blue and the check symbol color to change to white.
You can use a selector instead of a single colour, maybe based on the checked state and then set the checked state when the button is clicked.
Your selector might look something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="hex_color"
android:state_checked=["true" | "false"] />
<item android:color="hex_color" />
</selector>
You need three xml for using custom check box.
button_background.xml : for changing background according to check state of button
tick_button_checked.xml : checked state button drawable
tick_button_unchecked.xml : unchecked state button drawable
tick_button_unchecked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#ffffff" />
<size
android:width="48dp"
android:height="48dp" />
</shape>
</item>
<item android:drawable="#drawable/ic_check_grey" />
</layer-list>
tick_button_checked.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#3f43b4" />
<size
android:width="48dp"
android:height="48dp" />
</shape>
</item>
<item android:drawable="#drawable/ic_check_white" />
</layer-list>
button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tick_button_checked" android:state_checked="true" />
<item android:drawable="#drawable/tick_button_unchecked" android:state_checked="false" />
</selector>
CheckBox button in activity_main.xml
<CheckBox
android:id="#+id/checkbox"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#drawable/button_background"
android:button="#android:color/transparent"
android:checked="false" />

ToggleButton with custom background and icon

I created a drawable for my ToggleButtons, but I also need to show an icon.
How can I do this if there's just a background attribute?
Here's the ToggleButton drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="8dp" />
<stroke android:color="#CED2D4" android:width="1dp" />
<solid android:color="#EDEEEF"/>
</shape>
And the code to place the ToggleButton (currently using IconFont, but I have to change as the items are dynamic):
<ToggleButton
android:id="#+id/toggleCreditCard"
android:layout_width="#dimen/width_filter_facilities_button"
android:layout_height="#dimen/height_filter_facilities_button"
android:background="#drawable/filter_service_toggle_default"
android:textOff="#string/fa_credit_card"
android:textOn="#string/fa_credit_card" />
This may help you. You can create a layer-list and add two item. First item is your custom drawable, the second is your icon.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/list_bg_top"></item>
<item android:left="10dp">
<bitmap android:src="#drawable/waiting_status_btn"
android:gravity="center_vertical|left" />
</item>
Check it out: customize toggle button on Android

How to show effect on like button like facebook shows

I have a layout in which I have like button which is a simple textview and I have applied onclick event on this. Now I want to show the same effect which facebook shows when like button in facebook android app get clicked on the news feeds.
How can I do this in my android application. Please help me if you have any idea here.
Use selector if you want to give a highlight effect only when the button in touched.
Save this as an xml drawable and assign this drawable to the button :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_white_09_rectangle_unpressed" android:state_focused="true"
android:state_pressed="false" />
<item android:drawable="#drawable/btn_white_09_rectangle_pressed" android:state_focused="true"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_white_09_rectangle_pressed" android:state_focused="false"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_white_09_rectangle_unpressed" />
</selector>
Create 2 other drawable xml files which is being used by the above xml.
btn_white_09_rectangle_unpressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item >
<shape
android:shape="rectangle"
>
<corners
android:radius="9dp"/>
<gradient
android:angle="45"
android:endColor="#27FFFFFF"
android:startColor="#18FFFFFF"
/>
</shape>
</item>
</layer-list>
btn_white_09_rectangle_pressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item >
<shape
android:shape="rectangle"
>
<corners
android:radius="11dp"/>
<gradient
android:angle="90"
android:endColor="#09FFFFFF"
android:startColor="#02FFFFFF"
/>
</shape>
</item>
</layer-list>
If you want to change the background of the button(and not revert) when user clicks on it then you have to do it through code.
Use the following code in your onClick()
your_button.setBackgroundResource(R.id.desired_drawable);

Color State List not recognized in Shape Drawable

I define following drawable my_background_drawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/color_stateful" />
</shape>
</item>
<item android:drawable="#drawable/selector_png_drawable" />
</layer-list>
And I also define following color state list resource color_stateful.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:color="#FF00ff00"/>
<item android:color="#FFff0000"/>
</selector>
When I set given my_background_drawable as a background for some view then I cannot observe any change in color defined in color_stateful.xml for my shape, while the view state is actually changed (selector_png_drawable.xml is an indicator).
However everything is just fine when I modify my my_background_drawable.xml in the following way:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- This doesn't work
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/color_stateful" />
</shape>
</item>
-->
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#FF00ff00" />
</shape>
</item>
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:color="#FFff0000" />
</shape>
</item>
</selector>
</item>
<item android:drawable="#drawable/selector_png_drawable"" />
</layer-list>
So is it true that color state information is just lost when ColorStateList resource is used within a ShapeDrawable or am I doing it wrong?
A ColorStateList cannot be passed as an attribute for <solid> in an XML definition, or really any attribute of a <shape>. This attribute is inflated out of the XML as a Color resource and then passed to the Drawable's setColor() method, which only takes a single ARGB value.
There is only one type of Drawable instance that is designed to contain and present multiple items based on state, and that is StateListDrawable, which is what you get when you inflate a <selector>. All other Drawable instances are meant to simply be members of this collection or drawn standalone.
Note also that an inflated <shape> item is actually a GradientDrawable and not a ShapeDrawable. If you check out the inflate() method of GradientDrawable in the source, you can get all the detail you could ask for on how each attribute is used.
HTH!
In fact you can assign a ColorStateList as a solid color inside of the xml of a a shape -> GradientDrawable, but that is only a new feature in Lollipop.
Older versions of GradientDrawable only accept color resources.
Currently working on a compat alternative if you are interested.
You are doing it wring .... just Replace this
android:color="#color/color_stateful"
with
android:background="#color/color_stateful"
update:
in your program code in the my_background_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:gravity="center"
android:shape="rectangle">
<solid android:background="#color/color_stateful" /> <!--this is the chanage i made... here-->
</shape>
</item>
<item android:drawable="#drawable/selector_png_drawable" />
</layer-list>

Selector color on LinearLayout

I'm trying to assing a color selector to an extended class of LinearLayout, so, i think its like if we speak about linearLayout.
i followed the instructions on this post, the answer talking about shapes.
Now i have 3 xml on drawables folders:
normal.xml file
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffffff" />
</shape>
pressed.xml file
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#00000000" />
</shape>
and finally, bg.xml file
<?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/pressed" />
<item android:state_focused="true" android:drawable="#drawable/pressed" />
<item android:state_selected="true" android:drawable="#drawable/pressed" />
<item android:drawable="#drawable/normal" />
</selector>
I am accessing this in the following way:
Drawable d = getResources().getDrawable(context.getResources().getIdentifier("mypackageuri.tProject:drawable/bg", null, null));
view.setBackgroundDrawable(d);
The "normal" state its fine, with the color set at "normal.xml", but no way with the other ones, I press my view and nothing happens, it's not changing color in any way...
I can't see what i'm doing wrong...
Thank you
Your view needs to be clickable in order to get the state pressed when you click on it.
Use :
view.setClickable(true);
or in the layout xml :
android:clickable="true"

Categories

Resources