ListView item as a progress bar - list

Question

I was wondering if someone can maybe help me with the following intent:
I created an app which simply displays a table. It shows a table head and beyond that a list view which contains several items.
Is it possible, that if one clicks on one of these items, a progress bar is shown which loads smoothely in a certain time interval (lets say 30 seconds) from left to right?
Please see my screenshot below, maybe it's easier to understand what I am trying to do:
Finally, I don't know if it helps, but let me attach some code as well. I shortened it a little, if something is missing for understanding (like the list class) or if I removed to much, please let me know:
public class TableActivity : Activity
{
ListView lv;
ListAdapter adapter = null;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
//...
lv = FindViewById<ListView>(Resource.Id.geraeteListView);
adapter = new ListAdapter(this, Resource.Layout.List, geraeteliste.CurrentGeraeteliste, Intent.GetStringExtra("ServerIP"))
{
parentActivity = this
};
lv.Adapter = adapter;
}
private async void OnItemClick(object sender, AdapterView.ItemClickEventArgs e)
{
if (geraeteliste.CurrentGeraeteliste[e.Position].bespielt == "J") return;
//…
await Task.Delay(0);
}
}
public class ListAdapter : ArrayAdapter
{
//...
public override View GetView(int position, View convertView, ViewGroup parent)
{
View v = convertView;
if (v == null)
{
LayoutInflater inflater = (LayoutInflater)Context.GetSystemService(Context.LayoutInflaterService);
v = inflater.Inflate(Resource.Layout.List, parent, false);
}
//...
v.FindViewById<ImageView>(Resource.Id.typeImageView).SetImageResource(Resource.Drawable.Icon);
v.FindViewById<TextView>(Resource.Id.numberTextView).Text = Geraetelist[position].geraeteplatz;
v.FindViewById<TextView>(Resource.Id.descriptionTextView).Text = Geraetelist[position].geraeteinformation;
ImageView iv = v.FindViewById<ImageView>(Resource.Id.bspImageView);
iv.SetImageResource(Geraetelist[position].bespielt == "N" ? Resource.Drawable.greenPoint : Resource.Drawable.redPoint);
//…
return v;
}
}
Can anyone maybe give me a short hint or something? How can I implement such a progress bar for every item on click?^^ Would be really happy for every helping effort.
Thanks in advance for every answer,
Best regards

Answer 1

Is it possible, that if one clicks on one of these items, a progress bar is shown which loads smoothly in a certain time interval (lets say 30 seconds) from left to right?
If you want to display progressbar when click Listview item, I do one sample for you, you can take a look:
1.Declare ListView layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" android:orientation="vertical">
<ListView
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ListView" />
</LinearLayout>
2.Declare list row layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar android:id="#+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" android:visibility="invisible"
style="#android:style/Widget.ProgressBar.Horizontal" />
</LinearLayout>
3.Define ListView Adapter
public class Post
{
public string title { get; set; }
public bool isselect { get; set; }
}
public class CusotmListAdapter : BaseAdapter<Post>
{
Activity context;
List<Post> list;
public CusotmListAdapter(Activity _context, List<Post> _list)
: base()
{
this.context = _context;
this.list = _list;
}
public override Post this[int position]
{
get { return list[position]; }
}
public override int Count
{
get { return list.Count; }
}
public override long GetItemId(int position)
{
return position;
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
View view = convertView;
// re-use an existing view, if one is available
// otherwise create a new one
if (view == null)
view = context.LayoutInflater.Inflate(Resource.Layout.ListItemRow, parent, false);
Post item = this[position];
view.FindViewById<TextView>(Resource.Id.textView1).Text = item.title;
if(item.isselect==true)
{
view.FindViewById<ProgressBar>(Resource.Id.progressBar1).Visibility = ViewStates.Visible;
}
else
{
view.FindViewById<ProgressBar>(Resource.Id.progressBar1).Visibility = ViewStates.Invisible;
}
return view;
}
}
4.Setting ListView Adapter
public class MainActivity : AppCompatActivity
{
private ListView listview;
List<Post> posts = new List<Post>();
private CusotmListAdapter adapter;
private int oldposition = -1;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
posts.Add(new Post() { title = "title 1", isselect = false });
posts.Add(new Post() { title = "title 2", isselect = false });
posts.Add(new Post() { title = "title 3", isselect = false });
posts.Add(new Post() { title = "title 4", isselect = false });
posts.Add(new Post() { title = "title 5", isselect = false });
posts.Add(new Post() { title = "title 6", isselect = false });
posts.Add(new Post() { title = "title 7", isselect = false });
posts.Add(new Post() { title = "title 8", isselect = false });
SetContentView(Resource.Layout.activity_main);
listview = FindViewById<ListView>(Resource.Id.ListView);
listview.ItemClick+= OnListItemClick;
adapter= new CusotmListAdapter(this, posts);
listview.Adapter = adapter;
}
private void OnListItemClick(object sender, AdapterView.ItemClickEventArgs e)
{
if(oldposition!=-1)
{
Post p1 = adapter[oldposition];
p1.isselect = false;
}
oldposition = e.Position;
Post p = adapter[e.Position];
p.isselect = true;
adapter.NotifyDataSetChanged();
}
}
Update
You can change some code in CusotmListAdapter GetView event:
public override View GetView(int position, View convertView, ViewGroup parent)
{
View view = convertView;
// re-use an existing view, if one is available
// otherwise create a new one
if (view == null)
view = context.LayoutInflater.Inflate(Resource.Layout.ListItemRow, parent, false);
Post item = this[position];
view.FindViewById<TextView>(Resource.Id.textView1).Text = item.title;
ProgressBar p = view.FindViewById<ProgressBar>(Resource.Id.progressBar1);
p.Max = 100;
p.Progress = 100;
//p.IncrementProgressBy(-10);
if(item.isselect==true)
{
view.FindViewById<ProgressBar>(Resource.Id.progressBar1).Visibility = ViewStates.Visible;
new Thread(new ThreadStart(delegate
{
while (p.Progress > 0)
{
p.Progress -= 20;
Thread.Sleep(1000);
}
})).Start();
}
else
{
view.FindViewById<ProgressBar>(Resource.Id.progressBar1).Visibility = ViewStates.Invisible;
}
return view;
}
Then please look at the screenshot:

Answer 2

It's clear that you are missing some knowledge on ListViews. This Xamarin university course has some examples and a video that explain the different components.
But basically, you can put your background progress bar as a View in your row AXML layout file, and depending on the value of the Progress property, that view can change widths.
Let me know if you have questions