Alternative design for widgets

app/src/main/java/org/isoron/uhabits/SmallWidgetProvider.java

@@ -50,8 +50,8 @@ public class SmallWidgetProvider extends AppWidgetProvider
 
         SmallWidgetView widgetView = new SmallWidgetView(context);
         widgetView.setDrawingCacheEnabled(true);
-        widgetView.measure(200, 200);
+        widgetView.measure(180, 200);
-        widgetView.layout(0, 0, 200, 200);
+        widgetView.layout(0, 0, 180, 200);
         widgetView.buildDrawingCache(true);
         widgetView.setHabit(habit);
 

app/src/main/java/org/isoron/uhabits/views/SmallWidgetView.java

@@ -25,6 +25,9 @@ import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Rect;
 import android.graphics.Typeface;
+import android.text.Layout;
+import android.text.StaticLayout;
+import android.text.TextPaint;
 import android.util.AttributeSet;
 import android.view.View;
 
@@ -34,12 +37,20 @@ import org.isoron.uhabits.models.Habit;
 
 public class SmallWidgetView extends View
 {
-    private Paint pCircle;
+    private Paint pCard;
-    private Paint pText;
+    private Paint pIcon;
 
     private int primaryColor;
-    private int grey;
+    private int backgroundColor;
-    private int size;
+    private int timesColor;
+    private int darkGrey;
+
+    private int width;
+    private int height;
+    private int leftMargin;
+    private int topMargin;
+    private int padding;
+    private String label;
 
     private String fa_check;
     private String fa_times;
@@ -50,7 +61,9 @@ public class SmallWidgetView extends View
     private int check_status;
     private int star_status;
 
-    private Rect textBounds;
+    private Rect rect;
+    private TextPaint textPaint;
+    private StaticLayout labelLayout;
 
     public SmallWidgetView(Context context)
     {
@@ -69,13 +82,17 @@ public class SmallWidgetView extends View
         Typeface fontawesome =
                 Typeface.createFromAsset(context.getAssets(), "fontawesome-webfont.ttf");
 
-        pCircle = new Paint();
+        pCard = new Paint();
-        pCircle.setAntiAlias(true);
+        pCard.setAntiAlias(true);
+
+        pIcon = new Paint();
+        pIcon.setAntiAlias(true);
+        pIcon.setTypeface(fontawesome);
+        pIcon.setTextAlign(Paint.Align.CENTER);
 
-        pText = new Paint();
+        textPaint = new TextPaint();
-        pText.setAntiAlias(true);
+        textPaint.setColor(Color.WHITE);
-        pText.setTypeface(fontawesome);
+        textPaint.setAntiAlias(true);
-        pText.setTextAlign(Paint.Align.CENTER);
 
         fa_check = context.getString(R.string.fa_check);
         fa_times = context.getString(R.string.fa_times);
@@ -84,79 +101,109 @@ public class SmallWidgetView extends View
         fa_full_star = context.getString(R.string.fa_star);
 
         primaryColor = ColorHelper.palette[10];
-        grey = Color.rgb(175, 175, 175);
+        backgroundColor = Color.argb(255, 255, 255, 255);
+        timesColor = Color.argb(128, 255, 255, 255);
+        darkGrey = Color.argb(64, 0, 0, 0);
 
-        textBounds = new Rect();
+        rect = new Rect();
-        check_status = 0;
+        check_status = 2;
         star_status = 0;
+        label = "Wake up early";
     }
 
     public void setHabit(Habit habit)
     {
         this.check_status = habit.getCurrentCheckmarkStatus();
         this.star_status = habit.getCurrentStarStatus();
-        this.primaryColor = habit.color;
+        this.primaryColor = Color.argb(230, Color.red(habit.color), Color.green(habit.color), Color.blue(habit.color));
+        this.label = habit.name;
+        updateLabel();
     }
 
     @Override
     protected void onDraw(Canvas canvas)
     {
         super.onDraw(canvas);
-        int s = size - (int) (size * 0.025);
-        pCircle.setShadowLayer(size * 0.025f, size * 0.01f, size * 0.01f, 0x60000000);
 
-        drawBigCircle(canvas, s);
+        drawBackground(canvas);
-        drawSmallCircle(canvas, s);
+        drawCheckmark(canvas);
+        drawLabel(canvas);
     }
 
-    private void drawSmallCircle(Canvas canvas, int s)
+    private void drawBackground(Canvas canvas)
     {
-        String text;
+        int color = (check_status == 2 ? primaryColor : darkGrey);
-        int color = (star_status == 2 ? primaryColor : grey);
 
-        if(star_status == 0)
+        pCard.setColor(color);
-            text = fa_empty_star;
+        canvas.drawRoundRect(leftMargin, topMargin, width - leftMargin, height - topMargin, padding,
-        else if(star_status == 1)
+                padding, pCard);
-            text = fa_half_star;
+    }
-        else
+
-            text = fa_full_star;
+    private void drawCheckmark(Canvas canvas)
+    {
+        String text = (check_status == 0 ? fa_times : fa_check);
+        int color = (check_status == 2 ? Color.WHITE : timesColor);
+
+        pIcon.setColor(color);
+        pIcon.setTextSize(width * 0.5f);
+        pIcon.getTextBounds(text, 0, 1, rect);
 
-        int r2 = (int) (s * 0.20);
+//        canvas.drawLine(0, 0.67f * height, width, 0.67f * height, pIcon);
-        pCircle.setColor(Color.WHITE);
-        canvas.drawCircle(s - r2, s - r2, r2, pCircle);
 
-        pText.setTextSize(s * 0.3f);
+        int y = (int) ((0.67f * height - rect.bottom - rect.top) / 2);
-        pText.setColor(color);
+        canvas.drawText(text, width / 2, y, pIcon);
-        pText.getTextBounds(text, 0, text.length(), textBounds);
-        canvas.drawText(text, s - r2, s - r2 - textBounds.exactCenterY() - s / 90, pText);
     }
 
-    private void drawBigCircle(Canvas canvas, int s)
+    private void drawLabel(Canvas canvas)
     {
-        String text = (check_status == 0 ? fa_times : fa_check);
+        canvas.save();
-        int color = (check_status == 2 ? primaryColor : grey);
+        float y;
+        int nLines = labelLayout.getLineCount();
 
-        int r1 = (int) (s * 0.45);
+        if(nLines == 1)
-        pCircle.setColor(color);
+            y = height * 0.8f - padding;
-        canvas.drawCircle(r1, r1, r1, pCircle);
+        else
+            y = height * 0.7f - padding;
 
-        pText.setTextSize(s * 0.7f);
+        canvas.translate(leftMargin + padding, y);
-        pText.setColor(Color.WHITE);
+
-        pText.getTextBounds(text, 0, text.length(), textBounds);
+        labelLayout.draw(canvas);
-        canvas.drawText(text, r1, r1 - textBounds.exactCenterY(), pText);
+        canvas.restore();
     }
 
     @Override
-    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
+    protected void onMeasure(int width, int height)
     {
-        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+        super.onMeasure(width, height);
-        size = Math.min(widthMeasureSpec, heightMeasureSpec);
+        setMeasuredDimension(width, height);
-        setMeasuredDimension(size, size);
+        updateSize(width, height);
+        updateLabel();
     }
 
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh)
     {
         super.onSizeChanged(w, h, oldw, oldh);
+        updateSize(w, h);
+        updateLabel();
+    }
+
+    private void updateSize(int width, int height)
+    {
+        this.width = width;
+        this.height = height;
+
+        leftMargin = (int) (width * 0.015);
+        topMargin = (int) (height * 0.015);
+        padding = 8 * leftMargin;
+        textPaint.setTextSize(0.15f * width);
     }
+
+    private void updateLabel()
+    {
+        textPaint.setColor(Color.WHITE);
+        labelLayout = new StaticLayout(label, textPaint, width - 2 * leftMargin - 2 * padding,
+                Layout.Alignment.ALIGN_CENTER, 1.0f, 0.0f, false);
+    }
+
 }

app/src/main/res/layout/small_widget.xml

@@ -1,31 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="wrap_content"
+    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
+    android:layout_height="match_parent"
     android:gravity="center"
-    android:orientation="vertical">
+    android:orientation="vertical"
+    android:padding="4dp">
 
     <ImageView
         android:id="@+id/imageView"
-        android:layout_width="56dp"
+        android:layout_width="match_parent"
-        android:layout_height="56dp"
+        android:layout_height="match_parent"
         android:adjustViewBounds="true"
         />
 
-    <TextView
-        android:id="@+id/tvName"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:textColor="@color/white"
-        android:shadowColor="#000000"
-        android:shadowDx="1"
-        android:shadowDy="1"
-        android:shadowRadius="3"
-        android:padding="6dp"
-        android:textSize="12sp"
-        android:maxLines="1"
-        android:ellipsize="end"
-        android:text="@string/main_activity_title"/>
-
 </LinearLayout>