Horizontal single bicolor histogram

Question

What is the easiest way to create a horizontal single line graph in Android with two color representations? something like that

The amount of 64%, obviously, can be increased to 100% in a timely manner (animation ??? :() is it SVG or images, or what?

Answer 1

This arrangement reaches higher, adjusting the width of p3 TextView (red background) in the code as a percentage of the width of p1 TextView (blue background) changing p4 TextView text to the current percentage (consider what to do, as the percentage reaches 100%, since the labels will overlap. suggest setting the text value to p3 after a certain limit, say 85%, and then p4 hides. I suggest using AsyncTask (or another way to thread the thread) if the percentage increases gradually to see the UI updates. Also pay attention to Android Tween animations. >

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="50dp" android:orientation="horizontal" android:padding="5dp"> <TextView android:id="@+id/bar" android:layout_width="5dp" android:layout_height="25dp" android:background="#FF000000" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingTop="5dp"> <TextView android:id="@+id/p1" android:layout_width="220dp" android:layout_height="wrap_content" android:background="#FF00FFFF" /> <TextView android:id="@+id/p2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/p1" android:text="100%" /> <TextView android:id="@+id/p3" android:layout_width="140dp" android:layout_height="wrap_content" android:background="#FFFF0000" android:gravity="end" /> <TextView android:id="@+id/p4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/p3" android:text="64%" /> </RelativeLayout> </LinearLayout>