CODEWITHSUNDEEP
androidandroid-listview
Bob
Bob

Reputation: 2616

drawing on top of a listview

I am trying to make a listview appear to fade to black towards the top of it. Essentially I want to turn something like this:

original list

in to something like this:

desired effect

I tried two different approaches to this: The first one was to override the onDraw() of the ListView, this did not work, my "extra" drawing happened behind the listView. The second approach was to put another view on top of the listView, this looks right, but if the user tries to scroll the list by touching the screen where the view is it does not scroll, it seems like the view consumes the touchevent, so about a third of the list is untouchable.

Any tips on how I can implement this?

Upvotes: 2

Views: 348

Answers (1)

prijupaul
prijupaul

Reputation: 2086

You can assign the listitem background in a customised view. In getview (of adapter class) based on the item position. Create a gradient in xml and increase the alpha value based on the position.

This is the peice of code which is working for me.

listItem.xml

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

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:minHeight="64dp">    
<TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="17sp"
        android:textColor="@android:color/white"
        android:id="@+id/textView"/>

 </RelativeLayout>

ItemAdapter.java

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View rowView = inflater.inflate(rowResourceId, parent, false);
    TextView textView = (TextView) rowView.findViewById(R.id.textView);

    int id = Integer.parseInt(Ids[position]);
    textView.setText(Model.GetbyId(id).name);

   // this is the main idea behind the UX look n feel.
    rowView.setBackgroundColor(context.getResources().getColor(android.R.color.black));
    textView.setAlpha((float) position/Ids.length);

    return rowView;

}

Please feel free to use holder design pattern in the getView. This is just a proof of concept.

Upvotes: 2

Related Questions