I have many buttons for my view. Each button has different image resource. I want to change the click and hover effect for each button like this:
Button 1
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn1_selector"
android:text="name"
/>
btn1_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn1"></item>
</selector>
Button 2
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn2_selector"
android:text="name"
/>
btn2_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/hover_btn" android:state_pressed="true"></item>
<item android:drawable="#drawable/hover_btn" android:state_focused="true">/item>
<item android:drawable="#drawable/btn2"></item>
</selector>
// etc...
The problem is that I have to create many selectors for all buttons. But I just need to change the hover state for all of them with 1 image hover_btn.png. Is there any way to have a hover state by default without creating all selectors for all buttons?
Related
I want to create a control panel at the bottom of my screen that looks something like this.
Here is the image
And I want to simulate button press by having the clicked on item be blacked, and everything that isn't clicked be greyed out. As shown in the image, the picture icon had been clicked on.
At the moment, my solution is to overlay two rows of identical ImageViews. One layer consist of all black icons, and one layer consist of all grey icons. When I click on an image, I run a code that looks like this:
private void galleryClicked() {
mGalleryImageView_unclicked.setVisibility(View.INVISIBLE);
mPersonalImageView_unclicked.setVisibility(View.VISIBLE);
mExploreImageView_unclicked.setVisibility(View.VISIBLE);
mMenuImageView_unclicked.setVisibility(View.VISIBLE);
mGalleryImageView_clicked.setVisibility(View.VISIBLE);
mPersonalImageView_clicked.setVisibility(View.INVISIBLE);
mExploreImageView_clicked.setVisibility(View.INVISIBLE);
mMenuImageView_clicked.setVisibility(View.INVISIBLE);
}
I'm just wondering if there's a more efficient or better way of doing this. When I run this on my phone, and can feel some lag in the response. Thank you!
I have better solution, that is using selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/clicked" android:state_enabled="true" />
<item android:drawable="#drawable/unclicked" android:state_enabled="false" />
</selector>
so now you just set mGalleryImageView.setEnabled(true); or mGalleryImageView.setEnabled(false)
You can use Radiobuttons with RadioGroup, and each RadioButton has its own selector Drawable. Then the RadioGroup will take care of the selection for you (check one will uncheck all others).
Example code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioGroup
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RadioButton
android:id="#+id/item_one"
style="#style/TabItem"
android:checked="true"
android:drawableTop="#drawable/selector_tab_item_one" />
<RadioButton
android:id="#+id/item_two"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_two" />
<RadioButton
android:id="#+id/item_three"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_three" />
<RadioButton
android:id="#+id/item_four"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_four"/>
</RadioGroup>
</RelativeLayout>
Declare #style/TabItem in res/values/styles.xml:
<style name="TabItem" parent="android:style/Widget.Holo.Light.TextView">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:paddingTop">15dp</item>
<item name="android:drawablePadding">1dp</item>
<item name="android:button">#null</item>
<item name="android:background">#null</item>
<item name="android:gravity">bottom|center_horizontal</item>
</style>
The selector Drawable is like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/item_one_highlighted" android:state_checked="true"/>
<item android:drawable="#drawable/item_one_highlighted" android:state_pressed="true"/>
<item android:drawable="#drawable/item_one_default" />
</selector>
Results:
I my app i have many buttons,what i want is that when user selects particular button,its background should change so that user knows which button is selected.So for this i have used selectors.But when ever i run my app the event on button click works fine but the button image doesnt change
Selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/people_1" android:state_selected="true"></item>
<item android:drawable="#drawable/people_1" android:state_active="true"></item>
<item android:drawable="#drawable/places_1" android:state_focused="true"></item>
<item android:drawable="#drawable/hotel_icon"></item>
</selector>
Xml where i used the selector
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/hotel"
android:layout_weight="1"
android:id="#+id/home" />
I solved it,the only thing missing was
<item android:drawable="#drawable/selected" android:state_pressed="true" />
I have a Button XML file in /drawable/ which changes states of the button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/img_pressed"
android:state_pressed="true"/>
<item android:drawable="#drawable/img_normal"
android:state_focused="true" />
<item android:drawable="#drawable/img_normal"/>
</selector>
And this Ok if I will change background only on click event.
But now, I have a button with left drawable, and on click I have to change left drawable, text color and button background.
Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My button"
android:textColor="#android:color/white"
android:drawableLeft="#drawable/btn_leftDrawable"
android:background="#android:color/transparent"
/>
Can I do this inside this XML and how? I don't want to make spaghetti code by doing these extra tasks inside Java code in setOnClickListener method.
Create three different xml selector and add them to the corresponding attributes..
Sample:
TextColor:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/click"/>
<item android:color="#color/normal"/>
Background:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/buttonBackgroundClick"/>
<item android:color="#android:color/transparent"/>
Add them to your button:
Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My button"
android:textColor="#drawable/textColor"
android:drawableLeft="#drawable/btn_leftDrawable"
android:background="#drawable/background"
/>
I want to create a Button with text and an image, where both the text and image change when the Button is in the pressed state. All of the other questions about Buttons and images addressed changing the background in the pressed state, but none commented on changing the image drawable in the foreground.
You need a state selector for both the text color of the button and the image used as the drawable.
Here's how you do it:
layout/my_layout.xml:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/bottom_action_delete"
android:drawableLeft="#drawable/test_button_drawable"
android:textColor="#color/link_text_red"
android:text="Test Button"
android:onClick="buttonDelete" />
drawable/test_button_drawable.xml: (bottom_action_delete_image and bottom_action_delete_image_pressed are PNGs in drawable-hdpi/)
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true" >
<item
android:state_window_focused="false"
android:drawable="#drawable/bottom_action_delete_image" />
<item
android:state_pressed="true"
android:drawable="#drawable/bottom_action_delete_image_pressed" />
<item
android:state_focused="true"
android:drawable="#drawable/bottom_action_delete_image_pressed" />
<item
android:drawable="#drawable/bottom_action_delete_image" />
</selector>
color/link_text_red.xml: (link_text_focused_red_v2, link_text_pressed_red_v2, and link_text_red_v2 are defined in values/colors.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="#color/link_text_red_v2"
android:state_window_focused="false" />
<item
android:color="#color/link_text_focused_red_v2"
android:state_focused="true"/>
<item
android:color="#color/link_text_pressed_red_v2"
android:state_pressed="true"/>
<item
android:color="#color/link_text_red_v2" />
</selector>
If you need something even more complex, you can use the attribute
android:duplicateParentState="true" in child layout elements of the Button, and its pressed state will be passed down the hierarchy.
I'd like to create a button group of a "real" buttons?
I'd like to display to user buttons which contains his attending option: Yes, No and Meybe.
I'd like to use buttons for this display.
How it can be done?
Just create a selector xml file in drawable folder
checkbox_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="#drawable/checkbox_active" />
<item android:state_checked="false" android:drawable="#drawable/checkbox_inactive" />
</selector>
And apply this background to your radio buttons
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/checkbox_background" />