<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="225dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="10dp"
    android:background="@drawable/bg_button_stroke"
    android:orientation="vertical"
    android:paddingStart="@dimen/my_sub_padding"
    android:paddingTop="10dp"
    android:paddingEnd="@dimen/my_sub_padding"
    android:paddingBottom="10dp">

    <com.seatel.mobilehall.util.customview.CustomTextView
        android:id="@+id/ctv_name_balance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Basic Balance"
        android:textColor="@color/colorPrimary"
        android:textSize="18sp" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <FrameLayout
            android:id="@+id/layout_progress_bar"
            android:layout_width="105dp"
            android:layout_height="105dp"
            android:layout_gravity="center"
            android:layout_marginTop="@dimen/my_sub_padding"
            android:clipChildren="true">

            <com.seatel.mobilehall.util.circleprogress.ArcProgress
                android:id="@+id/view_progress_bar"
                android:layout_width="105dp"
                android:layout_height="105dp"
                app:arc_dataleft_text="@string/remaining_balance"
                app:arc_dataleft_text_color="#4d4a4b"
                app:arc_dataleft_text_size="10sp"
                app:arc_finished_color="@color/colorPrimary"
                app:arc_prefix_text="$"
                app:arc_stroke_width="10dp"
                app:arc_suffix_text_color="@color/colorPrimary"
                app:arc_suffix_text_padding="2dp"
                app:arc_suffix_text_size="12sp"
                app:arc_text_color="@color/colorPrimary"
                app:arc_text_size="16sp"
                app:arc_unfinished_color="@color/colorUnfinishedBar" />

        </FrameLayout>

        <LinearLayout
            android:id="@+id/view_topup_balance_no_circle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:orientation="vertical"
            android:visibility="invisible">

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/balance_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="8dp"
                android:text="$0"
                android:textColor="@color/colorPrimary"
                android:textSize="17sp"
                android:textStyle="bold" />

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="2dp"
                android:text="@string/remaining_balance"
                android:textColor="#4d4a4b"
                android:textSize="10dp" />

        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="center_horizontal">

        <RelativeLayout
            android:id="@+id/view_renew_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:visibility="invisible">


            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/title_renew_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Renew Date"
                android:textColor="@android:color/black" />

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/point_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_toEndOf="@+id/title_renew_date"
                android:text=":"
                android:textColor="@android:color/black" />

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/ctv_date_renew"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_toEndOf="@+id/point_3"
                android:text="Jan 31, 2018"
                android:textColor="@color/colorPrimary" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/view_subscribe_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:visibility="visible">


            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/title_subscribe_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/subscription"
                android:textColor="@android:color/black" />

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/point_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_toEndOf="@+id/title_subscribe_date"
                android:text=":"
                android:textColor="@android:color/black" />

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/ctv_date_subscribe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_toEndOf="@+id/point_2"
                android:text="Jan 31, 2018"
                android:textColor="@color/colorPrimary" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/view_expired_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/view_subscribe_date"
            android:layout_centerHorizontal="true"
            android:visibility="visible">


            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/title_expired_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/expires"
                android:textColor="@android:color/black" />

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/point"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_toEndOf="@+id/title_expired_date"
                android:text=":"
                android:textColor="@android:color/black" />

            <com.seatel.mobilehall.util.customview.CustomTextView
                android:id="@+id/ctv_date_expired"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_toEndOf="@+id/point"
                android:text="Jan 31, 2018"
                android:textColor="@color/colorPrimary" />
        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>