Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Progressbar on the background of list item

I want background of a list item to work like a progress bar. For example, like in tTorrent file list: enter image description here

This is how it is done now: I use a relativelayout and two linearlyouts. One has textviews and another has two views which work as progressbar. "Progress" is changed using weight of the views, which is set dynamically in getView method. Then linearlayout with textviews is brought on the front. Here's the code:

Layout:

<LinearLayout
    android:padding="5dp"
    android:id="@+id/catStatsRowLay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!-- textviews on the front -->
    ...
</LinearLayout>

<!-- views which work as progress bar -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignBottom="@id/catStatsRowLay"
    android:layout_alignLeft="@id/catStatsRowLay"
    android:layout_alignRight="@id/catStatsRowLay"
    android:layout_alignTop="@id/catStatsRowLay"
    android:layout_below="@id/catStatsRowLay"
    android:layoutDirection="rtl"
    android:orientation="horizontal" >

    <View
        android:id="@+id/catStatsRowBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".70"
        android:background="#cc550000" />

    <View
        android:id="@+id/catStatsRowBar2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".30"
        android:background="@android:color/transparent" />
</LinearLayout>

</RelativeLayout>

And getView method:

public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View rowView = inflater.inflate(R.layout.categories_stats_list_row,
                parent, false);

        //filling textviews
        ...

        //getting bars that work as progressbar
        View bar = (View) rowView.findViewById(R.id.catStatsRowBar);
        View bar2 = (View) rowView.findViewById(R.id.catStatsRowBar2);
        //calculating and setting weights
        float percent = cs.getBarWeight();
        LinearLayout.LayoutParams barPar = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT, (1-percent));
        LinearLayout.LayoutParams bar2Par = new LinearLayout.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, percent);

        bar.setLayoutParams(barPar);
        bar2.setLayoutParams(bar2Par);
        bar.setBackgroundColor(cs.getColor(position));
        //bringing LinearLayout with textviews to front
        LinearLayout ll = (LinearLayout) rowView
                .findViewById(R.id.catStatsRowLay);
        ll.bringToFront();

        return rowView;
    }

It perfectly works on 4.2.2 and lower devices (screenshot below).

enter image description here

The problem: 4.3 and higher (both emulators and devices) do not show "progress" views. I tried not bringing linearlayout with textviews to the front, setting weights to constants, changing linearlayout's aligments - no result, "progress" views are not shown. How can I make it work on new versions of android?

like image 594
Kirill Avatar asked Jan 27 '14 10:01

Kirill


1 Answers

Solution was easy.

After replacing RelativeLayout on FrameLayout everything seems to work properly now, both devices and emulators 4.3+

Code for getView method is the same, except for bringing LinearLayout with textviews to front - there is no need for it now.

Code for layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
 >
 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="rtl"
    android:orientation="horizontal" >


    <View
        android:id="@+id/catStatsRowBar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".70"
        android:background="#cc550000" />

    <View
        android:id="@+id/catStatsRowBar2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight=".30"
        android:background="@android:color/transparent" />
</LinearLayout>

<LinearLayout
    android:padding="5dp"
    android:id="@+id/catStatsRowLay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!-- textviews on the front -->

</LinearLayout>    

</FrameLayout> 

For some reason, relativelayout works in a different way on 4.3+, I still dont know why exactly.

Thanks to Gabor from ttorrent team that showed me the right way.

like image 50
Kirill Avatar answered Nov 15 '22 21:11

Kirill