<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="320dp"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="6dp"
        android:layout_marginBottom="0dp"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/btnSkinTone0"
            style="@style/emoji_picker_skin_tone_button"
            android:background="#fde12c"
            android:contentDescription="@string/skin_tone_unspecified"
            android:src="@drawable/check_mark" />

        <ImageButton
            android:id="@+id/btnSkinTone1"
            style="@style/emoji_picker_skin_tone_button"
            android:background="#f7dece"
            android:contentDescription="@string/skin_tone_light" />

        <ImageButton
            android:id="@+id/btnSkinTone2"
            style="@style/emoji_picker_skin_tone_button"
            android:background="#f3d2a2"
            android:contentDescription="@string/skin_tone_medium_light" />

        <ImageButton
            android:id="@+id/btnSkinTone3"
            style="@style/emoji_picker_skin_tone_button"
            android:background="#d5ab88"
            android:contentDescription="@string/skin_tone_medium" />

        <ImageButton
            android:id="@+id/btnSkinTone4"
            style="@style/emoji_picker_skin_tone_button"
            android:background="#af7e57"
            android:contentDescription="@string/skin_tone_medium_dark" />

        <ImageButton
            android:id="@+id/btnSkinTone5"
            style="@style/emoji_picker_skin_tone_button"
            android:background="#7c533e"
            android:contentDescription="@string/skin_tone_dark" />
    </com.google.android.flexbox.FlexboxLayout>

    <EditText
        android:id="@+id/etFilter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="6dp"
        android:layout_marginBottom="2dp"
        android:hint="@string/search_emojis"
        android:importantForAccessibility="no"
        android:importantForAutofill="no"
        android:inputType="text" />

    <HorizontalScrollView
        android:id="@+id/svCategories"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:clipToPadding="false"
        android:fadeScrollbars="false"
        android:fadingEdge="horizontal"
        android:fadingEdgeLength="32dp"
        android:requiresFadingEdge="horizontal"
        android:scrollbars="horizontal">

        <LinearLayout
            android:id="@+id/llCategories"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingBottom="4dp"
            android:paddingEnd="6dp"
            android:paddingStart="6dp" />
    </HorizontalScrollView>

    <jp.juggler.subwaytooter.view.GestureInterceptor
        android:id="@+id/giGrid"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvGrid"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false"
            android:fadeScrollbars="false"
            android:minHeight="200dp"
            android:padding="6dp"
            android:scrollbarStyle="outsideOverlay"
            android:scrollbars="vertical" />
    </jp.juggler.subwaytooter.view.GestureInterceptor>
</LinearLayout>
