Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android image in listview that thinks "outside" the box

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

like image 410
Ben Avatar asked Feb 26 '23 19:02

Ben


2 Answers

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.

like image 78
Yoni Samlan Avatar answered Mar 05 '23 16:03

Yoni Samlan


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">
<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);
        }
like image 23
Ben Avatar answered Mar 05 '23 18:03

Ben