Filling listview row's color to some percentage

Question

I am trying to fill the list view's row to some percent with a color. This should be done after user clicks on any of the list items.

It is hard to exlain so please see the below image:

Please tell me how to proceed, I do not have any idea how can this be implemented. I am thinking about adding a view after click event by user and setting the background color of this view.

Please let me know if any other way is possible.

Thanks

Answer 1

I think one option is described below:

I would created a List view and for each item in the list, I would create two Views:

1. One TextView (to show the text options) -> Default is visible
2. One View (to draw progress if user click in the list) -> Default is invisible.

Note: This simple View with progress will have same height for TextView. It is fully colored with background color (blue for example). Then, you can set how long this view should be by setting its weight (from 0 to 100). Weight will be dinamically changed in the adapter. Other properties you can set in layout resource file (list_view_each_row.xml).

Also, I believe you have to create your own custom list adapter (to handle properly if list should display text or progress). This custom list should extend BaseAdapter and should override mandatory methods.

So, after clicking in any option, you can change your adapter (you should inform your adapter that user cliecked in some option). Based on this new information, adapter can hide all TextViews and display only the Views with progress.

Below is a example code: You can add security checks (null poiter) in the adapter. I used a simple array. You can change to ArrayList and add/removes items dinamically. Also, you can set progress values only inside "OnItemClickListener". It is just a example.

MainActivity

public class MainActivity extends Activity {

    private MyCustomListAdapter adapter; 

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ((ListView) findViewById(R.id.list_view)).setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // Force list view to populate its content again (now, with progress instead of text)
                adapter.setIfUserAlreadyClickedOption(true);
                adapter.notifyDataSetChanged();
            }
        });

        adapter = new MyCustomListAdapter();

        // Set click to false (user did not clicked yet)
        adapter.setIfUserAlreadyClickedOption(false);

        // Set text and progress
        adapter.setOptions(new String []{"Option1", "Option2", "Option3"});
        adapter.setProgressBarValues(new float [] {50,75,25});
        ((ListView)findViewById(R.id.list_view)).setAdapter(adapter);
    }
}

MyCustomListAdapter.java

public class MyCustomListAdapter extends BaseAdapter {

    private boolean userAlreadyCliced;
    private String [] stringTexts;
    private float [] progressBarValues;

    public MyCustomListAdapter() {
        userAlreadyCliced = false;
    }

    public void setIfUserAlreadyClickedOption(boolean clicked) {
        userAlreadyCliced = clicked;
    }

    public void setOptions(String  [] text) {
        stringTexts = text;
    }

    public void setProgressBarValues(float [] values) {
        progressBarValues = values;
    }

    @Override
    public int getCount() {
        return stringTexts.length;
    }

    @Override
    public Object getItem(int position) {
        return stringTexts[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View view, ViewGroup parentViewGroup) {
        if(view == null) {
            view = LayoutInflater.from(parentViewGroup.getContext()).inflate(R.layout.list_view_each_row, parentViewGroup, false);
        }

        if(userAlreadyCliced) {
            // Hide Text
            view.findViewById(R.id.progress_view).setVisibility(View.VISIBLE);

            // Show Text and set progress
            ((LinearLayout.LayoutParams) view.findViewById(R.id.progress_view).getLayoutParams()).weight = progressBarValues[position];
            view.findViewById(R.id.text_view).setVisibility(View.GONE);
        } else {
            // Hide Progress
            view.findViewById(R.id.progress_view).setVisibility(View.GONE);

            // Show and set text
            view.findViewById(R.id.text_view).setVisibility(View.VISIBLE);
            ((TextView)view.findViewById(R.id.text_view)).setText(stringTexts[position]);
        }       
        return view;
    }
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

list_view_each_row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100" >

   <View
       android:id="@+id/progress_view"
       android:background="#0000FF"
       android:layout_width="0dp"
       android:layout_height="40dp"/>

    <TextView
        android:id="@+id/text_view"
        android:visibility="visible"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

</LinearLayout>

Answer 2

You will need a colored component to show your effect.

You can have a View with it background color set and added under the other views.

Or, you can override your View and draw the color trough onDraw(Canvas).

Answer 3

Let us assume you are going to put a two view which needs to be left aligned and its width should be in percentage

you can use "android:layout_weight" to make one bigger and one smaller

Refer this Linear Layout and weight in Android

Refer this Percentage width in a RelativeLayout

Answer 4

You could use this layout for each item:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="100"
        android:baselineAligned="false">
        <View
            android:layout_weight="50"
            android:background="#0080FF"
            android:layout_width="0dp"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <TextView
        android:text="@string/hello_world"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"/>
</RelativeLayout>

Then by modifying the weight attribute of the inner-most View, you can specify the colors width in percent. That can be done by modifying the views LayoutParams inside of the ListView's adapter. There plenty of tutorials on custom adapters and LayoutParam here on SO.

Here's how it would look: