Android unwanted padding on top and bottom with TextView

Question

I am trying to put two text view within the circular progress bar as shown in the picture below. These two text should be aligned with center of the circular progress bar.

But the unwanted padding in text view which prevents me to align the text into the center of the circular progress bar. This is what i get.

here is my layout file:

 <FrameLayout
            android:id="@+id/onboarding_activity_progress_layout"
            android:layout_gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="10dp">

            <com.locationlabs.finder.android.core.ui.CircularProgressBar
                  android:id="@+id/onboarding_activity_progress_bar"
                  android:layout_gravity="center"
                  android:padding="10dp"
                  android:layout_width="120dp"
                  android:layout_height="120dp"
                  app:progressColor="@color/progress_bar_color"
                  app:backgroundColor="@color/progress_bar_background_color"
                  app:progressBarWidth="10dp"
                  tools:progress="60"/>
            <LinearLayout
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:orientation="vertical"
                  android:includeFontPadding="false"
                  android:layout_gravity="center">

                <TextView
                      android:id="@+id/number_of_remaining_steps"
                      style="@style/OnboardingNumberOfRemainingStepText"
                      tools:text="2"/>

                <TextView
                      android:id="@+id/remaining_number_of_steps"
                      style="@style/OnboardingRemainingStepText"
                      tools:text="steps left"/>

            </LinearLayout>
        </FrameLayout>

Here is the styling:

<style name="OnboardingNumberOfRemainingStepText">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">center_horizontal</item>
        <item name="android:fontFamily">sans-serif</item>
        <item name="android:textSize">40sp</item>
        <item name="android:textColor">@color/dark_grey</item>
        <item name="android:includeFontPadding">false</item>
    </style>

  <style name="OnboardingRemainingStepText">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">center_horizontal</item>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/dark_grey</item>
        <item name="android:textStyle">normal</item>
    </style>

I was told android:includeFontPadding can help reduce the padding but it doesn't help that much. I also tried with the single textView with Spannable but I get almost the similar result. I tried with negative margin but that didn't work and it is also not reliable.

Answer 1

When you transfer styling attributes of a TextView to XML, TextView might render in an unexpected way. This is because the default styling for TextView is applied in a layout file which is overridden when you use style attribute in it.

You can try using parent="android:TextAppearance" in the style defined for a TextView to ensure you inherit the pre-defined styles for the TextView.

Example:

Let me know if it worked for you!