Android listview item display text over image using array adapter

Question

I have overloaded the getView method of listview to populate custom style of list item.

This is what currently it looks like:!!

enter image description here

Red color is to just show the background of listview item

Here I have used 3 controls: Imageview for image, 2 text views (one top, one bottom).

Problem here is the height of listview item is getting increased. I want two textviews over the image not above or below. To someextent I know the root cause of this problem but don't know how to fix it.

Here is the layout of listview item:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="5dp"   >

  <ImageView android:id="@+id/imgIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="5dp" 
    android:scaleType="fitCenter"/>

   <TextView android:id="@+id/txtTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="top"
    android:textStyle="bold"
    android:textSize="20sp"
    android:textColor="#FFFFFF"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="2dp"
    android:layout_alignLeft="@+id/imgIcon"
    android:layout_alignTop="@+id/imgIcon"
    android:layout_alignBottom="@+id/imgIcon"/>

   <TextView android:id="@+id/txtTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="bottom"
    android:textStyle="bold"
    android:textSize="18sp"
    android:textColor="#FFFFFF"
    android:layout_marginLeft="10dp"
    android:layout_marginBottom="5dp"
    android:layout_alignLeft="@+id/imgIcon"
    android:layout_alignTop="@+id/imgIcon"
    android:layout_alignBottom="@+id/imgIcon"/>

The problem is i'm using png image for Imageview and their size is getting increased in some aspect ratio. In case I hard code the height of listview item layout then, specifically on my phone screen size, things start appearing good but on some different screen size things get totally worse (which makes sense too).

enter image description here

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" 
android:layout_width="fill_parent"
android:layout_height="70dp"
android:padding="5dp"   >

Would be great if someone can explain about how to do it. Main problem is to display text over an image (and image is not same). Thanks.

Update: My major problem is I don't have the bit vector of image instead a PNG and it tries to scale up the image. (setting scale type to center-fit could be an option but would it work on background resourcE?. Here is the output if I set image as a background for listview item and two texts over it. enter image description here

Have you thought about creating a layout file for your view, setting your image as background, and just placing your textviews where you want them? — confused_at_times, Apr 12 '13 at 16:32

score 1 · Answer 1 · answered Apr 12 '13 at 16:34

If you're using solid colors as the backgrounds, and you intend to support a variety of screen sizes, I would think it might be easier to use a background color fill on the text views, with the text views stacked and aligned such that there's no borders. Then it would not have any stacking issues (a simple Linear Layout would work) and it would be scalable with no processing of images.

score 1 · Accepted Answer · answered Apr 12 '13 at 16:51

1

Ok, when calling getView() in your CustomArrayAdaptor, rather than set the ImageView bitmap to the image you have (what you are currently doing, I believe), instead call View.setBackgroundResource(R.drawable.yourimage.png) on your view after you have infalted it. The equivalent in xml is below:

android:background="@drawable/yourimage".

If you need more information, let me know.

answered Apr 12 '13 at 16:51

confused_at_times

539
3
13

Yeah. I am just trying that right now. Hopefully it will work. Wait for 5-10 mins for an update :) – Rohit Apr 12 '13 at 16:56
Cool. One thing, you don't need the image file extension. That was a typo. – confused_at_times Apr 12 '13 at 17:01
Is the parent layout_height set to wrap_content? – confused_at_times Apr 12 '13 at 17:28
You mean listview_item_style file (specified above) or listview itself (in activity) or the height of activity? – Rohit Apr 12 '13 at 17:34
The ListView item xml relative layout. You also want to be using match_parent for layout_width, as I believe fill_parent is deprecated. – confused_at_times Apr 12 '13 at 17:37
Tried setting all three combination but did not work. Same distorted image in all three cases: – Rohit Apr 12 '13 at 17:37
By the way thanks @confused_at_times for helping me over this – Rohit Apr 12 '13 at 17:39
I'm not sure, but a .9.PNG image is what you may be after to resolve this. You'll have to search for more info on it. Good luck. – confused_at_times Apr 12 '13 at 17:41

Android listview item display text over image using array adapter

2 Answers2

Linked