<?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"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

    <LinearLayout
            android:id="@+id/subcategory_layout"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="@dimen/customization_drawer_subcategory_height"
            android:background="@drawable/avatar_customization_subcategory_bg"
            android:layout_alignParentTop="true">

        <com.google.android.material.tabs.TabLayout
                android:id="@+id/subcategory_tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="?colorAccent"
                app:tabIndicatorHeight="2dp"
                app:tabTextColor="@color/white_50_alpha"
                app:tabSelectedTextColor="@color/white"
            android:background="@color/brand"
                app:tabGravity="center"
                app:tabPaddingEnd="24dp"
                app:tabPaddingStart="24dp"
                />

        <com.habitrpg.android.habitica.ui.helpers.RecyclerViewEmptySupport
                android:id="@+id/customization_list"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_gravity="center_horizontal"/>
    </LinearLayout>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/customization_drawer_category_height"
            android:background="@drawable/avatar_customization_category_bg"
            android:orientation="horizontal"
            android:gravity="center"
            android:layout_below="@id/subcategory_layout"
            android:elevation="4dp"
            android:id="@+id/category_layout">

        <com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
                android:id="@+id/body_button"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                app:iconDrawable="@drawable/icon_body"
                app:categoryTitle="@string/avatar_body"
                android:gravity="center"/>

        <com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
                android:id="@+id/skin_button"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                app:iconDrawable="@drawable/icon_skin"
                app:categoryTitle="@string/avatar_skin"
                android:gravity="center"/>

        <com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
                android:id="@+id/hair_button"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                app:iconDrawable="@drawable/icon_hair"
                app:categoryTitle="@string/avatar_hair"
                android:gravity="center"/>

        <com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
                android:id="@+id/extras_button"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                app:iconDrawable="@drawable/icon_extras"
                app:categoryTitle="@string/avatar_extras"
                android:gravity="center"/>
    </LinearLayout>

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/customization_selection_caret"
                android:id="@+id/caret_view"
                android:layout_alignBottom="@id/category_layout"
                android:layout_marginBottom="@dimen/customization_drawer_caret_margin"
                android:elevation="6dp"/>
</RelativeLayout>
