android - レイアウトでステッパーを作成する方法は?

Question

上の画像のようなステッパーを作りたいです。以下は私が試したコードです。円の下のテキストは円の中心にある必要があります。次のアクティビティがナビゲートされると、各行の色を変更する必要があります。また、次のアクティビティに移動するときに、各円の色も変更する必要があります。

  <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/padding_title"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="visible">


            <View
                android:id="@+id/circle_one"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_one"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_one"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_two"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_one"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_two"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_two"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_three"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_two"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_three"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_three"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_four"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_three"
                android:background="@drawable/ic_gray_hollow_circle" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/circle_one"
                android:text="Pay"
                android:textColor="#dbdbdb" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/circle_two"
                android:layout_toEndOf="@id/line_one"
                android:text="Amount"
                android:textColor="#dbdbdb" />

        </RelativeLayout>

どんな助けでも大歓迎です。