Create custom ListView with shadow

Question

How could I create custom ListView like shown in this picture. I know I can make this happen with help of ScrollView and Layouts, but I need to do as a ListView. Each listview item go over each other. enter image description here

What do u mean with "Each listview item go over each other"? — Roberto Lombardini, Aug 06 '13 at 08:41
I mean that each item is above from his previous item like in picture. — fish40, Aug 06 '13 at 08:43
You have to make custom drawable using xml with top corner rounded. And set it to Custom Listview row. Simple :-) — user370305, Aug 06 '13 at 08:46
@user370305 it's not that easy because one row background have to be in the following row. — Roberto Lombardini, Aug 06 '13 at 08:48
@RobertoLombardini - Which will be added logic in getView() of Custom Adapter... — user370305, Aug 06 '13 at 08:50
@user370305 Look at the picture, the upper corner of row 2 have the background color of row 1, the upper corner of row 3 have the background color of row 2 and so on. This is not a simple custom row, you have to put something out of the getView that give you the 2 background color in the right order — Roberto Lombardini, Aug 06 '13 at 08:52
@RobertoLombardini - No, on Upper corners there is transparent background in rounded shape which will reflect the previous (above) rows background. — user370305, Aug 06 '13 at 08:57
@user370305 ok, but how do you make the two row overlap each other? — Roberto Lombardini, Aug 06 '13 at 08:58
Its a logic of getView(). Which returns next row at some top margin in negative. — user370305, Aug 06 '13 at 09:00
@user370305 you're right but the problem is how we can manage this. — fish40, Aug 06 '13 at 09:01
i don't know if it works but it sounds correct ^^. @fish40 try that way — Roberto Lombardini, Aug 06 '13 at 09:02
when u set the layout of your row u set `android:layout_marginTop="-5dp"` and something should happen ^^ — Roberto Lombardini, Aug 06 '13 at 09:04
another question http://stackoverflow.com/questions/17464258/how-to-create-android-listview-like-android-google-chrome-tab but no answer... :( — Pankaj Kumar, Aug 06 '13 at 09:05
@RobertoLombardini I tried unfortunately it doesn't work (( but thanks anyway. — fish40, Aug 06 '13 at 09:07
@PankajKumar I working on this already days I can't find good solution. I posted it again maybe someone could help me. — fish40, Aug 06 '13 at 09:09
@fish40 ok. Actually I remember the pic attached and thought this may answer before, but when I got the given link, sad. :( . Hope you will find the solution... — Pankaj Kumar, Aug 06 '13 at 09:12
just one last things, do you use `RelativeLayout` as row layout? Because without relative negative margin doesn't work — Roberto Lombardini, Aug 06 '13 at 09:23
:( then i don't know how to do it, i'll make some try at launch, i hope to find out something usefull — Roberto Lombardini, Aug 06 '13 at 09:39
@user370305 i see, nice one ^^. Anyway, for the next time, please be more accurate when u answer someone, even if it is only a comment, because somethings that is easy for u might not be obvious for someone else. — Roberto Lombardini, Aug 06 '13 at 12:04

score 3 · Answer 1 · edited May 23 '17 at 10:33

3

This may help you List view with custom view items with partially overlaps (Android)

edited May 23 '17 at 10:33

Community

1
1

answered Aug 06 '13 at 08:47

Hybrid Developer

2,320
1
34
55

it's not about colors. I mean the next listItem is above from previous item. – fish40 Aug 06 '13 at 08:57
That example use ScrollView ((( – fish40 Aug 06 '13 at 09:19

Bebin T.N · Answer 2 · 2013-08-06T12:55:56.290

I have this code like your Requirement. List may overlap by reducing the dividerheight to minus value

enter image description here

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

<ListView
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="#b5b5b5"
    android:dividerHeight="-5dp"
    android:listSelector="@drawable/list_selector" />

Then add background color to adapter according to the position.

public View getView(int position, View convertView, ViewGroup parent) {
    View vi=convertView;
    if(convertView==null)
        vi = inflater.inflate(R.layout.list_row, null);

    TextView title = (TextView)vi.findViewById(R.id.title); // title
    TextView artist = (TextView)vi.findViewById(R.id.artist); // artist name
    TextView duration = (TextView)vi.findViewById(R.id.duration); // duration
    ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image); // thumb image

    HashMap<String, String> song = new HashMap<String, String>();

    if(position % 2 ==0){
        vi.setBackgroundResource(R.drawable.listselector_1);
    }else if(position % 3 ==0){
        vi.setBackgroundResource(R.drawable.listselector_2);
    }else{
        vi.setBackgroundResource(R.drawable.listselector_3);
    }

    song = data.get(position);

    // Setting all values in listview
    title.setText(song.get(CustomizedListView.KEY_TITLE));
    artist.setText(song.get(CustomizedListView.KEY_ARTIST));
    duration.setText(song.get(CustomizedListView.KEY_DURATION));
    imageLoader.DisplayImage(song.get(CustomizedListView.KEY_THUMB_URL), thumb_image);
    return vi;
}

Otherwise you can use listselector images also as your requirement

score 1 · Accepted Answer · answered Aug 21 '13 at 08:17

Thank you guys for trying help me to solve this issue. I look every answer here and finally get i want. I think it will be better I put my code here so maybe someone it will be helpful. The only difference is that my created listview has also shadow in it.

Here is the code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:my_font="http://schemas.android.com/apk/res/com.Helix.android.SmartBonus"
                android:orientation="vertical"
                android:id="@+id/mainLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingTop="5dp"
                >
    <ImageView
            android:id="@+id/imageview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shadow_bg"
            android:visibility="visible"/>

    <RelativeLayout
            android:id="@+id/secondLayout"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:background="@drawable/drop_shadow"
            android:layout_below="@id/imageview">
        <ImageView
                android:id="@+id/companyImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/secret_logo_small"
                android:layout_marginRight="10dp"/>
        <TextView
                android:id="@+id/companyDescription"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/companyImageView"
                android:textColor="@android:color/white"
                android:layout_marginTop="7dp"
                my_font:ttf_name="300"
                android:text="Салон кросаты"/>
        <TextView
                android:id="@+id/companyName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/companyImageView"
                android:layout_below="@id/companyDescription"
                android:textColor="@android:color/white"
                my_font:ttf_name="300"
                android:text="Secret"/>
        <TextView
                android:id="@+id/companyPercentText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white"
                android:layout_marginTop="7dp"
                android:textSize="19sp"
                android:layout_marginRight="1dp"
                android:layout_toLeftOf="@+id/companyPercent"
                my_font:ttf_name="700"
                android:text="-20"/>
        <TextView
                android:id="@id/companyPercent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:textColor="@android:color/white"
                android:layout_marginTop="7dp"
                android:textSize="12sp"
                my_font:ttf_name="300"
                android:text="%"/>
        <ImageView
                android:id="@+id/companyPercentImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@id/companyPercent"
                android:layout_marginTop="7dp"
                android:textColor="@android:color/white"
                android:src="@drawable/percentage_devider"/>
        <TextView
                android:id="@+id/companyDistance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@id/companyPercentImage"
                android:textSize="16dp"
                android:textColor="#A57F1C"
                my_font:ttf_name="300"
                android:text="7m"/>
        <LinearLayout
                android:id="@+id/checkingButton"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/companyDistance"
                android:layout_marginTop="10dp"
                android:paddingRight="10dp"
                android:paddingLeft="10dp"
                android:focusable="false"
                android:background="@drawable/green_button_bg"
                android:visibility="gone">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textSize="16dp"
                    android:textColor="@android:color/white"
                    my_font:ttf_name="300"
                    android:text="Check-in"/>
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textSize="16dp"
                    android:layout_marginLeft="10dp"
                    android:textColor="@color/checkin_point_color"
                    android:layout_weight="1"
                    my_font:ttf_name="300"
                    android:text="@string/ten_point"/>
            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:src="@drawable/slak"
                    />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

adapter.

@Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder viewHolder;
        final Discount discount = getItem(i);
        Discount prev_discount = null;
        if (i > 0){
            prev_discount = getItem(i-1);
        }

        if (view == null){
            final LayoutInflater li = (LayoutInflater) mActivity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = li.inflate(R.layout.discount_data_item, viewGroup, false);

            viewHolder = new ViewHolder();
            viewHolder.logo = (ImageView)view.findViewById(R.id.companyImageView);
            viewHolder.name = (SmartBonus_TextView)view.findViewById(R.id.companyName);
            viewHolder.description = (SmartBonus_TextView)view.findViewById(R.id.companyDescription);
            viewHolder.percent =  (SmartBonus_TextView)view.findViewById(R.id.companyPercentText);
            viewHolder.distance =  (SmartBonus_TextView)view.findViewById(R.id.companyDistance);
            viewHolder.mainLayout = (RelativeLayout)view.findViewById(R.id.mainLayout);
            viewHolder.secondLayaout = (RelativeLayout)view.findViewById(R.id.secondLayout);

            view.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) view.getTag();
        }

        if (i == 0){
            viewHolder.mainLayout.setBackgroundColor(android.R.color.transparent);
            setRoundedBackground(viewHolder.secondLayaout, Color.parseColor(discount.getBackgroundColor()));
        } else {
            viewHolder.mainLayout.setBackgroundColor(Color.parseColor(prev_discount.getBackgroundColor()));
            setRoundedBackground(viewHolder.secondLayaout, Color.parseColor(discount.getBackgroundColor()));

        }


        return view;
    }

    private void setRoundedBackground(View view,int color){
        final GradientDrawable gradientDrawable = (GradientDrawable) view.getBackground().mutate();
        gradientDrawable.setColor(color);
        gradientDrawable.invalidateSelf();
    }

Here is the result enter image description here

score 0 · Answer 4 · answered Aug 06 '13 at 09:10

You should override getView method.
Sample code:

View getView(int position, View convertView, ViewGroup parent){
    Object data = getItem(positon);
    //usually data object should have type property
    if(data.type == TYPE1){
        return getLayoutInflater().inflate(R.layout.custom_xml1, null);
     }else (data.type == TYPE2){
        return getLayoutInflater().inflate(R.layout.custom_xml2, null);
     }else{
        return getLayoutInflater().inflate(R.layout.custom_xml, null);
     }
};

Note:You should reuse convertView object for performance.

user370305 · Answer 5 · 2013-08-06T11:36:14.077

Ok, As I have sort of time I manage to write few steps to achieve your task.

1. Make Custom drawable using xml in drawable folder with top corners have radius..

2. Now in your Listview attributes just define negative divider height 
   Like, android:dividerHeight="-20dp"

3. Set the Custom Drawable as a background of List row in getView().

Also its nice if you able to set color to drawable at dynamically for list row. (In getView() of Custom Adapter).

This what I have achieved from above steps:

enter image description here

Create custom ListView with shadow

5 Answers5