[Android] Span line height fix (#20352)

* [Android] Fixed Wrong Span LineHeight (#19592)

* Added a UI Test (#19592)

* Added a null checking (#19592)

* Updated the UiTest (#19592)

* Added snapshot

* Added Java native code

* Improve Java code

* call `context.getResources().getDisplayMetrics()` once
* build `maui.aar`

---------

Co-authored-by: Javier Suárez <[email protected]>
Co-authored-by: Jonathan Peppers <[email protected]>

Author: 3 people

src/Controls/samples/Controls.Sample.UITests/Issues/Issue19592.xaml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Maui.Controls.Sample.Issues.Issue19592"
+             xmlns:ns="clr-namespace:Maui.Controls.Sample.Issues">
+    <StackLayout>
+        <Label FontAttributes="Bold"
+               Text="Line height: 1.25"/>
+        <Label AutomationId="label"
+               LineBreakMode="WordWrap">
+            <Label.FormattedText>
+                <FormattedString>
+                    <Span LineHeight="1.5">Outside, the church's garden was a haven of tranquility, where nature and spirituality intertwined harmoniously. Flowers bloomed in vibrant hues, each petal seemingly capturing a prayer or hope of the visitors who walked among them. The garden, lovingly tended by members of the congregation, reflected the church's commitment to nurturing not just the soul, but also the beauty of the world around it. It was a place where people of all walks of life could find solace, inspiration, and a sense of belonging within the embrace of the church's community.</Span>
+                </FormattedString>
+            </Label.FormattedText>
+        </Label>
+
+        <Label FontAttributes="Bold"
+               Margin="0,20,0,0"
+               Text="Line height: 2.5"/>
+        <Label LineBreakMode="WordWrap">
+            <Label.FormattedText>
+                <FormattedString>
+                    <Span LineHeight="2.5">Outside, the church's garden was a haven of tranquility, where nature and spirituality intertwined harmoniously. Flowers bloomed in vibrant hues, each petal seemingly capturing a prayer or hope of the visitors who walked among them. The garden, lovingly tended by members of the congregation, reflected the church's commitment to nurturing not just the soul, but also the beauty of the world around it. It was a place where people of all walks of life could find solace, inspiration, and a sense of belonging within the embrace of the church's community.</Span>
+                </FormattedString>
+            </Label.FormattedText>
+        </Label>
+    </StackLayout>
+</ContentPage>

src/Controls/samples/Controls.Sample.UITests/Issues/Issue19592.xaml.cs

@@ -0,0 +1,15 @@
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Xaml;
+
+namespace Maui.Controls.Sample.Issues
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	[Issue(IssueTracker.Github, 19592, "Span LineHeight Wrong on Android", PlatformAffected.Android)]
+	public partial class Issue19592 : ContentPage
+	{
+		public Issue19592()
+		{
+			InitializeComponent();
+		}
+	}
+}

src/Controls/src/Core/Platform/Android/Extensions/FormattedStringExtensions.cs

@@ -64,6 +64,8 @@ internal static SpannableString ToSpannableStringNewWay(
 
 			var builder = new StringBuilder();
 
+			var fontMetrics = PlatformInterop.GetFontMetrics(context, defaultFontSize);
+
 			for (int i = 0; i < formattedString.Spans.Count; i++)
 			{
 				Span span = formattedString.Spans[i];
@@ -101,8 +103,8 @@ internal static SpannableString ToSpannableStringNewWay(
 					spannable.SetSpan(new BackgroundColorSpan(span.BackgroundColor.ToPlatform()), start, end, SpanTypes.InclusiveExclusive);
 
 				// LineHeight
-				if (span.LineHeight >= 0)
-					spannable.SetSpan(new LineHeightSpan(span.LineHeight), start, end, SpanTypes.InclusiveExclusive);
+				if (span.LineHeight >= 0 && fontMetrics is not null)
+					spannable.SetSpan(new LineHeightSpan(span.LineHeight, fontMetrics.Top), start, end, SpanTypes.InclusiveExclusive);
 
 				// CharacterSpacing
 				var characterSpacing = span.CharacterSpacing >= 0
@@ -289,18 +291,20 @@ void Apply(TextPaint paint)
 		class LineHeightSpan : Java.Lang.Object, ILineHeightSpan
 		{
 			readonly double _relativeLineHeight;
+			readonly double _originalTop;
 
-			public LineHeightSpan(double relativeLineHeight)
+			public LineHeightSpan(double relativeLineHeight, double originalTop)
 			{
 				_relativeLineHeight = relativeLineHeight;
+				_originalTop = originalTop;
 			}
 
 			public void ChooseHeight(Java.Lang.ICharSequence? text, int start, int end, int spanstartv, int lineHeight, Paint.FontMetricsInt? fm)
 			{
 				if (fm is null)
 					return;
 
-				fm.Ascent = (int)(fm.Top * _relativeLineHeight);
+				fm.Ascent = (int)(_originalTop * _relativeLineHeight);
 			}
 		}
 	}

src/Controls/tests/UITests/Tests/Issues/Issue19592.cs

@@ -0,0 +1,28 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.AppiumTests.Issues
+{
+	public class Issue19592 : _IssuesUITest
+	{
+		public override string Issue => "Span LineHeight Wrong on Android";
+
+		public Issue19592(TestDevice device) : base(device)
+		{
+		}
+
+		[Test]
+		public void SpanLineHeightShouldNotGrowProgressively()
+		{
+			this.IgnoreIfPlatforms(new TestDevice[] { TestDevice.iOS, TestDevice.Mac, TestDevice.Windows });
+
+			_ = App.WaitForElement("label");
+
+			// The line height should be the same for each line
+			// of the paragraph, 1.5 and 2.5 respectively,
+			// as opposed to progressively growing
+			VerifyScreenshot();
+		}
+	}
+}

src/Controls/tests/UITests/snapshots/android/SpanLineHeightShouldNotGrowProgressively.png

@@ -19,6 +19,7 @@
 import android.os.Build;
 import android.text.Editable;
 import android.text.InputFilter;
+import android.util.DisplayMetrics;
 import android.util.TypedValue;
 import android.view.Gravity;
 import android.view.View;
@@ -591,6 +592,31 @@ public static Rect getCurrentWindowMetrics(Activity activity) {
             .getBounds();
     }
 
+    /**
+     * Gets font metrics based on the given context and default font size
+     * @param context
+     * @param defaultFontSize
+     * @return FontMetrics object or null if context or display metrics is null
+     */
+    public static Paint.FontMetrics getFontMetrics(Context context, double defaultFontSize) {
+        if (context == null)
+            return null;
+
+        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
+        if (metrics != null) {
+            return new Paint() {{
+                setTextSize(
+                    TypedValue.applyDimension(
+                        TypedValue.COMPLEX_UNIT_SP,
+                        (float) defaultFontSize,
+                        metrics
+                ));
+            }}.getFontMetrics();
+        } else {
+            return null;
+        }
+    }
+
     private static class ColorStates
     {
         static final int[] EMPTY = new int[] { };