Lets say I have a ListView/GridView with each row consisting of an ImageView. In addition, each row has some padding to it. Ideally in this case, we would want the list selector to be on top so we use drawSelectorOnTop="true". Ok, no problem, except the list selector covers the entire area of the row. Ideally, I would like to have the list selector cover only the area of the ImageView. Below is an example of what I am talking about.
The left is what ideally should happen, and the right is what actually happens.
The only solution I could come up with is to add an extra "empty" View on top of the ImageView that matches in height/width and use that empty View as the selector. I'm wondering if there are any other or better ways to accomplish this?
use layer-list drawable.
drawable/selector_drawable.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" ><item
android:drawable="#drawable/internet_list_focused_holo_light"
android:top="10dp"
android:bottom="10dp"
android:right="10dp"
android:left="10dp">
</item>
</layer-list>
Use an InsetDrawable as your custom selector with a custom ShapeDrawable
For example:
drawable/my_selector.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/my_shape_drawable"
android:insetBottom="10dp"
android:insetLeft="10dp"
android:insetRight="10dp"
android:insetTop="10dp"/>
drawable/my_shape_drawable.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/selector" />
</shape>
This assumes your ImageViews are all of uniform size.
Related
I want to give my ListView rounded corners and some padding. Here is my style:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white"/>
<corners android:radius="10px"/>
<padding android:left="5dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
</shape>
But when I create a divider its width is not from one end to the other but looks like this:
I create the divider like this:
<ListView android:id="#+id/livList"
...
android:divider="#color/bordeaux"
android:dividerHeight="1px" />
Any ideas how to tell the divider to strech from one end to the other?
I will add an answer with the solutions from comments if anybody else have the same problem.If you want your divider to fit the whole ListView just remove paddings set in your drawable in xml. And just another thing: while trying to style ListView items, you need to 'work' on xml file which contains views which you are using to populate current item.
Dude you've entered right, left paddings as 5dp. Remove left & right paddings or make them 0dp
I am trying to create a list divider that has an etched look like the attached screenshot. Upon closer inspection, I see that the divider is composed of 3 layers of colors, 2A2A2A, 3A3A3A and 404040. Does anyone have a clue as to how to implement this. I tried to do it with a layer-list, but it does not have a field for color or background
<item android:color ?? >
Quick help is appreciated.
Just use a shape that has a height of 3 pixels with a vertical gradient.
Here is an UNTESTED EXAMPLE
<shape android:shape="rectangle">
<size android:height="3dp"/>
<gradient
android:angle="90"
android:startColor="#2A2A2A"
android:centerColor="#3A3A3A"
android:endColor="#404040" />
</shape>
Good Evening Everyone,
I have a gridview of images, but I want them flush against each other (without the border that appears when tapped).
I've set vertical and horizontal spacing to zero along with the padding. However, when tapped, the gridview "tap border" still shows up. How can I expand my images, or remove that so I no longer see it.
If you're still unclear, I can provide screenshots.
Thanks,
-Mitchell
Try to use nine-patch bitmap as selector.
Also make sure that bottom and right black lines (nine-patch) cover all sides.
In this case your pictures won't have offsets between each other
I think you should use
public void setSelector (int resID)
and set it to drawable that is fully transpert
the drawable you can define at xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:width="0px" android:color="#android:color/transparent" />
<padding android:left="0dp" android:top="0dp" android:right="0dp"
android:bottom="0dp" />
<corners android:radius="0px"/>
</shape>
I have a ListView that sits on the left side of a tablet-size screen. My goal was to give it a solid background with a border on the right, then apply an overlapping background on the list element to break that border so that it appears to be a part of the view on the right.
The ListView Background
I achieved the right border using a <layer-list> drawable as suggested by Emile in another question:
rightborder.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/black" />
</shape>
</item>
<item android:right="2dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
...and here's the ListView definition for good measure:
<ListView
android:id="#+id/msglist"
android:layout_width="300dp"
android:layout_height="match_parent"
android:divider="#color/black"
android:dividerHeight="1dp"
android:background="#drawable/rightborder"
android:paddingRight="0dip">
</ListView>
<!-- I added the android:paddingRight after reading something
about shape drawables and padding, don't think it actually
did anything. -->
Attempting to override it with a color
In order to achieve the desired effect, I placed the following in the getView function of my adapter:
//If it's selected, highlight the background
if(position == mSelectedIndex)
convertView.setBackgroundColor(R.color.light_gray);
else
convertView.setBackgroundResource(0);
However, using this method, the black border of the ListView's drawable remained visible, and only the white part of the background was replaced by gray. Here's a screen capture:
Fixing it with a drawable
On a hunch, I replaced the color I was assigning with a shape drawable:
selectedmessage.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/light_gray" />
</shape>
getView snippet:
//If it's selected, highlight the background
if(position == mSelectedIndex)
convertView.setBackgroundResource(R.drawable.selectedmessage);
else
convertView.setBackgroundResource(0);
This achieves the desired result, as shown below:
The question:
Why does assigning a rectangle as the background for my ListView element cover the entire view, while assigning the color allows the black border to show through? I'm happy it's working, but I'd like to know why Android is rendering the view this way so I can learn more about how Android renders Views.
Other notes:
I'm running the project in the stock Android 3.2 emulator, if that makes any
difference.
One clue may be that the light_gray color background seems to render darker than the light_gray shape resource.
I doubt it makes a difference, but light_gray is:
<color name="light_gray">#FFCCCCCC</color>
You can't do this:
convertView.setBackgroundColor(R.color.light_gray);
setBackgroundColor does not take a resource id : http://developer.android.com/reference/android/view/View.html#setBackgroundColor(int)
So your getting some incidental behaviour that isn't doing what your expecting.
You would have to do:
convertView.setBackgroundColor(getResources().getColor(R.color.light_gray);
http://developer.android.com/reference/android/content/res/Resources.html#getColor(int)
What I want:
I'am using a Listview and I want to use this view with round corners.
Situation:
A listview without round corners :-( .
I use different examples to define a customShape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<corners
android:radius="30dp"/>
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
If I apply this customShape to the listview items(Textview) every entry in Listview have round corners. It is crazy!!! So the customShape.xml works but not with the border of the listview.
Any idea???
regard marcel
Get view by id for the list view.
ListView.setBackgroundResource(R.drawable.custom_shape);
Remove the background settings in the xml .
Put the custom_shape.xml in drawable folder. Remove the stroke component from it as it is not needed to round the corners