<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="@dimen/dp_350"
    android:layout_height="@dimen/dp_220">

    <com.qmuiteam.qmui.widget.QMUIRadiusImageView2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/front_card_bg"
        app:qmui_corner_radius="@dimen/dp_12" />

    <FrameLayout
        android:id="@+id/credit_card_chip_bg"
        android:layout_width="@dimen/dp_50"
        android:layout_height="@dimen/dp_50"
        android:layout_margin="@dimen/dp_22"
        android:background="@drawable/credit_card_chip_yellow">

        <View
            android:layout_width="@dimen/dp_36"
            android:layout_height="@dimen/dp_36"
            android:layout_gravity="center"
            android:background="@drawable/credit_card_chip_yellow_inner" />
    </FrameLayout>


    <com.abbidot.tracker.widget.TypefaceTextView
        android:id="@+id/credit_card_number_text"
        style="@style/my_TextView_style"
        android:layout_alignStart="@id/credit_card_chip_bg"
        android:layout_centerInParent="true"
        android:layout_marginEnd="@dimen/dp_24"
        android:gravity="start"
        android:maxLength="@integer/max_length20"
        android:shadowColor="@color/black50"
        android:shadowDx="1"
        android:shadowDy="1"
        android:shadowRadius="2"
        android:textColor="@color/white"
        android:textSize="@dimen/textSize18"
        app:typeface="@string/credit_card_font"
        tools:text="2344 41111 25454 4545" />


    <com.abbidot.tracker.widget.TypefaceTextView
        android:id="@+id/card_name_label"
        style="@style/my_TextView_style"
        android:layout_width="wrap_content"
        android:layout_below="@id/credit_card_number_text"
        android:layout_alignStart="@id/credit_card_chip_bg"
        android:layout_marginTop="@dimen/dp_24"
        android:text="@string/card_holder"
        android:textColor="@android:color/darker_gray"
        android:textSize="@dimen/textSize12"
        app:typeface="@string/roboto_bold_font" />


    <com.abbidot.tracker.widget.TypefaceTextView
        android:id="@+id/front_card_holder_name"
        style="@style/my_TextView_style"
        android:layout_width="wrap_content"
        android:layout_below="@id/card_name_label"
        android:layout_alignStart="@id/credit_card_chip_bg"
        android:layout_marginTop="@dimen/dp_2"
        android:layout_toStartOf="@id/front_card_expiry"
        android:gravity="start"
        android:hint="@string/txt_cardholder_name"
        android:shadowColor="@color/black50"
        android:shadowDx="1"
        android:shadowDy="1"
        android:shadowRadius="2"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="@dimen/textSize16"
        app:typeface="@string/roboto_bold_font" />


    <com.abbidot.tracker.widget.TypefaceTextView
        android:id="@+id/front_card_expiry"
        style="@style/my_TextView_style"
        android:layout_width="wrap_content"
        android:layout_alignTop="@id/front_card_holder_name"
        android:layout_alignEnd="@id/credit_card_number_text"
        android:layout_marginEnd="@dimen/dp_60"
        android:gravity="start"
        android:hint="@string/txt_validity_card"
        android:shadowColor="@color/black50"
        android:shadowDx="1"
        android:shadowDy="1"
        android:shadowRadius="2"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="@dimen/textSize16"
        app:typeface="@string/roboto_bold_font" />

    <com.abbidot.tracker.widget.TypefaceTextView
        android:id="@+id/card_expiry_label"
        style="@style/my_TextView_style"
        android:layout_width="wrap_content"
        android:layout_alignStart="@id/front_card_expiry"
        android:layout_alignTop="@id/card_name_label"
        android:layout_marginEnd="@dimen/dp_4"
        android:text="@string/expiry"
        android:textColor="@android:color/darker_gray"
        android:textSize="@dimen/textSize12"
        app:typeface="@string/roboto_bold_font" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/credit_card_logo_img"
        android:layout_width="@dimen/dp_50"
        android:layout_height="@dimen/dp_50"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="@dimen/dp_16" />


</RelativeLayout>