Show a selection mask effect on click on LinearLayout - android

Please see the layout below. I want to show a selection highlight on the entire LinearLayout if the user touches the ImageView or preferably entire layout. This is like a onclick effect. Although I have a selector its not working. How can I make this work?
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
<ImageView
android:id="#+id/btnFromEasy"
android:layout_width="#dimen/normal_button_size"
android:layout_height="#dimen/normal_button_size"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/animals" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/easy"
android:textColor="#color/subtitle_text_color"
android:textSize="#dimen/text_size_small"
android:textStyle="bold" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="Blue" />
</item>
<item>
<color android:color="White" />
</item>
</selector>

Try this simple code.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/background_image_pressed" /> // image
<item
android:drawable="#drawable/background_image_default" /> // image
</selector>
and inside LinearLayout add android:clickable="true"
<LinearLayout
...
android:clickable="true"
...>
Hope this help.

Add android:clickable="true" to properties of LinearLayout and it work
Your code:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
-> add
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical"
android:clickable="true">
Line android:layout_width="0dp" makes the layout can't be visible so I change it to "wrap_content"

Related

Selector on RelativeLayout not working

I know there are a lot of subjects about this and i read all of them. But still I couldn't make that selector working on RelativeLayout.
So i need your help. Here is my code.
Selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/selected_background"/>
<item android:state_pressed="true" android:drawable="#drawable/selected_background" />
<item android:state_selected="true" android:drawable="#drawable/selected_background" />
<item android:drawable="#drawable/unselected_background" />
Layout:
<LinearLayout
android:id="#+id/calendarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="afterDescendants"
android:clickable="false"
android:focusable="false"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:clickable="false"
android:descendantFocusability="afterDescendants"
android:weightSum="3">
<RelativeLayout
android:id="#+id/calendarItem1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/selector_dashboard_calendar_icon"
android:clickable="true"
android:focusable="true"
android:padding="3dp">
<TextView
android:id="#+id/dateTextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:clickable="false"
android:lines="2"
android:padding="3dp"
android:textColor="#color/white"
android:textSize="12dp" />
</RelativeLayout>
</LinearLayout>
...
</LinearLayout>
As you can see I made child views not clickable and not focusable, all parent layouts except the one that i put selector has after descendent focusability. What happens is background only changes only when the layout is clicked but i want it to be changed on the selected state.

How do I put a background under a transparent ListView?

right now what I have is just a listview with a custom gradient as the background color. When I have 2 items in my list, the rest of the background beneath it is just all black. I can't set a background image anywhere that would make a background show up. My desired outcome is to have a background image in the back of the entire view where a transparent listview would overlay it. How could this be done? Let me know if you guys need more info/code from my project.
Thanks!
This is my listview in main.xml
<ListView
android:id="#+id/store_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/store_div2"
android:divider="#000000"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"/>
This is the list_selector.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/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
this is my list_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_selector"
android:orientation="horizontal"
android:padding="10dp" >
<!-- Application Icon -->
<LinearLayout
android:id="#+id/gmg_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:layout_alignParentLeft="true"
android:background="#drawable/image_bg"
android:layout_marginRight="5dp">
<ImageView
android:id="#+id/gmg_list_image"
android:layout_width="50dp"
android:layout_height="50dp" />
</LinearLayout>
<!-- Title-->
<TextView
android:id="#+id/gmg_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:layout_toRightOf="#id/gmg_thumbnail"
android:textColor="#040404"
android:typeface="sans"
android:textSize="15sp" />
<!-- Rightend Arrow -->
<ImageView
android:contentDescription="#string/right_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scaled_arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
Set your desired background on the Parent Layout containing ListView.
android:background="#drawable/ic_launcher"
Like this (Assuming RelativeLayout is yout parent layout)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ic_launcher" >
<ListView
android:id="#+id/store_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/store_div2"
android:divider="#000000"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"/>
</RelativeLayout>
Add this property android:cacheColorHint="#00000000" to ListView

ListView - Highlight sub layout of item

I have been searching for the straight answer to this question for quite some time now. What I want to know is how to implement a custom highlight on a ListView that will only hightlight (over top, preferably) a sub layout of the ListView item (in this case, I'm looking to highlight the RelativeLayout of the item).
Here is a screen shot of what I've got going on:Fail
Here is the code for list_item.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:clickable="false">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_layout">
<LinearLayout android:id="#+id/linearLayout_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/imageView_thumbnail"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_toRightOf="#+id/linearLayout_thumbnail"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_title"
android:paddingLeft="5dp"
android:textSize="18dp"
android:text="SOME TEXT" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_subtitle"
android:paddingLeft="5dp"
android:textSize="12dp" />
</LinearLayout>
<TextView
android:id="#+id/textView_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
And the code for the ListView for that picture:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">
<ListView android:id="#+id/listView_something"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/list_item_selector"
android:drawSelectorOnTop="true"/>
</LinearLayout>
The code for list_item_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/list_item_selected" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent" android:state_focused="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Here's the file for the card_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="7dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/list_item_selected" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent" android:state_focused="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Here's what happens when I switch the RelativeLayout's background to the selector that the ListView is using, and change the ListView so that it's selector is transparent: Sort of working
So for whatever reason, the card_layout.xml file isn't allowed to have the two items before the selector information and everything goes weird. Can anyone tell me how this is properly implemented? Like Google Play Music (This might not be the best example because it looks like a GridView or something along those lines)
Do I have to implement a GridView to display this list?
I found a solution, I don't know if it's the best solution, but it got what I wanted done.
Put simply, I've found that adding the selector code inside the card_layout.xml file does not work. What you should do is create a layout xml file for each state that you wish to implement on the button or list item and embed that layout in the selector itself, like in the answer for this SO post here: Android Using layer-list for button selector.
Since I didn't want to bother finding out colors and transparencies I would need to implement the background for three different states I've basically placed a RelativeLayout which lies over top of the entire list item to act as the select-able part of the item.
The code for this is here:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_layout">
<LinearLayout android:id="#+id/linearLayout_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/imageView_thumbnail"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_toRightOf="#+id/linearLayout_thumbnail"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_title"
android:paddingLeft="5dp"
android:textSize="18dp"
android:text="SOME TEXT" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_subtitle"
android:paddingLeft="5dp"
android:textSize="12dp"
android:text="SOME TEXT" />
</LinearLayout>
<TextView
android:id="#+id/textView_extra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#drawable/list_item_selector"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"/>
</FrameLayout>
So, now this is working, screenshot here:

Highlight a Single Row in Android

I am inflating a layout multiple time as per records.so i want when the user select any particular row.It gets highlighted and after that it comes in normal state as it was before.How can we do this.
Layout that i am inflating multiple times
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainResultLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/request_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="25 Sep 2013" />
<TextView
android:id="#+id/trip_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="25 Sep 2013" />
<TextView
android:id="#+id/trip_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="XXXXXXXXXX" />
<ImageView
android:id="#+id/approval_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:src="#drawable/pending"/>
</LinearLayout>
</LinearLayout>
Please help me how we can do this .Will be thankful to u ..
To highlight a Layout use Selector. Selector can be used to layout,widgets like TextView,Button etc.
artists_list_backgroundcolor.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/grey" />
<item android:state_pressed="true"
android:drawable="#color/itemselected" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/itemselected" />
</selector>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="grey">#ffffff</color>
<color name="itemselected">#EDEDED</color>
</resources>
Use selector like this.
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/artists_list_backgroundcolor">
xml selector for layouts whats you need.
try this maybe help you.
See my answer here: how can i get android list view selector items to remember their state off screen?
It's basically using a Checkable RelativeLayout but you can do the same for LinearLayout.

color of linear layout influenced by color of underlaying linear layout

i included some linearlayouts in a linear layout. But i want the linear layout on top (the included one) to be greyish, and just the background orange. When i try this, everything is orange! Is there some way i can prevent this?
my ll:
<?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="fill_parent"
android:orientation="vertical"
android:background="#color/orange">
<include
android:id="#+id/bt_overview_list_places"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_agenda"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_shopping"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_food"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
the one i include:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lloverview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/custom_button_grey"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/ivoverviewimage"
android:layout_width="50dp"
android:layout_height="50dp" android:src="#drawable/ic_launcher" android:scaleType="centerCrop"
android:layout_margin="10dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="225dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvoverviewname"
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_gravity="left|top"
android:layout_marginLeft="10dip"
android:text="naam"
android:textSize="16dip"
android:maxLines="1"
android:ellipsize="marquee"
android:textColor="#color/black"/>
<TextView
android:id="#+id/tvoverviewtext"
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:maxLines="3"
android:text="tip"
android:textSize="12dip"
android:ellipsize="end"
android:textColor="#color/black"/>
</LinearLayout>
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/iconarrowsmall"
android:layout_gravity="center_vertical"
android:layout_margin="2dip"
/>
</LinearLayout>
<ImageView
android:id="#+id/bottom_border"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/custombuttonlist_bottomborder"
/>
</LinearLayout>
I already tried giving the linear layouts colors programmatically:
lPlaces= (LinearLayout)findViewById(R.id.bt_overview_list_places);
llPlaces.setBackgroundColor(R.color.custom_button_grey);
but everything just stays orange (with some difference in color).
I checked my color, and i think it should be 100% NOT transparent:
<color name="custom_button_grey_text">#585850</color>
even with the FF added in front of it:
<color name="custom_button_grey_text">#FF585850</color>
try like this in xml
android:background="#FF4500"
in place of
android:background="#color/custom_button_grey"
You should override the background parameter for each included layout. You can override any attribute using android:layout_*
Take a look at the official documentation using <include> tag.
Ok i get it:
i created an drawable file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused -->
<item android:state_focused="true" android:drawable="#color/list_even" />
<!-- focused and pressed-->
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/list_even" />
<!-- pressed -->
<item android:state_pressed="true" android:drawable="#color/list_even" />
<!-- default -->
<item android:drawable="#color/list_odd" />
</selector>
(now i have nice colorchange when i press it too)
and set that as background resource:
llPlaces.setBackgroundResource(R.drawable.overview_background_color_even);

Categories

Resources