Redesign Reader post detail header for adaptive layout by nbradbury · Pull Request #22754 · wordpress-mobile/WordPress-Android

nbradbury · 2026-03-27T15:41:05Z

Description

Redesigns the Reader post detail header to support an adaptive layout with the following changes:

Featured image moved into header view — relocated from the collapsing toolbar to ReaderPostDetailHeaderView, below the title. Uses ShapeableImageView with rounded corners and supports tap-to-preview.
Portrait-aware image handling — new PortraitAwareCropTransformation for Glide that fits portrait images to height and centers horizontally with background fill, instead of cropping. Applied to both post cards and post detail.
Reading time — displays estimated reading time with a clock icon below the post title.
Redesigned blog section — author name and date shown on separate rows instead of inline with a dot separator.
Like/comment counts in header — interaction counts moved into the header view with theme-aware styling.
Excerpt display — post excerpt shown below the featured image when available.
Simplified toolbar — removed collapsing toolbar image behavior; toolbar icon colors are now applied once at init instead of on every scroll event.
Code cleanup — removed dead injections, inlined trivial delegations, and replaced ?attr/colorOnSurfaceVariant (Material3-only) with theme-compatible alternatives to fix a crash in reading preferences themes.

Testing instructions

Post detail header layout:

Open the Reader tab and tap on any post
Verify the post detail shows: blog avatar + name, author name on its own row, date on its own row, post title, reading time with clock icon, featured image (if present), excerpt (if present), like/comment counts

Layout renders correctly without crashes
Featured image tapping opens media preview

Portrait featured images:

Find or create a post with a portrait (tall) featured image
Open the post detail

Portrait image is fully visible (not cropped), centered horizontally with background fill

Go back to the Reader feed

Post card also shows the portrait image fitted, not cropped

Reading preferences themes:

Open a post detail, tap the reading preferences icon in the toolbar
Switch between different themes (System, Soft, Sepia, Evening, OLED, etc.)

Post detail renders without crashes in all themes
Toolbar icons remain visible and correctly colored

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Only use editorial.image, featured_image, or featured_media.uri as featured image sources instead of scanning post content for suitable images or videos. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Reorder ConstraintLayout constraints so the visual hierarchy is: blog header → featured image → title → excerpt → interactions → footer Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…d-image

When a Reader post has a portrait featured image, the image is now scaled to fit the container height and centered horizontally with a gray background fill, instead of being center-cropped which often cuts off heads and other important content. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…t-featured-image

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…t-featured-image

Move featured image from collapsing AppBar to inline in the header view with adaptive aspect ratio. Restructure blog section so site name, author, and date each appear on their own line with absolute date+time format. Add reading time indicator and excerpt display to the header. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Extract Regex and date format constants in header UI state builder - Replace verbose null-check patterns with setTextOrHide helper - Hoist Paint allocation to class property in PortraitAwareCropTransformation - Remove unnecessary list allocation in applyInteractionSectionTheme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ibute Replace ?attr/colorOnSurfaceVariant (Material3-only) with compatible alternatives since the reading preferences ContextThemeWrapper uses Theme.MaterialComponents.DayNight which lacks this attribute. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…stener - Remove unused postDetailsHeaderViewUiStateBuilder injection from fragment - Replace per-scroll toolbar coloring with one-time setup in initAppBar - Inline trivial buildPostDetailsHeaderUiState delegation - Remove unnecessary default values in ReaderFeaturedImageUiState Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dangermattic · 2026-03-27T15:42:05Z

	2 Warnings
⚠️	View files have been modified, but no screenshot or video is included in the pull request. Consider adding some for clarity.
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

	1 Message
📖	This PR is still a Draft: some checks will be skipped.

Generated by 🚫 Danger

wpmobilebot · 2026-03-27T15:59:31Z

📲 You can test the changes from this Pull Request in Jetpack Android by scanning the QR code below to install the corresponding build.

	App Name	Jetpack Android
	Build Type	Debug
	Version	pr22754-4691444
	Build Number	`1488`
	Application ID	`com.jetpack.android.prealpha`
	Commit	`4691444`
	Installation URL	2fa98ucff0nh0

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

wpmobilebot · 2026-03-27T16:06:56Z

📲 You can test the changes from this Pull Request in WordPress Android by scanning the QR code below to install the corresponding build.

	App Name	WordPress Android
	Build Type	Debug
	Version	pr22754-4691444
	Build Number	`1488`
	Application ID	`org.wordpress.android.prealpha`
	Commit	`4691444`
	Installation URL	1k0s6oa07g7eo

Automatticians: You can use our internal self-serve MC tool to give yourself access to those builds if needed.

wpmobilebot · 2026-03-27T16:15:25Z

🤖 Build Failure Analysis

This build has failures. Claude has analyzed them - check the build annotations for details.

Replace HtmlCompat.fromHtml() with lighter HtmlUtils.fastStripHtml() for word counting, fix detekt ReturnCount and checkstyle empty-line violations. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Chain blog name and author vertically against the avatar, add marginStart with goneMarginStart so text aligns flush when there is no avatar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ptive-post-details Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Move blog name to top, post title second, avatar with author and date below title, then featured image, blog description (up to 3 lines), and reading time. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Anchor dateline start directly to avatar so it stays positioned when author name is hidden. Add barrier below blog name and follow button so the post title clears both. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

findPost() excludes the text column for performance, so shouldAddFeaturedImage() couldn't detect the image was already in the post body HTML. Fetch with text column included when returning from comments to preserve deduplication. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

sonarqubecloud · 2026-03-28T11:36:37Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

nbradbury and others added 14 commits March 25, 2026 10:21

Start reader improvements feature branch

8772fc4

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove content-scanning fallbacks for Reader featured image

0fe604f

Only use editorial.image, featured_image, or featured_media.uri as featured image sources instead of scanning post content for suitable images or videos. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Move featured image above title and excerpt in Reader post cards

ff77238

Reorder ConstraintLayout constraints so the visual hierarchy is: blog header → featured image → title → excerpt → interactions → footer Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Fix grammar in code comments

5265ae1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/trunk' into issue/reader-feature…

89c4227

…d-image

Fix import ordering in ReaderPostNewViewHolder

e15f7a2

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/trunk' into issue/reader-portrai…

8bcb7ba

…t-featured-image

Fix import ordering and remove unnecessary @jvmoverloads in ImageManager

63fc925

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/trunk' into issue/reader-portrai…

22cedba

…t-featured-image

nbradbury added the unit-tests-exemption label Mar 27, 2026

nbradbury and others added 5 commits March 27, 2026 12:19

Use fastStripHtml for reading time and fix code quality issues

17a6afc

Replace HtmlCompat.fromHtml() with lighter HtmlUtils.fastStripHtml() for word counting, fix detekt ReturnCount and checkstyle empty-line violations. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Fix blog section spacing between avatar and text

7914ed7

Chain blog name and author vertically against the avatar, add marginStart with goneMarginStart so text aligns flush when there is no avatar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge remote-tracking branch 'origin/trunk' into feature/CMM-2002-ada…

ebc1c46

…ptive-post-details Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Hide author name when blank or same as blog name

80c7aa0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Show blog description instead of post excerpt in detail header

b334c3c

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

nbradbury added the Reader: Post Detail label Mar 27, 2026

nbradbury and others added 4 commits March 27, 2026 13:18

Reorder Reader post detail header layout

4a2692a

Move blog name to top, post title second, avatar with author and date below title, then featured image, blog description (up to 3 lines), and reading time. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Fix blog section layout spacing and alignment

6892a72

Anchor dateline start directly to avatar so it stays positioned when author name is hidden. Add barrier below blog name and follow button so the post title clears both. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Make subscribe button smaller and place it after blog name

07aa8f8

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign Reader post detail header for adaptive layout#22754

Redesign Reader post detail header for adaptive layout#22754
nbradbury wants to merge 23 commits intotrunkfrom
feature/CMM-2002-adaptive-post-details

nbradbury commented Mar 27, 2026

Uh oh!

dangermattic commented Mar 27, 2026 •

edited

Loading

Uh oh!

wpmobilebot commented Mar 27, 2026 •

edited

Loading

Uh oh!

wpmobilebot commented Mar 27, 2026 •

edited

Loading

Uh oh!

wpmobilebot commented Mar 27, 2026 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Mar 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

nbradbury commented Mar 27, 2026

Description

Testing instructions

Uh oh!

dangermattic commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wpmobilebot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 Build Failure Analysis

Uh oh!

sonarqubecloud bot commented Mar 28, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dangermattic commented Mar 27, 2026 •

edited

Loading

wpmobilebot commented Mar 27, 2026 •

edited

Loading

wpmobilebot commented Mar 27, 2026 •

edited

Loading

wpmobilebot commented Mar 27, 2026 •

edited

Loading