Android - change background of component while KEEPING selector? - android

Is this possible? I have for example simple linearLayout with selector to create "click effect":
<LinearLayout
android:id="#+id/clickToChangeColor"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#color/click_effect" />
This is selector click_effect:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#drawable/unpressed" android:state_enabled="false"/>
</selector>
Everything works just fine, but when I press on this layout, I would like to launch activity (like color picker - but it doesn't matter) and then change color of linearlayout for example to blue. BUT: keep selector "click effect". Trying to do this almost for 2 hours, but nothing works...
PS: I know it can be done for example with another layout inside this layout, apply some padding and apply selector to outer layout and then I can change background of inner layout etc - but it's only ugly workaround

<ImageView
android:id="#+id/imageViewSelectedColor"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#color/click_effect"
android:src="#color/picked color" />
Use an image view instead now you can change src according to picked color.

Related

Why does a Button loses its original behaviour after changing its color?

I am writing an Android app and now I am styling it. I am using a custom theme which is a child of Theme.Holo.Light. I really like Theme.Holo.Light because its buttons have a special effect when you click and hold it. Like the lower button in the picture below:
Not click:
click:
The upper button has been changed color. Now when I click on that button, it doesn't have that effect. I really don't understand why. Can anyone tell me why this happens and how can I get the same effect with a colored button?
And also, the colored button seems fatter.
This is because the button uses a selector to display different colors/effects/drawables based on the state of the click. You can check out the link on Color State List Resource.
To create your own you have to create a slecetor cml file and put it in your drawables folder.
For example.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_btn_default_normal_gray" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#drawable/shape_btn_default_pressed_gray" android:state_pressed="true"/>
<item android:drawable="#drawable/shape_btn_default_disabled_gray"/>
</selector>
or with colors
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/dark_green" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#color/light_green" android:state_pressed="true"/>
<item android:drawable="#color/gray"/>
</selector>
To apply this you have to set the background drawable in your layout xml like this.
<Button
android:id="#+id/my_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Some text"
android:background="#drawable/selector_btn_default_gray"/>
That is the "ripple effect" of material design.You have define you own style for that effect.Link below may help you or you may search for many other answers on StackOverflow. Material effect on button with background color
It does not loses its behavior you can see after click (in your second image) the button show same scale as the above have...so by default the background is set as to show that it is button (like with padding or so) and can changes to show oncklick effect...
So when you set your desire background to button...It takes complete change on what is on presently on it and then you have to manually set onclick effect..

Change RadioButton highlight colour when pressed/tapped

I have some RadioButtons inside a RadioGroup and I am using custon icons to replace the typical radio "dot".
I have my normal state (checked=false) and checked state (checked=true) sorted.
However, when tapping/pressing the RadioButton, there is a grey-ish highlight colour in the background, that is round in shape (to match the original radio dot).
How can I customise this highlight colour? I tried using "android:state_pressed" but that didn't seem to do anything? (Well, I tried adding a shape, as mentioned here: https://stackoverflow.com/a/14602078/601869)
Ideally, I'd like the shape to match that of the icon (well, most probably be a bit bigger) and change the colour.
Selector XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/rounded" />
<item android:state_checked="true" android:drawable="#drawable/rounded_checked" />
</selector>
RadioButton XML:
<RadioButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/radioButton01"
android:button="#drawable/rounded_radio_select" />
try changing
android:button="#drawable/rounded_radio_select" />
to
android:background="#drawable/rounded_radio_select"
android:button="#android:color/transparent"/>
Maybe this is the same issue Adding custom radio buttons in android

Check box material design

I'm using a check-box in my project, but I'm not able to eliminate the left padding, so the alignment isn't right.
Anyone know how to eliminate that left padding?
After some research I found out that, this specific margin is in the drawable of the check-square. So I suppose that the only solution is to create a custom drawable
This is because the drawable used by Android Checkbox has its own margin.
So to avoid it you''ll have to create your own checkbox with a custom drawable and icons for checked and unchecked states.
1> Create a custom selector for your checkbox like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/ic_unchecked" />
<item android:state_checked="true" android:drawable="#drawable/ic_checked" />
<item android:drawable="#drawable/ic_unchecked" /> <!-- default -->
</selector>
2>Then in your xml add a normal check box ,set drawable and button properties as null and assign your selector as the left drawable of your checkbox.Also give a drawable padding to give some padding between checkbox icon and text.
<CheckBox
android:id="#+id/chk_terms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:button="#null"
android:drawableLeft="#drawable/custom_checkbox"
android:drawablePadding="#dimen/margin_left_right"
android:text="#string/i_agree"
android:textSize="#dimen/text_size_small"
/>
NOTE ->
This soln also solve the padding problems of checkbox on and above android 4.2. which is also referred HERE

android image button background, source and selector

I've got some imagebuttons (about 15) with different backgrounds and sources. I want to change the pressed state of all of them on the same way: adding a color overlay.
Is there a way without onTouchListern (all examples I tried didn't work correctly...) and without a separat active-image and selector.xml for each button, like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_one_active" android:state_pressed="true"/>
<item android:drawable="#drawable/button_one"/>
</selector>
ImageButton (current state):
<ImageButton
android:id="#+id/button_one"
android:layout_width="53dp"
android:layout_height="53dp"
android:background="#drawable/button_one_background"
android:contentDescription="#string/button_one_description"
android:onClick="onButtonClick"
android:scaleType="fitCenter"
android:layout_alignTop="#+id/button_two"
android:layout_toRightOf="#+id/button_two" />
Source is set in Java with setImageResource or setImageBitmap
In java code, for the onClicklisteners of the buttons add,
button.setBackgroundResource(R.drawable.button_pressed_image);

What makes a button change color on mouseclick?

Why is this button changing color to orange when clicked:
<Button android:background="#android:drawable/btn_plus" ...>
but this one is not?
<Button android:background="#drawable/ic_btn_round_plus" ...>
Edit:
Found another type of button (text and image) that changes color to orange when clicked
without having to create a selector:
<Button android:text="List" android:drawableTop="#drawable/list" ...>
because the first one is from android framework and has a selector associated to it, and the other one is a custom from your code, and you obviously didn't put a selector on it.
This is nicely explained here.
In short you need to put a selector drawable in the background of your button, instead of just one drawable :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/ic_btn_round_plusorange" />
<item android:state_pressed="true" android:drawable="#drawable/ic_btn_round_plusorange" />
<item android:drawable="#drawable/ic_btn_round_plus" />
</selector>
and you create you copy of your drawable but with an orange color added to it for instance.
Android system will switch the drawable when the button is clicked or selected.

Categories

Resources