Dbrant has uploaded a new change for review. https://gerrit.wikimedia.org/r/191430
Change subject: [WIP] Final tweaks/fixes for share-a-fact. ...................................................................... [WIP] Final tweaks/fixes for share-a-fact. - Fixed face offset. - Added dark gradient underneath text. - Tweaked some margins and offsets. - Put the share layout into a ScrollView, in case the display is too small for the generated image and buttons. Bug: T86242 Change-Id: Ie3a89afcdc93844d82164836aef2b8632cdc992e --- M wikipedia/res/layout/dialog_share_preview.xml M wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java M wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java M wikipedia/src/main/java/org/wikipedia/page/snippet/ShareHandler.java M wikipedia/src/main/java/org/wikipedia/page/snippet/SnippetImage.java 5 files changed, 70 insertions(+), 24 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/apps/android/wikipedia refs/changes/30/191430/1 diff --git a/wikipedia/res/layout/dialog_share_preview.xml b/wikipedia/res/layout/dialog_share_preview.xml index 0ff6530..4030b0f 100644 --- a/wikipedia/res/layout/dialog_share_preview.xml +++ b/wikipedia/res/layout/dialog_share_preview.xml @@ -1,11 +1,15 @@ <?xml version="1.0" encoding="utf-8"?> +<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"; + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:layout_gravity="center_horizontal" + android:background="@color/white_progressive_dark"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"; android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_margin="0dp" - android:background="@color/white_progressive_dark" android:orientation="vertical"> <ImageView @@ -14,8 +18,9 @@ android:layout_height="wrap_content" android:layout_gravity="center_horizontal|center_vertical" android:layout_marginTop="16dp" + android:layout_marginBottom="16dp" android:scaleType="centerInside" - android:src="@drawable/empty_nearby" + android:src="?attr/lead_image_drawable" android:background="@android:color/black" android:contentDescription="@string/snippet_share_preview_image_desc" /> @@ -31,4 +36,5 @@ android:layout_gravity="center_horizontal" android:text="@string/share_normal_button" /> -</LinearLayout> \ No newline at end of file +</LinearLayout> +</ScrollView> \ No newline at end of file diff --git a/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java b/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java index a76f839..f0c2bbb 100644 --- a/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java +++ b/wikipedia/src/main/java/org/wikipedia/page/PageViewFragmentInternal.java @@ -444,8 +444,13 @@ return leadImagesHandler.getLeadImageBitmap(); } - public int getImageBaseYOffset() { - return leadImagesHandler.getImageBaseYOffset(); + /** + * Returns the normalized (0.0 to 1.0) vertical focus position of the lead image. + * A value of 0.0 represents the top of the image, and 1.0 represents the bottom. + * @return Normalized vertical focus position. + */ + public float getLeadImageFocusY() { + return leadImagesHandler.getLeadImageFocusY(); } /** diff --git a/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java b/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java index 62c3347..7ed4235 100644 --- a/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java +++ b/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java @@ -100,6 +100,7 @@ private int displayHeight; private int imageBaseYOffset = 0; + private float faceYOffsetNormalized = 0f; private float displayDensity; public interface OnLeadImageLayoutListener { @@ -215,8 +216,15 @@ return returnedBitmap; } - public int getImageBaseYOffset() { - return imageBaseYOffset; + /** + * Returns the normalized (0.0 to 1.0) vertical focus position of the lead image. + * A value of 0.0 represents the top of the image, and 1.0 represents the bottom. + * The "focus position" is currently defined by automatic face detection, but may be + * defined by other factors in the future. + * @return Normalized vertical focus position. + */ + public float getLeadImageFocusY() { + return faceYOffsetNormalized; } @Override @@ -239,14 +247,17 @@ int faceY = (int)(faceLocation.y * scale); // if we have a face, then offset to the face location imageBaseYOffset = -(faceY - (imagePlaceholder.getHeight() / 2)); - // give it a slight artificial boost, so that it appears slightly - // above the page title... + // Adjust the face position by a slight amount. + // The face recognizer gives the location of the *eyes*, whereas we actually + // want to center on the *nose*... final int faceBoost = 24; imageBaseYOffset -= (faceBoost * displayDensity); + faceYOffsetNormalized = faceLocation.y / bmpHeight; } else { // No face, so we'll just chop the top 25% off rather than centering final int offsetDenom = 4; imageBaseYOffset = -(newHeight - imagePlaceholder.getHeight()) / offsetDenom; + faceYOffsetNormalized = 0f; } // is the offset too far to the top? if (imageBaseYOffset > 0) { diff --git a/wikipedia/src/main/java/org/wikipedia/page/snippet/ShareHandler.java b/wikipedia/src/main/java/org/wikipedia/page/snippet/ShareHandler.java index 23f89dd..07133c9 100644 --- a/wikipedia/src/main/java/org/wikipedia/page/snippet/ShareHandler.java +++ b/wikipedia/src/main/java/org/wikipedia/page/snippet/ShareHandler.java @@ -39,7 +39,7 @@ title.getCanonicalUri() + "?source=app"); Bitmap resultBitmap = new SnippetImage(activity, curPageFragment.getLeadImageBitmap(), - curPageFragment.getImageBaseYOffset(), + curPageFragment.getLeadImageFocusY(), title.getDisplayText(), title.getDescription(), selectedText).createImage(); diff --git a/wikipedia/src/main/java/org/wikipedia/page/snippet/SnippetImage.java b/wikipedia/src/main/java/org/wikipedia/page/snippet/SnippetImage.java index 38b3ff2..a737f36 100644 --- a/wikipedia/src/main/java/org/wikipedia/page/snippet/SnippetImage.java +++ b/wikipedia/src/main/java/org/wikipedia/page/snippet/SnippetImage.java @@ -4,7 +4,10 @@ import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; +import android.graphics.LinearGradient; import android.graphics.Paint; +import android.graphics.Rect; +import android.graphics.Shader; import android.graphics.Typeface; import android.graphics.drawable.Drawable; import android.text.Html; @@ -31,21 +34,23 @@ private final Context context; private final Bitmap leadImageBitmap; - private final int faceYOffset; + private final float leadImageFocusY; private final String title; private final String description; private final CharSequence textSnippet; private boolean isArticleRTL; + private float displayDensity; public SnippetImage(Context context, Bitmap leadImageBitmap, - int faceYOffset, String title, String description, + float leadImageFocusY, String title, String description, CharSequence textSnippet) { this.context = context; this.leadImageBitmap = leadImageBitmap; - this.faceYOffset = faceYOffset; + this.leadImageFocusY = leadImageFocusY; this.title = title; this.description = description; this.textSnippet = textSnippet; + displayDensity = context.getResources().getDisplayMetrics().density; } /** @@ -54,8 +59,18 @@ * just use a black background. */ public Bitmap createImage() { - Bitmap resultBitmap = drawBackground(leadImageBitmap, faceYOffset); + Bitmap resultBitmap = drawBackground(leadImageBitmap, leadImageFocusY); Canvas canvas = new Canvas(resultBitmap); + + // draw a dark gradient over the image, so that the white text + // will stand out better against it. + final int gradientStartColor = 0x20000000; + final int gradientStopColor = 0x60000000; + Shader shader = new LinearGradient(0, 0, 0, canvas.getHeight(), gradientStartColor, + gradientStopColor, Shader.TileMode.CLAMP); + Paint paint = new Paint(); + paint.setShader(shader); + canvas.drawRect(new Rect(0, 0, canvas.getWidth(), canvas.getHeight()), paint); Layout textLayout = drawTextSnippet(canvas, textSnippet); isArticleRTL = textLayout.getParagraphDirection(0) == Layout.DIR_RIGHT_TO_LEFT; @@ -71,22 +86,21 @@ return resultBitmap; } - private Bitmap drawBackground(Bitmap leadImageBitmap, int faceYOffset) { + private Bitmap drawBackground(Bitmap leadImageBitmap, float leadImageFocusY) { Bitmap resultBitmap; if (leadImageBitmap != null) { // use lead image - resultBitmap = scaleCropToFitFace(leadImageBitmap, WIDTH, HEIGHT, faceYOffset); + resultBitmap = scaleCropToFitFace(leadImageBitmap, WIDTH, HEIGHT, leadImageFocusY); } else { resultBitmap = Bitmap.createBitmap(WIDTH, HEIGHT, Bitmap.Config.ARGB_8888); - // final int backgroundColor = Color.parseColor("#242438"); - final int backgroundColor = -14408648; + final int backgroundColor = 0xff242438; resultBitmap.eraseColor(backgroundColor); } return resultBitmap; } private Layout drawTextSnippet(Canvas canvas, CharSequence textSnippet) { - final int top = 5; + final int top = 16; final int maxHeight = 200; final int maxLines = 5; final float maxFontSize = 96.0f; @@ -143,7 +157,7 @@ } private void drawTitle(Canvas canvas, String title, int top) { - final int marginBottom = 1; + final int marginBottom = 8; final int maxHeight = 70; final int maxLines = 2; final float maxFontSize = 30.0f; @@ -213,7 +227,7 @@ final int rMaxWidth = (int) rFontSize; TextPaint rPaint = new TextPaint(textPaint); rPaint.setTextSize(rFontSize); - StaticLayout rLayout = buildLayout(new TextLayoutParams("\u24C7", rPaint, rMaxWidth, 1.0f)); + StaticLayout rLayout = buildLayout(new TextLayoutParams("\u00AE", rPaint, rMaxWidth, 1.0f)); final int rWidth = (int) rLayout.getLineWidth(0); int left = WIDTH - HORIZONTAL_PADDING - wordMarkWidth - rWidth; @@ -320,7 +334,7 @@ // Borrowed from http://stackoverflow.com/questions/5226922/crop-to-fit-image-in-android // Modified to allow for face detection adjustment, startY private Bitmap scaleCropToFitFace(Bitmap original, int targetWidth, int targetHeight, - int yOffset) { + float normalizedYOffset) { // Need to scale the image, keeping the aspect ratio first int width = original.getWidth(); int height = original.getHeight(); @@ -337,12 +351,22 @@ scaledWidth = targetWidth; scaledHeight = height * widthScale; // crop height by... -// startY = (int) ((scaledHeight - targetHeight) / 2); + startY = (int) (normalizedYOffset * scaledHeight - targetHeight / 2); + // Adjust the face position by a slight amount. + // The face recognizer gives the location of the *eyes*, whereas we actually + // want to center on the *nose*... + final int faceBoost = 16; + startY += faceBoost * displayDensity; + if (startY < 0) { + startY = 0; + } else if (startY + targetHeight > scaledHeight) { + startY = (int)(scaledHeight - targetHeight); + } } else { scaledHeight = targetHeight; scaledWidth = width * heightScale; // crop width by.. -// startX = (int) ((scaledWidth - targetWidth) / 2); + // startX = (int) ((scaledWidth - targetWidth) / 2); } Bitmap scaledBitmap -- To view, visit https://gerrit.wikimedia.org/r/191430 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ie3a89afcdc93844d82164836aef2b8632cdc992e Gerrit-PatchSet: 1 Gerrit-Project: apps/android/wikipedia Gerrit-Branch: master Gerrit-Owner: Dbrant <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
