Filling the color of the list box to some percentage

I am trying to fill a list view string up to some percentage with color. This should be done after the user clicks on any item in the list.

Difficult to deduce, so see the image below: enter image description here

Please tell me how to proceed, I don't know how this can be implemented. I am thinking about adding a view after a click event by the user and setting the background color of that view.

Please let me know if any other way is possible.

thank

+3


source to share


4 answers


I think one of the options is described below:

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

  • One TextView (for displaying text options) -> By default displayed
  • One view (for drawing progress if the user clicks on the list) -> The default is invisible.

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

Also, I believe you need to create your own custom list (handle correctly if the list should show text or progress). This custom list should extend BaseAdapter and should override required methods.

So, after clicking any option, you can change your adapter (you have to inform the adapter that the user has installed in some option about this). Based on this new information, the adapter is able to hide all text elements and only show the in-progress views.

Below is the sample code: You can add security checks (null poiter) to the adapter. I used a simple array. You can go to ArrayList and add / remove items dynamically. Also, you can only set progress values ​​inside the "OnItemClickListener". This is just an 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>

      

+2


source


You can use this layout for every element:

<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 changing the weight attribute of the largest View

, you can specify the width of the colors as a percentage. This can be done by changing the views LayoutParams

inside the adapter ListView

. There's a lot of tutorials on custom adapters and LayoutParam here on SO.



This is how it would look:

f1HqM.png

+3


source


You will need a colored component to show the effect.

You can have a view with a set background color and added below other views.

Or you can override your view and draw a color trough onDraw (Canvas).

+1


source


Suppose you are going to place two views that need to be aligned to the left, and its width needs to be a percentage

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

Refer to Linear Layout and Weight in Android

Refer to this Percentage Width in RelativeLayout

+1


source







All Articles