standard header layouting, flexible avatar radius, code cleanups, dynamic avatar sizing

res/layout/drawer_header.xml

@@ -1,4 +1,5 @@
-<?xml version="1.0" encoding="utf-8"?><!--
+<?xml version="1.0" encoding="utf-8"?>
+<!--
   ownCloud Android client application
 
   Copyright (C) 2016 ownCloud Inc.
@@ -20,7 +21,7 @@
               android:layout_height="@dimen/nav_drawer_header_height"
               android:background="@color/drawer_header_color">
 
-    <LinearLayout
+    <RelativeLayout
         android:id="@+id/drawer_active_user"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -30,63 +31,69 @@
 
         <ImageView
             android:id="@+id/drawer_usericon"
-            android:layout_width="32dp"
-            android:layout_height="32dp"
+            android:layout_width="@dimen/nav_drawer_header_avatar"
+            android:layout_height="@dimen/nav_drawer_header_avatar"
             android:layout_gravity="center_vertical"
             android:src="@drawable/ic_account_circle"
-            android:padding="0dp"
-            android:layout_margin="0dp"
+            android:layout_marginBottom="@dimen/standard_half_margin"
             />
 
         <LinearLayout
-            android:layout_width="0dp"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_weight="1"
-            android:layout_gravity="top"
-            android:paddingLeft="@dimen/standard_half_padding"
-            android:paddingRight="@dimen/standard_half_padding"
-            android:orientation="vertical">
+            android:layout_below="@+id/drawer_usericon"
+            >
 
-            <TextView
-                android:id="@+id/drawer_username"
-                android:layout_width="match_parent"
+            <LinearLayout
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:ellipsize="end"
-                android:singleLine="true"
-                android:shadowColor="@color/black"
-                android:shadowDx="0.5"
-                android:shadowDy="0"
-                android:shadowRadius="2"
-                android:textColor="@android:color/white"
-                android:textSize="14sp"
-                android:text="@string/app_name"
-                android:textStyle="bold"/>
+                android:layout_gravity="center_vertical"
+                android:layout_weight="1"
+                android:orientation="vertical"
+                android:paddingRight="@dimen/standard_half_padding">
 
-            <TextView
-                android:id="@+id/drawer_username_full"
-                android:layout_width="match_parent"
+                <TextView
+                    android:id="@+id/drawer_username"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:ellipsize="end"
+                    android:shadowColor="@color/black"
+                    android:shadowDx="0.5"
+                    android:shadowDy="0"
+                    android:shadowRadius="2"
+                    android:singleLine="true"
+                    android:text="@string/app_name"
+                    android:textColor="@android:color/white"
+                    android:textSize="14sp"
+                    android:textStyle="bold"/>
+
+                <TextView
+                    android:id="@+id/drawer_username_full"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:ellipsize="end"
+                    android:lines="1"
+                    android:maxLines="1"
+                    android:shadowColor="@color/black"
+                    android:shadowDx="0.5"
+                    android:shadowDy="0"
+                    android:shadowRadius="2"
+                    android:text="@string/app_name"
+                    android:textColor="@android:color/white"
+                    android:textSize="12sp"/>
+
+            </LinearLayout>
+
+            <ImageView
+                android:id="@+id/drawer_account_chooser_toogle"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:ellipsize="end"
-                android:lines="1"
-                android:maxLines="1"
-                android:shadowColor="@color/black"
-                android:shadowDx="0.5"
-                android:shadowDy="0"
-                android:shadowRadius="2"
-                android:textColor="@android:color/white"
-                android:textSize="12sp"
-                android:text="@string/app_name"/>
+                android:layout_gravity="bottom"
+                android:contentDescription="@string/drawer_manage_accounts"
+                android:src="@drawable/ic_down"/>
 
         </LinearLayout>
 
-        <ImageView
-            android:id="@+id/drawer_account_chooser_toogle"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:contentDescription="@string/drawer_manage_accounts"
-            android:src="@drawable/ic_down"
-            android:layout_gravity="center_vertical"/>
-
-    </LinearLayout>
+    </RelativeLayout>
 
 </LinearLayout>

res/values-sw360dp/dims.xml

@@ -17,6 +17,9 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <resources>
-    <!-- Default screen margins, per the Android Design guidelines. -->
-    <dimen name="nav_drawer_header_height">164dp</dimen>
+  <!-- Default screen margins, per the Android Design guidelines. -->
+  <dimen name="nav_drawer_header_height">164dp</dimen>
+  <dimen name="nav_drawer_header_avatar">64dp</dimen>
+  <!-- avatar radius needs to 1/2 of the avatar dp value -->
+  <dimen name="nav_drawer_header_avatar_radius">32px</dimen>
 </resources>

res/values/dims.xml

@@ -22,6 +22,9 @@
     <dimen name="activity_vertical_margin">@dimen/standard_padding</dimen>
     <dimen name="nav_drawer_width">260dp</dimen>
     <dimen name="nav_drawer_header_height">140dp</dimen>
+    <dimen name="nav_drawer_header_avatar">56dp</dimen>
+    <!-- avatar radius needs to 1/2 of the avatar dp value -->
+    <dimen name="nav_drawer_header_avatar_radius">28px</dimen>
 
     <dimen name="file_icon_size">32dp</dimen>
     <dimen name="file_icon_size_grid">128dp</dimen>

src/com/owncloud/android/ui/TextDrawable.java

@@ -1,3 +1,23 @@
+/**
+ *   ownCloud Android client application
+ *
+ *   @author Andy Scherzinger
+ *   @author Tobias Kaminsiky
+ *   Copyright (C) 2016 ownCloud Inc.
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License version 2,
+ *   as published by the Free Software Foundation.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details.
+ *
+ *   You should have received a copy of the GNU General Public License
+ *   along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
 package com.owncloud.android.ui;
 
 import android.graphics.Canvas;
@@ -8,38 +28,73 @@ import android.graphics.PixelFormat;
 import android.graphics.drawable.Drawable;
 
 /**
- * Created by tobi on 24.05.15.
+ * A Drawable object that draws text (1 letter) on top of a circular/filled background.
  */
 public class TextDrawable extends Drawable {
 
-    private final String text;
-    private final Paint paint;
-    private final Paint bg;
+    private String text;
+    private Paint paint;
+    private Paint bg;
+    private float radius;
+    private float textX;
+    private float textY;
 
+    /**
+     * Create a TextDrawable with a standard radius.
+     *
+     * @param text the text to be rendered
+     * @param r    rgb red value
+     * @param g    rgb green value
+     * @param b    rgb blue value
+     */
     public TextDrawable(String text, int r, int g, int b) {
+        init(text, r, g, b, 40);
+    }
+
+    /**
+     * Create a TextDrawable with the given radius.
+     *
+     * @param text   the text to be rendered
+     * @param r      rgb red value
+     * @param g      rgb green value
+     * @param b      rgb blue value
+     * @param radius circle radius
+     */
+    public TextDrawable(String text, int r, int g, int b, float radius) {
+        init(text, r, g, b, radius);
+    }
 
+    /**
+     * initializes the TextDrawable.
+     *
+     * @param text   the text to be rendered
+     * @param r      rgb red value
+     * @param g      rgb green value
+     * @param b      rgb blue value
+     * @param radius circle radius
+     */
+    private void init(String text, int r, int g, int b, float radius) {
+        this.radius = radius;
         this.text = text;
-        Integer color = Color.rgb(r, g, b);
+        this.textX = (float) (radius * 0.5);
+        this.textY = (float) (radius * 1.5);
 
         bg = new Paint();
         bg.setStyle(Paint.Style.FILL);
         bg.setAntiAlias(true);
-        bg.setColor(color);
+        bg.setColor(Color.rgb(r, g, b));
 
         paint = new Paint();
         paint.setColor(Color.WHITE);
-        paint.setTextSize(60);
+        paint.setTextSize((float) (radius * 1.5));
         paint.setAntiAlias(true);
         paint.setFakeBoldText(true);
     }
 
     @Override
     public void draw(Canvas canvas) {
-        //float[] radii = {radius, radius, radius, radius, radius, radius, radius, radius};
-        //new RoundRectShape(radii, null, null);
-        canvas.drawCircle(40, 40, 40, bg);
-        //canvas.drawRect(0, -20, 20, 40, bg);
-        canvas.drawText(text, 20, 60, paint);
+        canvas.drawCircle(radius, radius, radius, bg);
+        canvas.drawText(text, textX, textY, paint);
     }
 
     @Override

src/com/owncloud/android/ui/activity/DrawerActivity.java

@@ -25,10 +25,12 @@ import android.accounts.AccountManagerFuture;
 import android.content.Intent;
 import android.content.res.Configuration;
 import android.os.Bundle;
+import android.support.annotation.NonNull;
 import android.support.design.widget.NavigationView;
 import android.support.v4.view.GravityCompat;
 import android.support.v4.widget.DrawerLayout;
 import android.support.v7.app.ActionBarDrawerToggle;
+import android.util.TypedValue;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
@@ -43,6 +45,9 @@ import com.owncloud.android.lib.common.utils.Log_OC;
 import com.owncloud.android.ui.TextDrawable;
 import com.owncloud.android.utils.BitmapUtils;
 
+import java.io.UnsupportedEncodingException;
+import java.security.NoSuchAlgorithmException;
+
 /**
  * Base class to handle setup of the drawer implementation.
  */
@@ -51,6 +56,8 @@ public abstract class DrawerActivity extends ToolbarActivity {
     private static final String KEY_IS_ACCOUNT_CHOOSER_ACTIVE = "IS_ACCOUNT_CHOOSER_ACTIVE";
     private static final String KEY_CHECKED_MENU_ITEM = "CHECKED_MENU_ITEM";
     private static final int ACTION_MANAGE_ACCOUNTS = 101;
+    private static final int MENU_ORDER_ACCOUNT = 1;
+    private static final int MENU_ORDER_ACCOUNT_FUNCTION = 2;
 
     /**
      * Reference to the drawer layout.
@@ -68,7 +75,7 @@ public abstract class DrawerActivity extends ToolbarActivity {
     private NavigationView mNavigationView;
 
     /**
-     * Reference to the account chooser toogle.
+     * Reference to the account chooser toggle.
      */
     private ImageView mAccountChooserToggle;
 
@@ -274,21 +281,29 @@ public abstract class DrawerActivity extends ToolbarActivity {
         // add all accounts to list
         for (int i = 0; i < accounts.length; i++) {
             try {
-                int[] rgb = BitmapUtils.calculateRGB(accounts[i].name);
-                TextDrawable icon = new TextDrawable(accounts[i].name.substring(0, 1).toUpperCase()
-                        , rgb[0], rgb[1], rgb[2]);
-                mNavigationView.getMenu().add(R.id.drawer_menu_accounts, Menu.NONE, 1, accounts[i].name).setIcon(icon);
+                mNavigationView.getMenu().add(
+                        R.id.drawer_menu_accounts,
+                        Menu.NONE,
+                        MENU_ORDER_ACCOUNT,
+                        accounts[i].name)
+                        .setIcon(createAvatar(accounts[i].name, 16));
             } catch (Exception e) {
                 Log_OC.e(TAG, "Error calculating RGB value for account menu item.", e);
-                mNavigationView.getMenu().add(R.id.drawer_menu_accounts, Menu.NONE, 1, accounts[i].name).setIcon(R
-                        .drawable.ic_account_circle);
+                mNavigationView.getMenu().add(
+                        R.id.drawer_menu_accounts,
+                        Menu.NONE,
+                        MENU_ORDER_ACCOUNT,
+                        accounts[i].name)
+                        .setIcon(R.drawable.ic_account_circle);
             }
         }
 
         // re-add add-account and manage-accounts
-        mNavigationView.getMenu().add(R.id.drawer_menu_accounts, R.id.drawer_menu_account_add, 2,
+        mNavigationView.getMenu().add(R.id.drawer_menu_accounts, R.id.drawer_menu_account_add,
+                MENU_ORDER_ACCOUNT_FUNCTION,
                 getResources().getString(R.string.prefs_add_account)).setIcon(R.drawable.ic_account_plus);
-        mNavigationView.getMenu().add(R.id.drawer_menu_accounts, R.id.drawer_menu_account_manage, 2,
+        mNavigationView.getMenu().add(R.id.drawer_menu_accounts, R.id.drawer_menu_account_manage,
+                MENU_ORDER_ACCOUNT_FUNCTION,
                 getResources().getString(R.string.drawer_manage_accounts)).setIcon(R.drawable.ic_settings);
 
         // adding sets menu group back to visible, so safety check and setting invisible
@@ -320,21 +335,20 @@ public abstract class DrawerActivity extends ToolbarActivity {
      */
     protected void setUsernameInDrawer(String accountName) {
         if (mDrawerLayout != null && accountName != null) {
-            TextView username = (TextView) ((NavigationView) findViewById(R.id.nav_view))
-                    .getHeaderView(0).findViewById(R.id.drawer_username);
-            TextView usernameFull = (TextView) ((NavigationView) findViewById(R.id.nav_view))
-                    .getHeaderView(0).findViewById(R.id.drawer_username_full);
+            TextView username = (TextView) findNavigationViewChildById(R.id.drawer_username);
+            TextView usernameFull = (TextView) findNavigationViewChildById(R.id.drawer_username_full);
             usernameFull.setText(accountName);
             int lastAtPos = accountName.lastIndexOf("@");
             username.setText(accountName.substring(0, lastAtPos));
 
-            ImageView userIcon = (ImageView) ((NavigationView) findViewById(R.id.nav_view))
-                    .getHeaderView(0).findViewById(R.id.drawer_usericon);
+            ImageView userIcon = (ImageView) findNavigationViewChildById(R.id.drawer_usericon);
             try {
-                int[] rgb = BitmapUtils.calculateRGB(accountName);
-                TextDrawable icon = new TextDrawable(
-                        accountName.substring(0, 1).toUpperCase(), rgb[0], rgb[1], rgb[2]);
-                userIcon.setImageDrawable(icon);
+                userIcon.setImageDrawable(
+                        createAvatar(
+                                accountName,
+                                getResources().getDimension(R.dimen.nav_drawer_header_avatar_radius)
+                        )
+                );
             } catch (Exception e) {
                 Log_OC.e(TAG, "Error calculating RGB value for active account icon.", e);
                 userIcon.setImageResource(R.drawable.ic_account_circle);
@@ -342,6 +356,19 @@ public abstract class DrawerActivity extends ToolbarActivity {
         }
     }
 
+    @NonNull
+    private TextDrawable createAvatar(String accountName, float radiusInDp) throws UnsupportedEncodingException,
+            NoSuchAlgorithmException {
+        int[] rgb = BitmapUtils.calculateRGB(accountName);
+        float radiusInPx = TypedValue.applyDimension(
+                TypedValue.COMPLEX_UNIT_DIP,
+                radiusInDp,
+                getResources().getDisplayMetrics());
+        return new TextDrawable(
+                accountName.substring(0, 1).toUpperCase(), rgb[0], rgb[1], rgb[2], radiusInPx);
+    }
+
+
     /**
      * Toggle between standard menu and account list including saving the state.
      */