views:

59

answers:

2

I want to have an ImageView that is part of a listview row item, but that appears to both in and out of the row. is this possible? if so, how? many thanks in advance... alt text

+3  A: 

The answer is "not exactly," at least not explicitly in the way you mean, but you should be able to make your image appear to be outside the row by simply using a background image for the list items that looks like the edge of the list occurs a few pixels off from where it actually does. Then you can just right align the element you want to appear overflown, and add some right-hand padding/margins to the elements that you don't.

Yoni Samlan
i'm not sure how that would work as the height of the row could change...
Ben
I don't know if I was clear there; the image should be a child of the view you're using for the row, aligned top-right inside it. It will appear to overflow outside the box if you use a background (probably a ninepatch) for the list that contains the borders and whitespace, but with no padding area on the right (that is, the content area of the ninepatch goes flush to the right border). But because it's still a proper child of the list row, the overflow image will be oriented properly for each row, regardless of height.
Yoni Samlan
I was thinking there might be a way to do this using AbsoluteLayout, i realize that's deprecated, but perhaps it might work???
Ben
I'm currently looking at using a clipChildren or clipToPadding combination to have that image ignore the bounds of the row... any thoughts on that?
Ben
+1  A: 

I have this working now and i didnt have to mess with photoshop at all. I did it all using android xml.

the way to do it is to use a <layer-list> element and instead of using without using padding, like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
<item android:top="6dip" android:right="6dip" android:left="6dip">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:bottomRightRadius="2dip"
            android:bottomLeftRadius="2dip" android:topLeftRadius="6dip"
            android:topRightRadius="6dip" />
        <solid android:color="@color/list_view_outline" />

    </shape>
</item>
<item android:top="8dip" android:right="8dip" android:left="8dip">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:bottomRightRadius="2dip"
            android:bottomLeftRadius="2dip" android:topLeftRadius="6dip"
            android:topRightRadius="6dip" />
        <solid android:color="@android:color/white" />

        <stroke android:width="1dip" android:color="#BDBDBD" />
    </shape>
</item>

then just use a standard row layout for the list row:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="@+id/feed_list_row_content">
<ImageView android:id="@+id/author_image"
    android:layout_width="44dip" android:layout_height="44dip"
    android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
    android:src="@drawable/no_photo" android:layout_marginLeft="10dip"
    android:layout_marginTop="10dip" />
<TextView android:layout_width="wrap_content"
    android:layout_marginTop="10dip" android:layout_height="wrap_content"
    android:layout_toRightOf="@id/author_image" android:id="@+id/feed_message_content"
    android:layout_toLeftOf="@+id/action_button" />

<ImageView android:id="@id/action_button" android:src="@drawable/row_action"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:layout_alignParentRight="true" android:layout_marginTop="20dip" />

I then set the background in the custom list adapter getView() method as the top & bottom rows render differently from the middle rows.

if(position == 0)
        {
            holder.contentLayout.setBackgroundResource(R.drawable.top_row);
        } else if(position == posts.size() - 1)
        {
            holder.contentLayout.setBackgroundResource(R.drawable.bottom_row);
        } else {
            holder.contentLayout.setBackgroundResource(R.drawable.inner_row);
        }
Ben