I have implemented the ripple effect introduced in Lollipop in a ListView. But it is only working for the first item of ListView. I've followed the answers of this question but I'm unable to set a ripple effect.
I have a ripple_background.xml in drawable-v21 folder:
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/background_dark">
<item>
<shape
android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
The layout my ListView exists in is as following:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ListView
android:id="#+id/listSettings"
android:listSelector="#android:color/transparent"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:divider="#color/price_item_divider"
android:dividerHeight="1dp"
android:drawSelectorOnTop="true"/>
</LinearLayout>
and the items populated inside ListView is as follows (settings_item_row.xml):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="70dp"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:background="#drawable/ripple_background"
android:padding="16dp" >
<ImageView
android:id="#+id/imageViewIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:paddingRight="10dp" />
<TextView
android:id="#+id/textViewName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageViewIcon"
android:paddingRight="10dp"
android:textColor="#android:color/black"
android:textSize="18sp" />
</RelativeLayout>
Thank you for your help!
I faced same issue and found an easy solution to this problem. No need to set any background to any list item or ListView. Just set android:listSelector to your ripple drawable in ListView.
So ListView in my activity look like:
<ListView
android:id="#+id/myListView"
...
android:listSelector="#drawable/ripple" />
and my ripple drawable is defined as :
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/rippleColour">
<item android:drawable="#color/backgroundColour"/>
</ripple>
Just had this problem and fixed it. Remove the ripple background drawable from your individual list item views, and then set a background on the ListView itself. As well, add the drawSelector to your list item and remove field from your ListView.
This fix only works for having a single color background for the ListView.
Your List Item View:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="70dp"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:background="#drawable/ripple_background"
android:padding="16dp" >
And Your ListView:
<ListView
android:id="#+id/listSettings"
android:listSelector="#android:color/transparent"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:divider="#color/price_item_divider"
android:dividerHeight="1dp"
android:background="#color/__Your color here__
/>
It happened to me and I changed the clickable value to true than it worked.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
....
android:background="#drawable/touchselector"
android:clickable="true">
....
</LinearLayout>
There is no need to add any background to the layout.
Just leave your layouts as it is. Now concentrate on the ListView
in ListView your can add your own background and you can use ListSelector to apply ripple theme.
By using ListSelector in ListView ripple effect will work on every item in the list and you can give default background to the list items also (separately in list View).
<ListView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/list"
android:scrollbarStyle="outsideInset"
android:background="#fff"
android:listSelector="#drawable/ripp" />
Related
I am trying to add spacing to my list items in ListView. I have tried using divider and dividerHeight but this doesn't seem to work. Please what could be wrong?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_export_logistics"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.orume.export.ExportLogisticsActivity">
<include layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"></include>
<ListView
android:id="#+id/ListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:divider="#null"
android:dividerHeight="16dp"
android:layout_marginTop="65dp"
android:background="#fff"></ListView>
</RelativeLayout>
divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:width="20dp"
android:color="#dd0d0d" />
</shape>
you don't set your divider to your ListView.
android:divider="#null" #null here means that you set the divider to empty. Now you have a drawable divider.xml, and you need to tell Android that you want it to be used as a divider.
If your divider.xml is placed under drawable directory, then use android:divider="#drawable/divider"
Ok. Found a way out. I ended up add android:layout_marginBottom to the texView that defines my ListView and it worked perfectly. Thanks.
Create a custom view for your list items and give top and bottom padding or other space adjustments inside that custom item layout to bring space for list items. An eg link is below
Android custom Row Item for ListView
Also another note is giving divider height might not work well.
<ListView
android:id="#+id/ListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:divider="#android:color/transparent"
android:dividerHeight="16dp"
android:layout_marginTop="65dp"
android:background="#fff"></ListView>
replace this listview with yours..
I'm trying to use a list view control on Lollipop under the following conditions:
The theme type is the default Theme.Material (dark theme).
The list view is contained inside of larger layout which has a white background.
The list view should have a list selector that appears with the white background.
NOTE: I am forced to use a custom list selector color because if I use a white background, the dark material themed selector uses the theme's colorControlHighlight color for the ripple, which is 40ffffff, and does not show up.
I first tried the following:
layout xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#android:color/white" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/list_selector" />
</LinearLayout>
list_selector xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ff0000" >
</ripple>
And list view row xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
tools:ignore="UseCompoundDrawables" >
<ImageView
android:id="#+id/list_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/list_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
What I am expecting to see is when I select an item, the item is selected with a ripple colored as #ff0000. However, this is what I end up seeing:
What I am hoping for is somewhat close to this behavior - but confined within the selected list row! What am I doing wrong?
Thanks,
Zach
You're using an unbounded ripple, e.g. a ripple with no content or mask layer, so the ripple is projecting onto the background of its parent ListView. You should set a mask layer to constrain the ripple bounds.
res/drawable/my_list_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="#android:id/mask">
<color android:color="#color/white" />
</item>
</ripple>
Standard ListView selector in android L developer preview uses colorControlHighlight for the ripple effect on touch and has a transparent background in unfocused state.
I would like to define a ListView item that has a colored background and still shows the ripple effect on touch with the same highlight color. Now, if I define the following drawable:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#color/my_background_color"/>
</ripple>
it works, but the ripple starts in the middle of the ListView item, regardless of the touch position. If I use the same background outside of the ListView, e.g. for a LinearLayout, it works like expected (the ripple starts on the touch position).
I've managed to get individually colored list items while maintaining the ripple effect. Set the background of your list items using whatever adapter you have and set the listview to show the selector on top:
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="true" />
This will draw the ripple effect above the background.
As far as I can tell this bug is only in Android 5.0, not 5.1. The trick seems to be to use Drawable#setHotspot as a Google dev hints to here https://twitter.com/crafty/status/561768446149410816 (because obscure twitter hints are a great form of documentation!)
Assume you have a row layout something like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/row_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="?attr/selectableItemBackground">
.... content here .....
</LinearLayout>
</FrameLayout>
The following worked for me
row.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.findViewById(R.id.row_content)
.getBackground()
.setHotspot(event.getX(), event.getY());
return(false);
}
});
I've found that it only seems to work correctly if you apply the background to the root element of the list item.
Also, consider using the new RecyclerView instead of a ListView
List item view example:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/list_padding"
android:layout_marginLeft="#dimen/list_padding"
android:layout_marginRight="#dimen/list_padding"
android:padding="#dimen/list_padding"
android:background="#drawable/ripple_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/tvTitle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:id="#+id/tvSubtitle" />
</RelativeLayout>
i adapted #ArhatBaid 's answer a littlebit, tested it and it works perfectly:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#color/light_grey_header_navigation_drawer"/>
</ripple>
So, this allows you to set a background color and still have the ripple effect.
for me target and minSdk are 21.
The sample layout, which contains the Ripple effect as Background of the the parent layout.
<RelativeLayout
android:id="#+id/id4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ripple_effect"
android:clickable="true">
<ImageView
android:id="#+id/id3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/image"
android:layout_centerVertical="true"/>
<LinearLayout
android:id="#+id/id2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<TextView
android:id="#+id/id1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"/>
</LinearLayout>
</RelativeLayout>
Ripple_effect.xml
Here you can use any colour of you choice.
Make sure that you use sdk version 21 and have drawable-v21 and style-v21 folder and put all the file related to v21 in them.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
Here you can use different shape like rectangle instead of oval...
You can achieve this with a nested Layout. Just create e.g. a LinearLayout as root layout around your existing layout, set the ripple effect on the root layout and your background color to the nested one.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ripple_effect"
android:orientation="vertical">
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/containterContent"
android:background="#color/yourCOLOR"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your content -->
</RelativeLayout>
</LinearLayout>
I have set this color:
<color name="lightgrey">#1a000000</color>
And have this layout with a textview that as margins and one listview.
As you can see in the below image, there's a slightly difference in the background color of the texviewand the listview
Why is this happening?
Here is my layout:
<?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="#color/lightgrey"
android:orientation="vertical"
>
<TextView
android:id="#+id/queryTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10sp"
android:background="#drawable/rect"
android:clickable="false"
android:gravity="center"
android:minHeight="50dp"
android:textColor="#000000"
android:textSize="30sp"
android:textStyle="bold"
android:typeface="normal"
/>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:divider="#null"
android:fastScrollEnabled="true"
android:textFilterEnabled="true"/>
</LinearLayout>
And #drawable/rect
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white"/>
<corners
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
android:topLeftRadius="5dip"
android:topRightRadius="5dip"/>
Change the background colour into proper format like #e3e3e3 (max 6 chars) as android probably ignores the rest of the chars. Change the background color to a max 6 char color set and see if it works.
Check the layout you use for the list items, maybe you are using a different background color to the background of the main layout.
... and remember add always the next attribute on the ListView Tag to avoid having a black background when scroll the list.
android:cacheColorHint="#00000000" // setting transparent color
I have changed the lsitview selector color to transparent. Even then when I click on the list item, the color of the text changes to dark grey.. is there anyway to handle this issue. I don't want the color to be changed upon item click ..
first this problem solution achieve we can create custom listview...
suppose your listview xml file like...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView
android:layout_height="wrap_content"
android:id="#android:id/list"
android:layout_width="match_parent"></ListView>
</LinearLayout>
and custom view xml file...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/black"
>
<TextView
android:text="TextView"
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="30dip">
</TextView>
</LinearLayout>
and run your application...than you click on item no color show ...
get full code about this problem click here.