Visual styling of overlay progress ring. Tap-to-toast for same.

clients/android/NewsBlur/res/layout/activity_reading.xml

@@ -54,6 +54,7 @@
         android:layout_marginRight="99dp"
         android:layout_marginBottom="15dp"
         android:layout_alignParentBottom="true"
-        android:layout_alignParentRight="true" />
+        android:layout_alignParentRight="true"
+        android:onClick="overlayCount" />
 
 </RelativeLayout>

clients/android/NewsBlur/res/values/colors.xml

@@ -70,6 +70,9 @@
 
     <color name="newsblur_blue">#0b445a</color>
 
+    <color name="progress_circle_complete">#9a9c96</color>
+    <color name="progress_circle_remaining">#dbe4e1</color>
+
     <!-- To use a selector on a bg color, the options must be drawables, not colors. -->
     <drawable name="toggle_bg_selected">#fdfdfd</drawable>
     <drawable name="toggle_bg_normal">#dfe1dd</drawable>

clients/android/NewsBlur/res/values/strings.xml

@@ -60,6 +60,8 @@
 
     <string name="overlay_next">NEXT</string>
     <string name="overlay_done">DONE</string>
+    <string name="overlay_count_toast_N">%d unread stories</string>
+    <string name="overlay_count_toast_1">1 unread story</string>
 
 	<string name="reply_to">Reply to \"%s\"</string>
 	

clients/android/NewsBlur/src/com/newsblur/activity/Reading.java

@@ -18,6 +18,7 @@ import android.widget.Button;
 import android.widget.ProgressBar;
 import android.widget.SeekBar;
 import android.widget.SeekBar.OnSeekBarChangeListener;
+import android.widget.Toast;
 
 import com.actionbarsherlock.view.Menu;
 import com.actionbarsherlock.view.MenuInflater;
@@ -374,4 +375,9 @@ public abstract class Reading extends NbFragmentActivity implements OnPageChange
         pager.setCurrentItem(pager.getCurrentItem()-1, true);
     }
 
+    public void overlayCount(View v) {
+        String unreadText = getString((this.currentUnreadCount == 1) ? R.string.overlay_count_toast_1 : R.string.overlay_count_toast_N);
+        Toast.makeText(this, String.format(unreadText, this.currentUnreadCount), Toast.LENGTH_SHORT).show();
+    }
+
 }

clients/android/NewsBlur/src/com/newsblur/view/ProgressCircle.java

@@ -1,16 +1,20 @@
 package com.newsblur.view;
 
 import android.content.Context;
+import android.graphics.Bitmap;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
-import android.graphics.Paint.Style;
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffXfermode;
 import android.graphics.Rect;
 import android.graphics.RectF;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.widget.ProgressBar;
 
+import com.newsblur.R;
+
 /**
  * A determinate, circular progress indicator.
  *
@@ -19,6 +23,9 @@ import android.widget.ProgressBar;
  */
 public class ProgressCircle extends ProgressBar {
 
+    /** The thickness of the circular ring, in DP. */
+    public static final int STROKE_THICKNESS = 5;
+
     public ProgressCircle(Context context) {
         super(context);
     }
@@ -30,17 +37,44 @@ public class ProgressCircle extends ProgressBar {
 
     protected void onDraw(Canvas canvas) {
         
-        float angle = (360f * this.getProgress()) / this.getMax();
-        Log.d(this.getClass().getName(), "prog: " + this.getProgress());
-        Log.d(this.getClass().getName(), "max: " + this.getMax());
-        Log.d(this.getClass().getName(), "angle: " + angle);
-        Paint p = new Paint();
-        p.setColor( Color.GREEN );
-        p.setStyle( Style.FILL );
-        p.setAntiAlias(true);
+        // the outline of the view w.r.t the screen
         Rect r = new Rect();
         this.getDrawingRect(r);
-        canvas.drawArc(new RectF(r), -90f, (-90f+angle), true, p);
+
+        // a bitmap on which we will render so that clearing can be done
+        Bitmap bm = Bitmap.createBitmap(r.width(), r.height(), Bitmap.Config.ARGB_8888);
+        Canvas c = new Canvas(bm);
+
+        // the outline of the view w.r.t the bitmap
+        Rect cr = new Rect();
+        cr.top = 0;
+        cr.left = 0;
+        cr.bottom = r.width();
+        cr.right = r.height();
+
+        float angle = (360f * this.getProgress()) / this.getMax();
+
+        Paint p = new Paint();
+        p.setStyle( Paint.Style.FILL );
+        p.setAntiAlias(true);
+        // draw the "remaining" part of the arc as a background
+        p.setColor( getResources().getColor(R.color.progress_circle_remaining) );
+        c.drawArc(new RectF(cr), -90f, 360f, true, p);
+        // draw the "completed" part of the arc over that
+        p.setColor( getResources().getColor(R.color.progress_circle_complete) );
+        c.drawArc(new RectF(cr), -90f, angle, true, p);
+        // clear the centre to form a ring 
+        p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
+        p.setAlpha(0xFF);
+        RectF innerR = new RectF(cr);
+        innerR.top += STROKE_THICKNESS;
+        innerR.left += STROKE_THICKNESS;
+        innerR.bottom -= STROKE_THICKNESS;
+        innerR.right -= STROKE_THICKNESS;
+        c.drawArc(innerR, -90f, 360f, true, p);
+
+        // apply the bitmap onto this view
+        canvas.drawBitmap(bm, r.left, r.top, null);
 
     }