Android percentage bar with info popup

Question

I have to create a view like below in my app. Can anyone give some idea how to create it? The color, percentage, text must be dynamic.

Answer 1

Why not defining it as a normal xml-layout like this?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/progress_done"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="0.3"
        android:orientation="vertical">

        <TextView
            android:id="@+id/progress_text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:background="#FF33B5E5"
            android:text="Review" />

        <TextView
            android:id="@+id/progress_done_percentage"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:gravity="center"
            android:background="#FF33B5E5"
            android:text="30%"
            android:singleLine="true" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/progress_todo"
        android:layout_height="wrap_content"
        android:layout_width="0dip"
        android:layout_weight="0.7"
        android:orientation="vertical">

        <TextView
            android:id="@+id/progress_todo_text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:background="#FFFFBB33"
            android:text="Go Ahead" />

        <TextView
            android:id="@+id/progress_todo_percentage"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:gravity="center"
            android:background="#FFFFBB33"
            android:text="70%"
            android:singleLine="true" />

    </LinearLayout>

</LinearLayout>

You just have to put your bubbles in as background-images. Then you can access the views per id in your code and change text, color and the weights accordingly.

Edit: just noticed, you want the "Recent" and "Go ahead" as popups. Easy. Set them to android:visibility="gone" or "invisible" (whatever fits you best) and then back to android:visibility="visible" into the onClickListener or onTouchListener or whatever of the textviews progress_done_percentage and progress_todo_percentage. Don't forget to set android:clickable="true" for them.