Creating a custom listview with shadow

Question

How to create a custom ListView as shown in this image. I know that I can do this with ScrollView and layouts, but I need to do this as a ListView . Each list item scans each other.

Answer 1

Thanks guys for helping me solve this problem. I look at every answer here and finally want to. I think it would be better if I put my code, so maybe it will be useful to someone. The only difference is that there is also a shadow in my created list.

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

Answer 2

This can help you View a list with custom partially overlapping view elements (Android)

Answer 3

I have this code, as well as your requirement. The list may overlap by decreasing the dividerheight to minus

 <?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 the background color to the 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 as well as your requirement.

Answer 4

You must override the getView method.
Code example:

 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. To improve performance, you should reuse convertView .

Answer 5

Good. Since I have time, I manage to write a 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(). 

It is also nice if you can dynamically set the color for drawing for a list line. (In the getView() user adapter).

This is what I achieved from the above steps: