android - Horizontal Single Bar Graph with Two color representation

Question

What is the easiest way to create a horizontal single bar Graph in Android with two colors representations? something like this

The amount 64% could obviously get increased up to 100% timely manner (animation??? :( ) is it SVG or Image Views or how?

Answer 1

这个布局实现了上面，在代码中调整 p3 TextView 宽度（红色背景）作为 p1 TextView 宽度（蓝色背景）的百分比将 p4 TextView 文本更改为当前百分比（考虑当百分比达到 100% 因为标签会重叠，建议设置p3 上的文本值在一定限制后，比如 85%，然后隐藏 p4。如果逐渐增加百分比以查看 UI 更新，我建议使用 AsyncTask（或其他线程方法）。另请参阅 Android Tween Animation。

<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>