improve character setup design

Habitica/res/drawable/avatar_customization_category_bg.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+<item>
+    <shape android:shape="rectangle">
+        <solid android:color="@color/brand_200" />
+    </shape>
+</item>
+    <item android:left="0dp" android:right="0dp" android:gravity="bottom">
+        <bitmap android:src="@drawable/customization_shadow" />
+    </item>
+</layer-list>

Habitica/res/drawable/avatar_customization_subcategory_bg.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/brand_100" />
+        </shape>
+    </item>
+    <item android:left="0dp" android:right="0dp" android:gravity="bottom">
+        <bitmap android:src="@drawable/customization_shadow" />
+    </item>
+</layer-list>

Habitica/res/layout/avatar_setup_drawer.xml

@@ -1,14 +1,18 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<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="@color/brand_100">
+            android:background="@drawable/avatar_customization_subcategory_bg"
+            android:layout_alignParentTop="true">
+
         <android.support.design.widget.TabLayout
                 android:id="@+id/subcategory_tabs"
                 android:layout_width="match_parent"
@@ -20,7 +24,7 @@
                 app:tabGravity="center"
                 app:tabPaddingEnd="16dp"
                 app:tabPaddingStart="16dp"
-                 />
+                />
 
         <android.support.v7.widget.RecyclerView
                 android:id="@+id/customization_list"
@@ -33,10 +37,12 @@
     <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="@dimen/customization_drawer_category_height"
-            android:background="@color/brand_200"
+            android:background="@drawable/avatar_customization_category_bg"
             android:orientation="horizontal"
             android:gravity="center"
-            android:elevation="4dp">
+            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"
@@ -74,4 +80,13 @@
                 app:categoryTitle="@string/avatar_extras"
                 android:gravity="center"/>
     </LinearLayout>
-</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>

Habitica/res/values-h320dp/dimens.xml

@@ -2,5 +2,6 @@
 <resources>
     <dimen name="setup_vertical_spacing">8dp</dimen>
     <dimen name="customization_drawer_subcategory_height">120dp</dimen>
-    <dimen name="customization_drawer_category_height">80dp</dimen>
+    <dimen name="customization_drawer_category_height">90dp</dimen>
+    <dimen name="customization_drawer_caret_margin">81dp</dimen>
 </resources>

Habitica/res/values-h601dp/dimens.xml

@@ -3,4 +3,5 @@
     <dimen name="setup_vertical_spacing">20dp</dimen>
     <dimen name="customization_drawer_subcategory_height">130dp</dimen>
     <dimen name="customization_drawer_category_height">100dp</dimen>
+    <dimen name="customization_drawer_caret_margin">91dp</dimen>
 </resources>

Habitica/src/main/java/com/habitrpg/android/habitica/ui/adapter/setup/CustomizationSetupAdapter.java

@@ -145,7 +145,7 @@ public class CustomizationSetupAdapter extends RecyclerView.Adapter<RecyclerView
             if (customization.drawableId != null) {
                 imageView.setImageResource(customization.drawableId);
             } else if (customization.colorId != null) {
-                Drawable drawable = context.getDrawable(R.drawable.setup_customization_circle);
+                Drawable drawable = ContextCompat.getDrawable(context, R.drawable.setup_customization_circle);
                 if (drawable != null) {
                     drawable.setColorFilter(ContextCompat.getColor(context, customization.colorId), PorterDuff.Mode.MULTIPLY);
                 }

Habitica/src/main/java/com/habitrpg/android/habitica/ui/fragments/setup/AvatarSetupFragment.java

@@ -15,14 +15,19 @@ import com.magicmicky.habitrpgwrapper.lib.models.SetupCustomization;
 
 import org.greenrobot.eventbus.EventBus;
 
+import android.content.res.Resources;
+import android.os.Build;
 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.design.widget.TabLayout;
 import android.support.v7.widget.LinearLayoutManager;
 import android.support.v7.widget.RecyclerView;
+import android.util.TypedValue;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.ImageView;
+import android.widget.RelativeLayout;
 
 import java.util.Arrays;
 import java.util.Collections;
@@ -56,6 +61,9 @@ public class AvatarSetupFragment extends BaseFragment {
     AvatarCategoryView hairButton;
     @BindView(R.id.extras_button)
     AvatarCategoryView extrasButton;
+    @BindView(R.id.caret_view)
+    ImageView caretView;
+
     CustomizationSetupAdapter adapter;
     LinearLayoutManager layoutManager;
     @Inject
@@ -235,5 +243,17 @@ public class AvatarSetupFragment extends BaseFragment {
         }
         this.activeButton = button;
         this.activeButton.setActive(true);
+        int[] location = new int[2];
+        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)this.caretView.getLayoutParams();
+        this.activeButton.getLocationOnScreen(location);
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+            Resources r = getResources();
+            int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40, r.getDisplayMetrics());
+            params.setMarginStart(location[0]+px);
+            this.caretView.setLayoutParams(params);
+        } else {
+            caretView.setVisibility(View.GONE);
+        }
+
     }
 }