I am trying to create clickable textbox that highlights like a listview item when pressed. I have my own background image that i want to use so i cannot use
android:background="?android:attr/selectableItemBackground"
Is there a way i can achieve the blue "glow" affect when i click on the textbox while using my own background image for the textbox? Currently, my textview looks like:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title"
style="#style/ListSeparatorTextViewStyle"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:focusable="true"/>
UPDATE:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:background="?android:attr/selectableItemBackground"
android:state_pressed="true" />
<item android:drawable="#drawable/list_section_divider_holo_custom"></item>
</selector>
you can create a drawable for background of textview same below
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" ><!-- this drawable display when you press textView -->
<shape android:shape="rectangle" >
<gradient android:startColor="#fa7905"
android:endColor="#fcc96b"
android:angle="90"
></gradient>
</shape>
</item>
<item android:drawable="your drawable">
<!-- this drawable show when you dont press textview -->
</item>
</selector>
Related
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" />
i am trying to change the color of text inside a button.
So for example i have a button which is filled with white and the text is blue. When i click on the button i want these two colors to swap (text inside the button becomes white and the button blue).
I have tried something like this:
<item style="#style/ButtonText_Menue_Clicked" android:drawable="#drawable/button_menue_default" android:state_focused="true"></item>
<item style="#style/ButtonText_Menue" android:drawable="#drawable/button_menue_default" ></item>
but it actually does nothing.
Is there any way to do what i want, or do i have to do some stuff in the onclik event (but then there is the problem how to set the colors back when the "click is gone" )
Create a selector resource in res/color for the text color and a button selector in res/drawable as below...
text_color.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#800000" />
<item
android:state_pressed="false"
android:color="#4C5" />
</selector>
button_color.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">
<solid android:color="#4C5"/>
</shape>
</item>
<item
android:state_pressed="false">
<shape android:shape="rectangle" >
<solid android:color="#800000"/>
</shape>
</item>
</selector>
Add the button to the layout
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:textColor="#color/text_color"
android:background="#drawable/button_color"/>
I have a list where I have defined my own list view items with a custom layout. This layout has a background with a custom drawable.
My custom layout for the ListView item:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/item"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true" >
...
</RelativeLayout>
My custom drawable item.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- background: shadow -->
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/itemShadowColor" />
</shape>
</item>
<!-- foreground: surface -->
<item android:bottom="2dp">
<shape
android:dither="true"
android:shape="rectangle" >
<corners android:radius="2dp" />
<solid android:color="#color/itemBackgroundColor" />
</shape>
</item>
</layer-list>
Now this item is not clickable anymore.
Can you explain me why, and what I have to do to have the same behavior (selector with the blue background) like a button click?
Define a selector with its pressed and default states in res/drawable folder(one of the state will be your #drawable/item). Set it as the bg of your list row layout.
See similar question and answer :Selector on background color of TextView
Edit:
Best way to understand and apply something like google did is, to look into SDK and do similar things to that. For instance look at the btn_default_holo_dark drawable. It is a selector with states and yes it is a xml.
This is a selector taken from sdk (sdk\platforms\android-18\data\res\drawable\btn_default_holo_dark.xml)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/btn_default_normal_holo_dark" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/btn_default_disabled_holo_dark" />
<item android:state_pressed="true"
android:drawable="#drawable/btn_default_pressed_holo_dark" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/btn_default_focused_holo_dark" />
<item android:state_enabled="true"
android:drawable="#drawable/btn_default_normal_holo_dark" />
<item android:state_focused="true"
android:drawable="#drawable/btn_default_disabled_focused_holo_dark" />
<item
android:drawable="#drawable/btn_default_disabled_holo_dark" />
</selector>
These are the images taken from sdk (sdk\platforms\android-18\data\res\drawable-xhdpi):
When you apply this drawable/selector (#drawable/btn_default_holo_dark) to any view, you are going to have its states. I hope this sample makes my answer more clear.
I have a ListView item which has a set background. This overrides the default blue highlight that appears when the item is pressed/selected. Is there a way to have both the background and the selector?
This is my attempt at merging both a background and selector...
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/red"/>
</selector>
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape
android:dither="true"
android:shape="rectangle" >
<corners android:radius="6dp" />
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
This is in my drawable folder, and I set it with this in my ListItem xml:
android:background="#drawable/my_background
To have a custom background and the default selector effect (another drawalbe when pressed / selected) is a little difficult, after a few tries, I made it.
You should define two selectors in separated xml file: listitem_background.xml and listitem_selector.xml.
The first one is used to the background of the list item, it will make the effect when the item is pressed and in normal state.
The second one is used to the selector of the list, it will get rid of the default selector of the list view by setting all the state to transparent.
The default selector effect is defined in the first xml file: listitem_background.xml.
First you need a xml file to define some drawable color: color_drawable.xml, in res/values directory:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- The color of the normal state. -->
<drawable name="listitem_normal">#E671B8</drawable>
<!-- The two color below show when the item is pressed, you should change that to the color you want. -->
<drawable name="listitem_pressed">#e7eeab</drawable>
<drawable name="listitem_selected">#e7eeab</drawable>
</resources>
Then, listitem_background.xml in res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/listitem_pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#drawable/listitem_selected" android:state_enabled="true" android:state_focused="true"/>
<item android:drawable="#drawable/listitem_selected" android:state_enabled="true" android:state_selected="true"/>
<item android:drawable="#drawable/listitem_normal"/>
</selector>
and, listitem_selector.xml in res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/android:transparent" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#color/android:transparent" android:state_enabled="true" android:state_focused="true"/>
<item android:drawable="#color/android:transparent"/>
</selector>
set listitem_background to listitem:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/listitem_background" >
...
</RelativeLayout>
set listitem_selector to listview:
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:listSelector="#drawable/listitem_selector" />
Seeing as this is getting a bit of attention again, I will post the solution I found (which I had previously mentioned in a comment):
I found android:drawSelectorOnTop="true" in the ListView solved the problem.
Just use of this in ListView to match the color combination
android:cacheColorHint="#e7eeab"
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"