Listview issue with item background

Question

I've got problem with my ListView item's background, it's bigger than should be. Here is my background resource:

enter image description here

And it's screenshot from my device:

enter image description here

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:orientation="vertical"
android:background="@drawable/bg_nocar">
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="50dp"
    android:layout_marginLeft="6.67dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reservation"
        android:textStyle="bold"
        style="@style/reservation_text" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/reservation.1"
        style="@style/reservation_text" />
</LinearLayout>
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/reservation.selectclass"
    style="@style/reservation_selectclass_text"
    android:layout_marginTop="33.33dp"
    android:layout_marginLeft="6.67dp" />
<ListView 
    android:id="@id/android:list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="#00000000"
    android:dividerHeight="0.67dp" />
</LinearLayout>

That's my item layout:

    <LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/reservation_row"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/car_bg"
android:orientation="horizontal">
    <LinearLayout 
        android:layout_width="93.33dp"
        android:layout_height="98.67dp"
        android:orientation="vertical"
        android:layout_marginLeft="6.67dp"
        android:layout_marginTop="13.33dp">
        <TextView
            android:id="@+id/classname"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            style="@style/reservation_classname" />
        <TextView
            android:id="@+id/name"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            style="@style/reservation_name"
            android:layout_marginTop="16.67dp" />
    </LinearLayout>
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="98.67dp"
        android:orientation="vertical"
        android:layout_marginLeft="6.67dp"
        android:layout_marginTop="13.33dp">
        <ImageView
            android:id="@+id/img"
            android:layout_width="150dp"
            android:layout_height="93.33dp"
            android:layout_marginTop="6dp" />
        <TextView
            android:id="@+id/price"
            android:layout_width="30dp"
            android:layout_height="20dp"/>      
        <TextView
            android:id="@+id/item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone" />
    </LinearLayout>
</LinearLayout>

Why the background is so big?

Not Found The requested URL /bg_car.jpg was not found on this server. www.r-studio.com.pl — ByteMe, May 04 '12 at 18:40
HTC Sensation but also on another density (120 or 160) the background is big. — be4code, May 04 '12 at 19:12
http://stackoverflow.com/questions/2406172/android-how-to-prevent-image-from-being-scaled-in-imageview-or-imagebutton — Matt Wolfe, May 04 '12 at 19:25

score 1 · Accepted Answer · answered May 04 '12 at 19:21

1

Since you dont want your image to scale to the dimensions of the list item, you should not put it as a background.
Instead you can do this. Let the background be white (since your car_bg resource is all white with one logo). Then, your listview layout can look like this:

<RelativeLayout>  //background white
  <ImageView>  //Your car_bg with width and height set as wrap_content
  <LinearLayout>  //All the content that you previously had
</RelativeLayout>

This way your image will not get scaled and remain as the original one. That said, you must now take car of different screen dimensions yourself. You must have different densitiy images available for your car_bg resource.

answered May 04 '12 at 19:21

Urban

2,201
24
52

Could you tell me why background is scaled even if all elements are hidden? Is a way to set list item height? If I set it, it has different height. – be4code May 04 '12 at 19:28
By definition, the background needs to fill the entire space which it contains. So the image needs to be scaled if you use the background attribute. Id suggest you use an ImageView with RelativeLayout. Also, I think it would be much easier if you just cropped the whitespace off the image and kept the orange logo. Then set the background color attribute as white and use an imageview to put the orange logo. – Urban May 04 '12 at 19:32
Now the car_bg it's not scaled so it's good but list item still is too high. – be4code May 04 '12 at 19:33
Ok, firstly in your item layout change the layout_width of the parent linear layout to `wrap_content`. Might make a difference. Also, make sure the car images dont have any white border inside the image. Your listview will then have a height equal to its contents. – Urban May 04 '12 at 19:35
Still the same. Car images are: http://r-studio.com.pl/happyrent/files/1.jpg and http://r-studio.com.pl/happyrent/files/2.jpg – be4code May 04 '12 at 19:39
For the shadow, you could remove it from the image and generate it for the list item. Refer to this link for shadow: http://blog.donnfelker.com/2011/08/01/android-rounded-corners-with-a-beveldrop-shadow/ – Urban May 04 '12 at 19:39
Well, if you have used `wrap_content` in your list layout for height, then thats exactly what it should do. Whichever has the largest height will determine the height of the list. – Urban May 04 '12 at 19:42
Ok, I'll try this but I think the height will be the same as now. – be4code May 04 '12 at 19:43
I don't know how to do shadow for shape like in car_bg. After few changes (also I cropped the orange star), the list item height is smaller than before but still bigger than should be (it's about 10px). I think it wouldn't be better than now but if you've got any ideas I can try them. – be4code May 04 '12 at 21:14
Well the last thing you could try is to figure out which element is determining the height. You can do that by giving each element inside your list layout a border. This way you can see which element takes how much space and which has the largest height. If you find that the border of the element with greatest height coincides with the edges of the list element, then all is working as expected. But if you find that the list height is greater than the height of the largest element, then you might have margin problems. In this case, give each element a margin/padding of 0. – Urban May 04 '12 at 21:20
Even if all elements are hidden background is scaled – be4code May 04 '12 at 21:23
if you changed the background to white, and used an imageview for your orange logo, then there should be nothing to scale. What exactly is getting scaled? – Urban May 04 '12 at 21:25
Currently: http://www.r-studio.com.pl/Screenshot_2012-05-04-23-28-56.png The white background with shadow (the item background) is higher than in my photoshop project. Now it has 159px, in .psd it has 141px. – be4code May 04 '12 at 21:30
Well what I had suggested earlier was not to use an image for the white, but instead just specify the color white as the background color. Not a white image. Yes, this would remove the shadow, but you can create the shadow by other ways, one of which was in a link I had posted in one of the comments above. – Urban May 04 '12 at 21:39
Ok but still the height of list item will be greater than 153px and I don't know why. If all elements has 1dp the background is > 153px. I will try to do something tomorrow. Thanks for help. – be4code May 04 '12 at 21:42
The background now is not scaled and empty spaces between listview items I removed by android:dividerHeight="-10dp". It's not perfect but works :) – be4code May 05 '12 at 17:08
The reason why youre getting empty spaces between your list items is because you have given margin top and bottom on pretty much every element. Also I would strongly suggest you not to use fixed dimensions for your list items (as it is in the code in your question). Let the width and height be determined by the `wrap_content`. I'm sure if you take care of your margins, you'll fix the problem of the spacing between the list items. – Urban May 05 '12 at 17:39
Finally, problem was the background. – be4code May 09 '12 at 19:38

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Try scaling the ImageView to keep its aspect ratio instead of attempting to set its height/width manually. This is most likely why your ImageView appears to be stretched.

edited May 23 '17 at 12:13

Community

1
1

answered May 04 '12 at 19:13

Alex Lockwood

83,063
39
206
250

But there is no issue with ImageView but with background. The images are only for tests. – be4code May 04 '12 at 19:16
Ohhh, oops. Sorry, I thought the background was the `ImageView`, but it's not. OK, well then how about setting the root `LinearLayout` attribute `android:layout_height="fill_parent"` to `android:layout_height="wrap_content"`? Does that work? – Alex Lockwood May 04 '12 at 19:23
1

Also, it might be a better idea to crop all of the white background color in your background image. The `ListView` items have a white background by default, so it would be inefficient and unnecessary for the `ListView` to have to set a png background image for each of its items. Instead you could treat the orange star as an `ImageView` as you do with the pictures of the cars. – Alex Lockwood May 04 '12 at 19:25

Listview issue with item background

2 Answers2