How do I put a background under a transparent ListView? - android

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

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.

Show a selection mask effect on click on LinearLayout

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"

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.

ListSelector on Listview not working

I have my custom listselector like this :
<?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/bg_list_hover"></item>
<item
android:state_focused="true"
android:drawable="#drawable/bg_list"></item>
</selector>
and my listview :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg_dasar" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="StoreCategory"
android:textSize="15sp"
android:paddingLeft="10dip"
android:paddingTop="10dip"
android:paddingRight="10dip"
android:textColor="#color/textcolor"/>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:listSelector="#drawable/listselector">
</ListView>
my problem is, when i do not click on listview, listview item do not use focused state background (#drawable/bg_list) ...
any one can help me please???
For those still need it: The key is to set the listSelector as background for the list item!
<?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:background="#819FF7"
android:orientation="vertical" >
<ListView
android:id="#+id/mainList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#819FF7"
/>
</LinearLayout>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lineItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/list_selector">
<ImageView android:id="#+id/imageView"
android:layout_width="96dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
<TextView
android:id="#+id/textView"
android:layout_toRightOf="#+id/imageView"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_centerVertical="true"
android:textSize="18sp"
android:textColor="#ff000000"
android:layout_width="wrap_content"
/>
<Button
android:id="#+id/button"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:focusable="false"
android:text="Delete" />
</RelativeLayout>
I have solved my problem, by read some reference..
my listselector should be like this :
<?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/bg_list_hover" />
<item
android:drawable="#drawable/bg_list" />
</selector>
my listview layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg_dasar" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="StoreCategory"
android:textSize="15sp"
android:paddingLeft="10dip"
android:paddingTop="10dip"
android:paddingRight="10dip"
android:textColor="#color/textcolor"/>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
**android:listSelector="#android:color/transparent"**>
</ListView>
</LinearLayout>
and my also adding my list selector into my list item background :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="horizontal"
android:padding="15dip"
android:gravity="center_vertical"
**android:background="#drawable/listselector"**>
<ImageView
android:id="#+id/imageViewlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip" />
<TextView
android:id="#+id/textViewcategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/textcolor"
android:textSize="15sp"/>
</LinearLayout>
thankyou for Jay & danwilkie for answer my question..
:))
Have you tried calling "requestFocus()" on the listView in your code after setting android:focusable="true" in the xml? From the View docs:
"Call this to try to give focus to a specific view or to one of its descendants. A view will not actually take focus if it is not focusable (isFocusable() returns false), or if it is focusable and it is not focusable in touch mode (isFocusableInTouchMode()) while the device is in touch mode. See also focusSearch(int), which is what you call to say that you have focus, and you want your parent to look for the next one. This is equivalent to calling requestFocus(int, Rect) with arguments FOCUS_DOWN and null."
It looks like your selector xml at the moment is saying to use bg_list_hover when you click on an item, and bg_list when you focus on an item (using a trackball, for example).
If you want to use a custom drawable in the default case when the item is neither clicked nor focused, you need to add an entry for that:
I would use something like this:
<?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/bg_list_pressed"></item>
<item
android:state_focused="true"
android:drawable="#drawable/bg_list_focused"></item>
<item
android:drawable="#drawable/bg_list"></item>
</selector>

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