Relative Layout as Progress Bar [Android]
<p>Here is my problem :</p>

<p>I create a list of achievements like this </p>

<p><img src="https://i.stack.imgur.com/mKdb0.png" alt="The goal"></p>

<p>Actually, i have this kind of elements in my list view of achievements </p>

<p><img src="https://i.stack.imgur.com/kzeji.png" alt="The result I have for the moment"></p>

<p>Here is the xml code of my element in the list :</p>

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/relative_layout_rewards"&gt;



    &lt;LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dip"
        android:orientation="horizontal"
        android:id="@+id/layout_title_rewards"&gt;




        &lt;TextView
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:text=""
            android:textSize="13sp"
            android:padding="10dip"
            android:id="@+id/title_rewards"
            android:maxLines="2"
            android:textStyle="bold"/&gt;


        &lt;TextView
            android:id="@+id/number_rewards"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center"
            android:textSize="12sp"
            android:padding="10dip"
            android:text=""
            android:textStyle="italic"/&gt;



    &lt;/LinearLayout&gt;

    &lt;View
        android:id="@+id/rewards_progressbar"
        android:layout_below="@+id/layout_title_rewards"
        android:layout_width="match_parent"
        android:layout_height="3dip"
        android:background="@color/blue"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/&gt;

    &lt;RelativeLayout
        android:id="@+id/layout_rewards_progress_bar_view"
        android:layout_width="100dip"
        android:layout_height="60dip"
        android:background="@color/blue"&gt;


        &lt;TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/layout_rewards_title_rewards_text"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:textSize="13sp"
            android:padding="10dip"
            android:maxLines="2"
            android:textStyle="bold"
            android:text="5 points scored in online game"
            android:textColor="@color/white"
            android:ellipsize="end"/&gt;

        &lt;TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/layout_rewards_points_rewards_text"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/layout_rewards_title_rewards_text"
            android:layout_toEndOf="@+id/layout_rewards_title_rewards_text"
            android:gravity="center_horizontal"
            android:textSize="12sp"
            android:padding="10dip"
            android:text="2 / 5"
            android:textStyle="italic"
            android:textColor="@color/white"/&gt;
    &lt;/RelativeLayout&gt;


&lt;/RelativeLayout&gt;
</code></pre>

<p>For the second layout that come over the first, I just adjust the width in java according to the percent of the achievement.</p>

<p>I would like the same result as the first picture.</p>

<p>Any ideas ?</p>

<p>Thank you.</p>