Begin header redesign

Habitica/res/drawable/layout_rounded_bg.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/white" />
+    <corners android:radius="@dimen/bar_radius"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>

Habitica/res/drawable/layout_rounded_bg_brand.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/brand_50" />
+    <corners android:radius="@dimen/bar_radius"/>
+    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
+</shape>

Habitica/res/layout/reward_item_card.xml

@@ -10,30 +10,22 @@
             type="Task" />
     </data>
 
-    <FrameLayout xmlns:app="http://schemas.android.com/apk/res-auto"
+    <LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        android:background="@color/white">
 
-        <android.support.v7.widget.CardView
+        <LinearLayout
             android:id="@+id/card_view"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginBottom="@dimen/cardMarginVertical"
-            android:layout_marginLeft="@dimen/cardMarginHorizontal"
-            android:layout_marginRight="@dimen/cardMarginHorizontal"
-            android:layout_marginTop="@dimen/cardMarginVertical"
-            app:cardCornerRadius="2dp"
-            app:cardElevation="2dp"
-            app:cardPreventCornerOverlap="false"
-            app:contentPadding="0dp">
+            android:layout_height="wrap_content">
 
             <RelativeLayout
                 android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:gravity="fill_horizontal|center_vertical|center_horizontal|fill|clip_vertical|fill_vertical|center|start|clip_horizontal|bottom|left|right|end|top">
+                android:layout_height="match_parent">
 
-
-                <CheckedTextView
+                <TextView
                     android:id="@+id/checkedTextView"
                     style="@style/CardTitle"
                     android:layout_width="wrap_content"
@@ -41,6 +33,8 @@
                     android:layout_alignParentTop="true"
                     android:layout_toEndOf="@+id/imageView3"
                     android:layout_toRightOf="@+id/imageView3"
+                    android:layout_toStartOf="@+id/btnReward"
+                    android:layout_toLeftOf="@+id/btnReward"
                     android:padding="5dp"
                     android:text="@{reward.text}" />
 
@@ -51,6 +45,8 @@
                     android:layout_height="wrap_content"
                     android:layout_alignLeft="@+id/checkedTextView"
                     android:layout_alignStart="@+id/checkedTextView"
+                    android:layout_alignRight="@+id/checkedTextView"
+                    android:layout_alignEnd="@+id/checkedTextView"
                     android:layout_below="@+id/checkedTextView"
                     android:maxLines="3"
                     android:minLines="2"
@@ -58,22 +54,13 @@
                     android:paddingRight="5dp"
                     android:text="@{reward.notes}" />
 
-                <View
-                    android:id="@+id/separator"
-                    android:layout_width="fill_parent"
-                    android:layout_height="1dp"
-                    android:layout_alignBottom="@+id/textView6"
-                    android:layout_alignParentLeft="true"
-                    android:layout_alignParentStart="true"
-                    android:background="@android:color/darker_gray" />
-
                 <Button
                     android:id="@+id/btnReward"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_alignParentEnd="true"
                     android:layout_alignParentRight="true"
-                    android:layout_below="@+id/separator"
+                    android:layout_centerVertical="true"
                     android:drawableLeft="@drawable/gold"
                     android:maxHeight="10dp"
                     android:text="@{String.valueOf(reward.value)}" />
@@ -83,16 +70,16 @@
                     android:layout_width="65dp"
                     android:padding="5dp"
                     android:layout_height="wrap_content"
-                    android:layout_above="@+id/separator"
                     android:layout_alignParentLeft="true"
                     android:layout_alignParentStart="true"
-                    android:layout_alignParentTop="true"
+                    android:layout_centerVertical="true"
                     android:layout_marginLeft="5dp"
+                    android:layout_marginStart="5dp"
                     app:imageName="@{reward.id}"/>
 
             </RelativeLayout>
-        </android.support.v7.widget.CardView>
+        </LinearLayout>
 
-    </FrameLayout>
+    </LinearLayout>
 
 </layout>

Habitica/res/layout/value_bar.xml

@@ -6,6 +6,9 @@
         <variable
             name="text"
             type="String" />
+        <variable
+            name="description"
+            type="String" />
 
         <variable
             name="textColor"
@@ -19,55 +22,60 @@
             name="weightToHide"
             type="float" />
 
-        <variable
-            name="barBackgroundColor"
-            type="int" />
-
         <variable
             name="barForegroundColor"
             type="int" />
     </data>
 
-    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
-        android:layout_height="@dimen/bar_size"
+        android:layout_height="wrap_content"
         android:layout_marginBottom="@dimen/bar_padding"
-        android:background="@{barBackgroundColor}">
+        android:orientation="vertical">
 
         <LinearLayout
             android:layout_width="wrap_content"
-            android:layout_height="match_parent"
-            android:background="@drawable/border"
+            android:layout_height="@dimen/bar_size"
             android:orientation="horizontal"
+            android:background="@drawable/layout_rounded_bg_brand"
             android:weightSum="1">
 
             <View
-                android:id="@+id/V_HPBar"
+                android:id="@+id/bar"
                 android:layout_width="0dip"
-                android:layout_height="@dimen/bar_inner_size"
-                android:layout_margin="2dip"
+                android:layout_height="match_parent"
                 android:layout_weight="1"
-                android:background="@{barForegroundColor}"
+                app:rounded_background="@{barForegroundColor}"
                 app:layout_weight_anim="@{weightToShow}" />
 
             <View
                 android:layout_width="0dip"
-                android:layout_height="wrap_content"
+                android:layout_height="match_parent"
                 android:layout_weight="0"
-                android:padding="2dip"
                 app:layout_weight_anim="@{weightToHide}" />
         </LinearLayout>
 
-
-        <TextView
-            android:id="@+id/TV_HP"
+        <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="@dimen/bar_size"
-            android:background="@drawable/border"
-            android:gravity="center|right"
-            android:paddingRight="5dp"
-            android:textColor="@{textColor}"
-            android:text="@{text}" />
-    </FrameLayout>
+            android:layout_height="wrap_content">
+            <TextView
+                android:id="@+id/TV_value"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:textColor="@color/brand_500"
+                android:text="@{text}"
+                android:layout_weight="1"
+                />
+            <TextView
+                android:id="@+id/TV_label"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:gravity="center|right"
+                android:textColor="@color/brand_500"
+                android:text="@{description}"
+                android:layout_weight="1" />
+        </LinearLayout>
+
+    </LinearLayout>
 </layout>

Habitica/res/values/colors.xml

@@ -1,15 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="hpColor">#da5353</color>
-    <color name="hpColorBackground">#fcf0f0</color>
-    <color name="hpColorForeground">#250808</color>
-    <color name="xpColor">#ffcc35</color>
-    <color name="xpColorBackground">#fffbf0</color>
-    <color name="xpColorForeground">#2e2200</color>
-    <color name="mpColor">#4781e7</color>
-    <color name="mpColorBackground">#eff4fd</color>
-    <color name="mpColorForeground">#051228</color>
-    <color name="brand">#7a12f8</color>
+
+    <color name="brand_50">#36205D</color>
+    <color name="brand_100">#432874</color>
+    <color name="brand_200">#4F2A93</color>
+    <color name="brand_300">#6133B4</color>
+    <color name="brand_400">#9A62FF</color>
+    <color name="brand_500">#BDA8FF</color>
+    <color name="brand">@color/brand_100</color>
 
     <!--  HabitRPG task color -->
     <color name="worst_100">#E6B8AF</color>
@@ -43,6 +41,16 @@
     <color name="completed">#D9D9D9</color>
     <color name="completed_btn">#989898</color>
 
+    <color name="hpColor">@color/worse_100</color>
+    <color name="hpColorBackground">#fcf0f0</color>
+    <color name="hpColorForeground">#250808</color>
+    <color name="xpColor">@color/neutral_100</color>
+    <color name="xpColorBackground">#fffbf0</color>
+    <color name="xpColorForeground">#2e2200</color>
+    <color name="mpColor">@color/best_100</color>
+    <color name="mpColorBackground">#eff4fd</color>
+    <color name="mpColorForeground">#051228</color>
+
     <color name="changelog.note">#ffcf42</color>
 
     <!-- Cards -->
@@ -79,7 +87,7 @@
     <color name="material_drawer_dark_divider">#1FFFFFFF</color>
     <!-- MaterialDrawer DEFAULT DARK drawer colors -->
     <color name="material_drawer_dark_selected">#202020</color>
-    <color name="material_drawer_dark_selected_text">@color/material_drawer_primary</color>
+    <color name="material_drawer_dark_selected_text">@color/brand</color>
     <color name="material_drawer_dark_header_selection_text">#FFF</color>
 
     <color name="checkbox_tint_color">#ffd8dcdd</color>

Habitica/res/values/dimens.xml

@@ -11,9 +11,9 @@
     <dimen name="card_small_text">14.0sp</dimen>
     <dimen name="card_padding">16.0dip</dimen>
 
-	<dimen name="bar_size">29dp</dimen>
-	<dimen name="bar_inner_size">25dp</dimen>
+	<dimen name="bar_size">15dp</dimen>
 	<dimen name="bar_padding">5dp</dimen>
+	<dimen name="bar_radius">5dp</dimen>
 	<dimen name="avatar_width">140dp</dimen>
     <dimen name="avatar_height">147dp</dimen>
     <dimen name="header_height">70dp</dimen>
@@ -37,5 +37,5 @@
 
 	<dimen name="hairline_height">0.5dp</dimen>
 	<dimen name="checklist_divider_width">14dp</dimen>
-	<dimen name="checklist_wrapper_width">35dp</dimen>
+	<dimen name="checklist_wrapper_width">36dp</dimen>
 </resources>

Habitica/res/values/strings.xml

@@ -6,8 +6,9 @@
     <string name="action_refresh">Refresh</string>
     <string name="plus_sign">+</string>
     <string name="minus_sign">-</string>
-    <string name="XP_default">XP</string>
-    <string name="HP_default">HP</string>
+    <string name="XP_default">Experience</string>
+    <string name="HP_default">Health</string>
+    <string name="MP_default">Mana</string>
     <string name="format_todo_date">%1$d-%2$d-%3$d</string>
     <string name="new_task_added_message">Task added</string>
     <string name="lvlup">LVL UP!</string>
@@ -106,7 +107,6 @@
         
     <string name="close">Close</string>
     <string name="SP_last_seen_version">SP_last_version</string>
-    <string name="MP_default">MP</string>
     <string name="update_btn">Update</string>
 
     <string name="about.title">About</string>

Habitica/src/com/habitrpg/android/habitica/ui/AvatarWithBarsViewModel.java

@@ -3,6 +3,9 @@ package com.habitrpg.android.habitica.ui;
 import android.content.Context;
 import android.databinding.BindingAdapter;
 import android.databinding.DataBindingUtil;
+import android.graphics.PorterDuff;
+import android.graphics.drawable.Drawable;
+import android.os.Build;
 import android.util.Log;
 import android.view.View;
 import android.view.animation.Animation;
@@ -52,31 +55,25 @@ public class AvatarWithBarsViewModel {
         mpBar = DataBindingUtil.bind(v.findViewById(R.id.mpBar));
 
 
-        SetValueBar(hpBar, 50, 50, context.getString(R.string.HP_default),
-                res.getColor(R.color.hpColor), res.getColor(R.color.hpColorBackground), res.getColor(R.color.hpColorForeground));
-        SetValueBar(xpBar, 1, 1, context.getString(R.string.XP_default),
-                res.getColor(R.color.xpColor), res.getColor(R.color.xpColorBackground), res.getColor(R.color.xpColorForeground));
-        SetValueBar(mpBar, 100, 100, context.getString(R.string.MP_default),
-                res.getColor(R.color.mpColor), res.getColor(R.color.mpColorBackground),res.getColor(R.color.mpColorForeground));
+        SetValueBar(hpBar, 50, 50, context.getString(R.string.HP_default), R.color.hpColor);
+        SetValueBar(xpBar, 1, 1, context.getString(R.string.XP_default), R.color.xpColor);
+        SetValueBar(mpBar, 100, 100, context.getString(R.string.MP_default), R.color.mpColor);
     }
 
     public void UpdateData(HabitRPGUser user)
     {
         Stats stats = user.getStats();
         
-        SetValueBar(hpBar, stats.getHp().floatValue(), stats.getMaxHealth(), context.getString(R.string.HP_default),
-                res.getColor(R.color.hpColor), res.getColor(R.color.hpColorBackground), res.getColor(R.color.hpColorForeground));
-        SetValueBar(xpBar, stats.getExp().floatValue(), stats.getToNextLevel(), context.getString(R.string.XP_default),
-                res.getColor(R.color.xpColor), res.getColor(R.color.xpColorBackground), res.getColor(R.color.xpColorForeground));
-        SetValueBar(mpBar, stats.getMp().floatValue(), stats.getMaxMP(), context.getString(R.string.MP_default),
-                res.getColor(R.color.mpColor), res.getColor(R.color.mpColorBackground),res.getColor(R.color.mpColorForeground));
+        SetValueBar(hpBar, stats.getHp().floatValue(), stats.getMaxHealth(), context.getString(R.string.HP_default), context.getResources().getColor(R.color.hpColor));
+        SetValueBar(xpBar, stats.getExp().floatValue(), stats.getToNextLevel(), context.getString(R.string.XP_default), context.getResources().getColor(R.color.xpColor));
+        SetValueBar(mpBar, stats.getMp().floatValue(), stats.getMaxMP(), context.getString(R.string.MP_default), context.getResources().getColor(R.color.mpColor));
 
         new UserPicture(user, this.context).setPictureOn(image);
     }
 
     // Layout_Weight don't accepts 0.7/0.3 to have 70% filled instead it shows the 30% , so I had to switch the values
     // but on a 1.0/0.0 which switches to 0.0/1.0 it shows the blank part full size...
-    private void SetValueBar(ValueBarBinding valueBar, float value, float valueMax, String postString, int color, int colorBackground, int textColor)
+    private void SetValueBar(ValueBarBinding valueBar, float value, float valueMax, String description, int color)
     {
         double percent = Math.min(1, value / valueMax);
 
@@ -91,17 +88,16 @@ public class AvatarWithBarsViewModel {
             valueBar.setWeightToHide((float) percent);
         }
 
-        valueBar.setText((int) value + "/" + (int) valueMax + " " + postString);
+        valueBar.setText((int) value + "/" + (int) valueMax);
+        valueBar.setDescription(description);
         valueBar.setBarForegroundColor(color);
-        valueBar.setBarBackgroundColor(colorBackground);
-        valueBar.setTextColor(textColor);
     }
 
     @BindingAdapter("app:layout_weight")
     public static void setLayoutWeight(View view, float weight) {
         LinearLayout.LayoutParams layout = (LinearLayout.LayoutParams)view.getLayoutParams();
 
-        Log.d("setLayoutWeight", weight+"");
+        Log.d("setLayoutWeight", weight + "");
 
         layout.weight = weight;
 
@@ -116,6 +112,17 @@ public class AvatarWithBarsViewModel {
         view.startAnimation(anim);
     }
 
+    @BindingAdapter("app:rounded_background")
+    public static void setRoundedBackground(View view, int color) {
+        Drawable drawable = view.getResources().getDrawable(R.drawable.layout_rounded_bg);
+        drawable.setColorFilter(color, PorterDuff.Mode.MULTIPLY);
+        if(Build.VERSION.SDK_INT < 16) {
+            view.setBackgroundDrawable(drawable);
+        } else {
+            view.setBackground(drawable);
+        }
+    }
+
     public static class LayoutWeightAnimation extends Animation {
         float targetWeight;
         float initializeWeight;