Android Relativelayout click background behaviour - android

So i have a RecyclerView and it is populated by my custom layout (code below). I have made a background drawable and set it on the root of my custom layout so that when user clicks the item, the background colour changes. There is also an options button (3 dots) on every item's layout, which is also clickable and also needs to change the background colour when clicked.
The problem is, when i set my drawable as background for the options menu the whole layout doesn't change colour when clicked (screens below)
When i set the background on options menu as "?android:attr/selectableItemBackground", everything works fine.
Code for my layout:
<RelativeLayout xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#drawable/item_click"
android:layout_marginBottom="2dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:paddingLeft="16dp"
android:id="#+id/item_icon"
android:src="#drawable/ic_folder" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="72dp"
android:layout_centerVertical="true">
<TextView
android:id="#+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#333333"
android:text="Caption"
android:textSize="13sp" />
<TextView
android:id="#+id/item_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#333333"
android:text="Description"
android:textSize="13sp" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:foregroundGravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:id="#+id/item_menu"
android:src="#drawable/ic_ellipsis_v"
android:background="#drawable/item_click" />
</RelativeLayout>
Code for the drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:drawable="#android:color/white" />
</selector>
Item selected when the background of the options menu is set to "?android:attr/selectableItemBackground" (I want the whole row to change colour to blue):
Item selected when the background of the options menu is set to my drawable:

Change the default state of your selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#color/primary_100" />
<item
android:drawable="#android:color/transparent" />
</selector>

Related

Change Listview item item textcolor

Hi I am using listview which have multiple items adding dynamically..
I want to change the text color of listitem any idea
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#659EC7">
<ImageView android:id="#+id/icon" android:layout_width="72px"
android:layout_height="wrap_content"
android:layout_marginTop="5px" />
<TwoLineListItem xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="5px"
android:paddingBottom="5px">
<TextView android:id="#+id/item1" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView android:id="#+id/item2" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:paddingTop="30px" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"/>
</TwoLineListItem>
</LinearLayout>
I am using 2linelistIem
Here is the code I wrote and used:
It keeps the android style for all other states. it just overlays the transparent state with your desired color:
Layer list drawable for list view with custom background
as you can see in my question there is a minor bug with the focused state, but it is still the best solution i ever saw :D
Use this type of technique to change the color dynamically:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/black" /> <!-- focused -->
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/black" /> <!-- focused and pressed-->
<item android:state_pressed="true" android:drawable="#color/green" /> <!-- pressed -->
<item android:drawable="#color/black" /> <!-- default -->
</selector>

Android PNG transparent image on background

I have a problem with changing button background image.
So i have 2 images (png-24 transparent background).
Images are a simple circle and the same circle but with some outerglow ).
I have the following code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ticketing_row_topup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#layout/pressed_topup_button"
android:orientation="horizontal" >
<TextView
android:id="#+id/topup_name"
android:layout_width="60dp"
android:layout_height="fill_parent"
android:gravity="center_vertical|right"
android:paddingRight="5dip"
android:paddingTop="22dip"
android:text="€"
android:textColor="#color/black"
android:textSize="35sp"
android:textStyle="bold" />
<TextView
android:id="#+id/topup_display_amount"
android:layout_width="90dp"
android:layout_height="match_parent"
android:gravity="center_vertical|left"
android:textSize="65sp"
android:textColor="#0d457f"
android:textStyle="bold" />
</LinearLayout>
And the pressed_topup_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:state_enabled="false">
<item android:state_pressed="true" android:state_enabled="true" android:drawable="#drawable/button_topup_glow" />
<item android:state_focused="true" android:state_enabled="true" android:drawable="#drawable/button_topup" />
<item android:state_enabled="true" android:drawable="#drawable/button_topup" />
</selector>
The LinearLayout is used to populate a GridView in each cell.
When i click the cell the behavior is correct (the glow is displayed) but also a yellow color is display on the corner of the image (where suppose to be transparent). How can i fix that?
Thanks
You need to add
android:listSelector="#android:color/transparent"
to your GridView declaration.
See this:
Android: Disable highlighting in GridView

How to work with Selector Listview in Android?

I have file lst_custom_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:background="#drawable/list_choose"
android:orientation="horizontal">
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:scrollHorizontally="true"
android:singleLine="true"
android:textColor="#ff000000"
android:textSize="22dp" />
</RelativeLayout>
And Listview in Main.xml
<ListView
android:id="#+id/lstView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:cacheColorHint="#android:color/transparent"
android:divider="#drawable/menu_phancach"
android:dividerHeight="2dp"
android:visibility="visible">
</ListView>
I use Selector with Background of Relativelayout with name list_choose.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/menu_content" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/menu_content_hover" />
<item android:state_pressed="true"
android:drawable="#drawable/menu_content_hover" />
</selector>
it's show me the background of RelativeLayout menu_content_hover when i Press on items listview, but not selected with background menu_content_hover. I want it change background menu_content_hover when user press on items and selected ,change backround menu_content when user scroll list(unselected) or choose another items.I used simpleCursorAdapter. Any Help? Thanks for all your help.
The selector should be like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/background_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/background_focused" />
<item android:state_selected="true"
android:drawable="#drawable/background_selected" />
<item android:drawable="#drawable/background_default"/>
</selector>

Change ListView's text color on click

I have a customized ListView that each row of the list is composed by an ImageView and two TextView's. I want to change the text's color to white when a list's item is clicked (only in the clicked item). Also, I want to change back the color to black when the item is "unclicked" (when the "press" is released). I already made the item's background color change when it was clicked with the following list_item_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#color/white" />
<item android:state_pressed="true"
android:drawable="#color/red_destaques" />
<item android:state_selected="true"
android:drawable="#color/red_destaques" />
</selector>
And the listitem_row.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="50dip"
xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="5dip"
android:maxHeight="50dip"
android:adjustViewBounds="true"
android:background="#color/list_item_bg">
<ImageView
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/imagem_padrao_lista"
android:id="#+id/listItemLogo">
</ImageView>
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_toRightOf="#+id/listItemLogo"
android:layout_toLeftOf="#+id/listItemArrow"
android:textColor="#000000"
android:layout_marginLeft="5dip"
android:adjustViewBounds="true"
android:id="#+id/listItemTitle">
</TextView>
<TextView
android:layout_height="wrap_content"
android:text="TextView"
android:layout_width="wrap_content"
android:layout_toRightOf="#+id/listItemLogo"
android:layout_below="#+id/listItemTitle"
android:textColor="#333333"
android:layout_marginLeft="5dip"
android:adjustViewBounds="true"
android:id="#+id/listItemDescription">
</TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignParentRight="true" android:src="#drawable/setinha_navegacao" android:layout_centerVertical="true" android:id="#+id/listItemArrow"></ImageView>
</RelativeLayout>
I the text to change it's color exactly in the same manner that the background changes as shown in the above xmls. I would prefer doing this change by code if possible...
Create a new StateListDrawable like you did before but with black as default color and white when pressed.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#color/black" />
<item android:state_focused="true" android:color="#color/black" />
<item android:state_pressed="true" android:color="#color/black" />
<item android:color="#color/white" />
</selector>
Now for in the TextView change the text color to the new drawable:
android:textColor="#color/list_item_text"
More on StateListDrawables: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList

TextView inside a ListView: setTextHighlightColor() issue

I have ListView and TextView inside it. Now the thing is: I want to change the TextColor over the cell's selection in the ListView, but setting setTextHighlightColor of TextView isn't giving this output.
I have tried setting a selector for this, but that is not helping too.
Can this be solved? What might be causing the issue to populate?
The code layout is:
Cell.xml
<ImageView
android:id="#+id/thumbnail"
android:layout_width="48dip"
android:layout_height="48dip"
android:layout_gravity="center_vertical"
android:src="#drawable/icon"
/>
<TextView
android:id="#+id/username"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/thumbnail"
android:layout_alignParentTop="true"
android:gravity="top"
android:text="Username"
android:textColor="#drawable/timeline_username_selector"
/>
<TextView
android::id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="10px"
android:text="31stMarch,2010"
android:textColor="#drawable/timeline_username_selector"
/>
<TextView
android:id="#+id/textTweet"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/username"
android:layout_toRightOf="#id/thumbnail"
android:layout_alignParentBottom="true"
android:gravity="top"
android:textColor="#drawable/timeline_tweet_selector"
/>
The Selector is a simple one
As you know, you'll need a state drawable to show different colors for different states:
<?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:color="#ff0000" />
<item android:state_focused="true" android:state_pressed="true" android:color="#ff0000" />
<item android:state_focused="false" android:state_pressed="true" android:color="#ff0000" />
<item android:color="#000000" />
</selector>
Make sure to pass the selected state from the main row view down to child views in the row:
android:duplicateParentState="true"

Categories

Resources