I have a simple ImageView with transparent image with onclick function:
<ImageView
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/btnLL"
android:layout_alignParentEnd="true"
android:layout_marginBottom="12dp"
android:layout_marginEnd="12dp"
android:src="#drawable/options"
android:onClick="ClickSettings"/>
The problem is, when I click (touch) the image, a gray square background appears for a second and then it disappears. Seems like some click effect.
How can I remove this?
I tried to use ImageButton instead, also tried to use background from xml selector in drawable :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#android:color/transparent" />
<item android:state_pressed="true" android:drawable="#android:color/transparent" />
<item android:drawable="#android:color/transparent" />
but the gray background is still appearing when I click the image.
You can add another state to your button and remap it with a transparent background :
<item android:state_focused="true" android:drawable="#android:color/transparent" />
You can check all the states here : https://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
Best
Related
I am creating a simple button as follows :
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/edSearch"
android:id="#+id/btnSearch"
android:layout_marginTop="30dp"
android:drawableTop="#drawable/ic_action_search"
android:textSize="16sp"
android:text="Search"
android:background="#color/md_green_500"
android:textColor="#fff"
/>
Now, when i try add any image in background like :android:background="#drawable/img123" then button raise effect does not work. is there any way i can achieve raise effect with background image ?
You can create a selector drawable for this. You need to provide 3 different images for this so that the button can toggle those images as per the state.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/image_normal" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/image_pressed" />
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/image_focused" />
</selector>
Also inspite of that you can use ImageButton which will keep your image in center of button and the effects will be default as per operating system.
I am trying to customize a Button UI in Android.
I tried the following things:
btn.setBackgroundColor
btn.setBackgroundResource
btn.setBackgroundColor
But all of these are increasing the size of the Button, and because of that the Buttons near by can not be segregated (??).
Please suggest something.
If you want to apply a Hover effect then you have to do this in your XML where button layout is like
Button
android:id="#+id/xyz"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="15dp"
android:background="#drawable/general_btn_hover_effect"
android:onClick="somefunction"
android:text="#string/search_number"
android:textColor="#ffffff"
android:textSize="20sp"
/>
Notice android:background="#drawable/general_btn_hover_effect" there and then in #drawable folder make a general_btn_hover_effect.xml and write this into it
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/blank_normal_bg" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_hover_bg" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="#drawable/blank_normal_bg"/>
</selector>
Changing background color can not change size of button. Maybe you changed size in xml layout. Check again
I know that Picasso sets the "src" therefore leaving the "image.background" in peace, but I cannot seem to make the ImageView respond to a selector (as in when it's touched to show the standard holo selector or any custom one).
Does anybody have a working sample? I must be missing something. I've tried different selectors but I don't see the touched state.
I've tried doing a setselected(true) in onClick() but I know that this is something that the View handles automatically if there's a drawable with states like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:drawable="#android:color/transparent" />
<!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
<item android:state_focused="true" android:state_enabled="false" android:state_pressed="true" android:drawable="#drawable/abc_list_selector_disabled_holo_light" />
<item android:state_focused="true" android:state_enabled="false" android:drawable="#drawable/abc_list_selector_disabled_holo_light" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/abc_list_selector_background_transition_holo_light" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/abc_list_selector_background_transition_holo_light" />
<item android:state_focused="true" android:drawable="#drawable/abc_list_focused_holo" />
</selector>
The Java code to load the image is:
Picasso.with(mContext).load(url).error(R.drawable.error).fit().into(holder.someIV);
And the XML for that someIV looks like:
<ImageView
android:id="#+id/list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/mixset_list_image_size"
android:layout_marginTop="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:contentDescription="#string/mixes"
android:scaleType="centerCrop"
android:background="#drawable/mix_list_art_selector"
android:cropToPadding="false" />
The background is set to the above selector.
Any ideas? Thanks.
Here's what I did:
what I wanted to highlight was an ImageView that was part of the layout of a list_item (technically speaking, a row).
But I didn't want to highlight the whole row, just an image inside it.
I had to wrap the ImageView in a FrameLayout.
<FrameLayout
android:id="#+id/list_item_image_wrapper"
android:layout_width="match_parent"
android:layout_height="#dimen/mixset_list_image_size"
android:clickable="true"
android:foreground="#drawable/mix_list_art_selector">
<ImageView
android:id="#+id/list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/mixset_list_image_size"
android:layout_marginTop="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:contentDescription="#string/mixes"
android:scaleType="centerCrop"
android:clickable="false"
android:focusable="false"
android:cropToPadding="false" />
</FrameLayout>
… and also move the Click Listeners to the FrameLayout.
Thanks to #jason_t for the pointer to the solution.
Please note that for other widgets like TextView, the above is likely not needed.
I need to set a background color and an image over that background, how can i do it? Is necesary the image to have transparency? I need to control states too: pressed, focused.
Any help will be grateful
Create an ImageView (Use a transparent .PNG for your src image):
res/layout/yourlayout.xml
<ImageView
android:layout_width=:"wrap_content"
android:layout_height=:"wrap_content"
android:background="#drawable/colorstates"
android:src="#drawable/image" />
res/drawable/colorstates.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/regular"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/pressed"
android:state_pressed="true" />
<item
android:drawable="#drawable/pressed"
android:state_checked="true" />
<item
android:drawable="#drawable/regular" />
</selector>
yes the image needs a transparent background, otherwise it will cover the background color. Use the background attribute for the color and src for the image. Also check out the doc. For the pressed state, use google!
is it possible to create a skewed shape button?
(i.e like a stripe shape from bottom left of screen to top right of screen instead of the regular square or rectangle shape button)?
Something like this image http://www.codeproject.com/KB/silverlight/SilverLightFAQPart2/9.JPG
And I need to make sure the clickable area is also just the colored one.
Thanks,
Tee
You'd need to write your own class for that. Just subclass View and listen for the onClick events.
Try using a selector as background.
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
android:background="#drawable/my_button"
/>
And then make a my_button.xml in your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="#drawable/focused" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/focusedpressed" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/pressed" />
<item android:drawable="#drawable/defaultbutton" />
</selector>
Source: http://www.anddev.org/tinytutcustom_button_backgrounds-better_imagebutton-t4298.html