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:
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
source to share
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>
source to share
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:
source to share
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
source to share