Adding selector to listview item - android

I am using the following xml code to show smooth top white strip and bottom white strip on list item selection. The problem is that it shows gradient on list item selection.I think, I am missing something in xml,Please help me.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#android:color/white"
android:centerColor="#android:color/transparent"
android:endColor="#android:color/white"
android:angle="90" />
</shape>
</item>
</selector>

<!-- If you simply want a background for your list item, use the following -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"><stroke android:color="#color/popup_border" android:width="1dp"/> <!-- For border/outline(Remove this line if you don't want border/outline)-->
<gradient android:startColor="#android:color/white" android:centerColor="#android:color/transparent" android:endColor="#android:color/white" android:angle="270" />
</shape>
</item>
</selector>

Related

How to have bottom line programmatically just like in default edittext with gradientdrawable in android

It will draw a bottom underline and i want to simply achieve below xml code by using gradientdrawable, I am trying to have custom edit text class which used in xml and set some property like bottom line color or others.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-6dp"
android:right="-6dp"
android:top="-6dp">
<shape>
<stroke
android:width="1dp"
android:color="#000" />
</shape>
</item>
</layer-list>
First create gradient file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="180" android:startColor="#7c0000" android:endColor="#ff9a9a"/>
</shape>
and than add it here :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
</shape>
</item>
<item android:drawable="#drawable/gradient" android:gravity="bottom" android:height="2dp"/>
</layer-list>

Create shape for drawable

I have ListView, and i have a background for the list items:
Is there any way to recreate this background as a shape in drawable XML? The most outer grey is not part of the item background, it is actually the ListView.
You can try following with the values of your choice. It will make the bottom two corners rounded.
rounded_rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient android:angle="270" android:endColor="#404040" android:startColor="#404040" />
<stroke android:width="1dp" android:color="#808080" />
<corners android:bottomLeftRadius="11dp" android:bottomRightRadius="11dp"/>
</shape>
</item>
</selector>
then use it as a background to your listitem as follows
android:background="#drawable/rounded_rectangle"
You can try this shape drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#606060"/>
<stroke android:color="#303030" android:width="2dp" />
</shape>

Android : Image button or button Highlighted with Effect when Pressed

Here when i pressed on these left and right arrow button at that time I want to see these type of effects on button. These same thing happens in Iphone/IOS by default.
Can i make this type of effect?
Here i mentioned the pic what exactly i want.
Here i used this xml files but didnt got success.
button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape>
<gradient android:angle="180" android:centerColor="#657377" android:endColor="#AFFFFFFF" android:startColor="#FFFFFFFF" android:type="linear"/>
<corners android:radius="10dp" />
</shape></item>
</selector>
EDIT
I used android:background="#drawable/button_pressed.xml" line but i did not got which i want Exactly.
Tried :
I used this xml file as per Piyush's Answer but i didnt get success and i am getting this effect.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/transparent" />
</shape>
</item>
<item>
<shape
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="9"
android:useLevel="false" >
<gradient
android:endColor="#00000000"
android:gradientRadius="250"
android:startColor="#ffffffff"
android:type="radial" />
</shape>
</item>
</layer-list>
I agreed top and bottom part cuts because i have limited space in layout for this button. that we will think later but why its not taking effect like shadow and alpha and all that same like which i mentioned?
OUTPUT :
Please help me If any body has idea about this.
Thanks in Advance.
The shape has to be radially drawn with fading from white to black outwards.
Try this:
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ffffffff"
android:endColor="#00000000"
android:gradientRadius="100"
android:type="radial"/>
</shape>
Also, you cannot directly set this as a background to your button. You will have to create a selector drawable file in which you specify different backgrounds based on the state of the button. In this case, you need this background to be set only when button is pressed. The selector will look something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_pressed"/>
<item android:state_selected="true" android:drawable="#drawable/button_pressed"/>
<item android:state_focussed="true" android:drawable="#drawable/button_pressed"/>
<item android:drawable="#android:color/transparent" />
</selector>
PS: It is not recommended to replicate iOS design when designing an Android app. For Android design guidelines, please refer: http://developer.android.com/design/building-blocks/buttons.html
can try this regarding for circular shape, can set your colors accordingly.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/transparent" />
</shape>
</item>
<item>
<shape
android:shape="ring"
android:useLevel="false" >
<gradient
android:endColor="#00000000"
android:gradientRadius="200"
android:startColor="#ffffffff"
android:type="radial" />
</shape>
</item>

List selection does not disappear after the second tap

I have a ListView or PreferenceView with some items (5 for ex.)
and each element has android:background value
android:background="#drawable/red_selector_list"
red_selector_list:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/red_gradient" />
<item android:state_focused="true" android:drawable="#drawable/red_gradient" />
<item android:state_pressed="true" android:drawable="#drawable/red_gradient" />
<item android:drawable="#drawable/gray_gradient_list" />
</selector>
red_gradient:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:startColor="#990000"
android:centerColor="#b00000"
android:endColor="#ff0000"
android:type="linear" />
<corners android:radius="0dp"/>
</shape>
gray_gradient_list:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:angle="90" android:startColor="#ebebeb"
android:endColor="#ffffff" android:type="linear" />
<corners android:radius="0dp"/>
</shape>
Steps to reproduce this issue:
List item
Touch and hold any item
Touch and hold any other item using other finger
Remove finger which keeps option from step 2
Continue keep your finger from step 3 on the screen and swipe down until the
end of screen
Highlighting always remains after selecting two items at the same time and should be disappeared. This issue cannot be reproduced with items without the android:background value. Could it be an Android platform issue?

How to add padding to gradient <shape> in Android?

I have a shape with a gradient that I'm using as a divider between ListView items. I've defined it as follows:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ccd0d3"
android:centerColor="#b6babd"
android:endColor="#ccd0d3"
android:height="1px"
android:angle="0" />
</shape>
I would like to add 6 pixels of padding on either side of the gradient, so that it doesn't extend from edge to edge of the screen.
However, no matter where I put an android:left="6px" and android:right="6px", it doesn't seem to take effect. I can put it in the <shape> element, the <gradient> element, or in a separate <padding> child of <shape>, and it doesn't change anything.
How can I add padding on the left and right of my list divider?
I guess you could combine it like this:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="6dp"
android:right="6dp">
<shape android:shape="rectangle">
<gradient android:startColor="#ccd0d3"
android:centerColor="#b6babd"
android:endColor="#ccd0d3"
android:height="1px"
android:angle="0"/>
</shape>
</item>
</layer-list>
Another solution using inset:
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="6dp"
android:insetRight="6dp" >
<shape
android:shape="rectangle">
<gradient
android:startColor="#ccd0d3"
android:centerColor="#b6babd"
android:endColor="#ccd0d3"
android:height="1px"
android:angle="0" />
</shape>
</inset>
One solution seems to be to "wrap" my drawable with another drawable that specifies the appropriate padding.
For example, list_divider.xml would be:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="6dp"
android:right="6dp"
android:drawable="#drawable/list_divider_inner" />
</layer-list>
And then list_divider_inner.xml would be the original drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ccd0d3"
android:centerColor="#b6babd"
android:endColor="#ccd0d3"
android:height="1px"
android:angle="0" />
</shape>
This results in two files to specify a simple divider though. I don't know if there's a way to do it with only one file though.

Categories

Resources