Fix nickbutcher#13. Set a circular outline on avatars for proper elev…

…ation shadows.
kinderjava · Nov 13, 2015 · 68837f8 · 68837f8
1 parent 8b067cb
commit 68837f8
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/app/src/main/java/io/plaidapp/ui/widget/CircularImageView.java b/app/src/main/java/io/plaidapp/ui/widget/CircularImageView.java
@@ -0,0 +1,18 @@
+package io.plaidapp.ui.widget;
+
+import android.content.Context;
+import android.util.AttributeSet;
+
+import io.plaidapp.util.ViewUtils;
+
+/**
+ * An extension to image view that has a circular outline.
+ */
+public class CircularImageView extends ForegroundImageView {
+
+    public CircularImageView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        setOutlineProvider(ViewUtils.CIRCULAR_OUTLINE);
+        setClipToOutline(true);
+    }
+}
diff --git a/app/src/main/java/io/plaidapp/util/ViewUtils.java b/app/src/main/java/io/plaidapp/util/ViewUtils.java
@@ -19,6 +19,7 @@
 import android.content.Context;
 import android.content.res.ColorStateList;
 import android.graphics.Color;
+import android.graphics.Outline;
 import android.graphics.drawable.ColorDrawable;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.RippleDrawable;
@@ -32,6 +33,7 @@
 import android.util.Property;
 import android.util.TypedValue;
 import android.view.View;
+import android.view.ViewOutlineProvider;
 import android.widget.ImageView;
 
 /**
@@ -163,4 +165,15 @@ public Integer get(ImageView imageView) {
             return imageView.getImageAlpha();
         }
     };
+
+    public static final ViewOutlineProvider CIRCULAR_OUTLINE = new ViewOutlineProvider() {
+        @Override
+        public void getOutline(View view, Outline outline) {
+            outline.setOval(view.getPaddingLeft(),
+                    view.getPaddingTop(),
+                    view.getWidth() - view.getPaddingRight(),
+                    view.getHeight() - view.getPaddingBottom());
+        }
+    };
+
 }
diff --git a/app/src/main/res/layout/designer_news_story_description.xml b/app/src/main/res/layout/designer_news_story_description.xml
@@ -98,7 +98,7 @@
             android:textAppearance="@style/TextAppearance.CommentTimestamp"
             tools:text="Nick B, Designer+Developer @ Google" />
 
-        <ImageView
+        <io.plaidapp.ui.widget.CircularImageView
             android:id="@+id/story_poster_avatar"
             android:layout_width="@dimen/avatar_bounds"
             android:layout_height="@dimen/avatar_bounds"

diff --git a/app/src/main/res/layout/dribbble_comment.xml b/app/src/main/res/layout/dribbble_comment.xml
@@ -24,12 +24,13 @@
     android:paddingTop="@dimen/padding_normal"
     android:paddingEnd="@dimen/padding_normal"
     android:paddingBottom="@dimen/padding_normal"
+    android:clipToPadding="false"
     android:foreground="?android:selectableItemBackground"
     android:background="@drawable/comment_background"
     android:stateListAnimator="@animator/comment_selection"
     android:descendantFocusability="blocksDescendants">
 
-    <io.plaidapp.ui.widget.ForegroundImageView
+    <io.plaidapp.ui.widget.CircularImageView
         android:id="@+id/player_avatar"
         android:layout_width="@dimen/avatar_bounds"
         android:layout_height="@dimen/avatar_bounds"

diff --git a/app/src/main/res/layout/dribbble_shot_description.xml b/app/src/main/res/layout/dribbble_shot_description.xml
@@ -101,7 +101,7 @@
         android:clickable="false"
         tools:text="—Nick B" />
 
-    <io.plaidapp.ui.widget.ForegroundImageView
+    <io.plaidapp.ui.widget.CircularImageView
         android:id="@+id/player_avatar"
         android:layout_width="@dimen/avatar_bounds"
         android:layout_height="@dimen/avatar_bounds"