1

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. enter image description here

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.

enter image description here enter image description here

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.

Rakesh
  • 3,987
  • 10
  • 43
  • 68
  • I think it's the TextSize, try setting it to something lower. – Veeresh Charantimath Apr 17 '16 at 06:27
  • @MikeM I have already tried with padding `0dp` but it didn't help. @VeereshCharantimath I don't want to lower the `textSize`. – Rakesh Apr 17 '16 at 06:39
  • Did you try setting the width of the linear layout that holds the text views to 120dp? – Francesc Apr 17 '16 at 06:53
  • @Francesc it doesn't help. It moves the text little bit up and it overlaps with the circular progress bar and the padding between two textview are still the same. – Rakesh Apr 17 '16 at 07:16
  • Did you try [this](http://stackoverflow.com/a/23063015/3792350)? Wrap a TextView and override the onDraw to remove top and bottom space. – sakiM Apr 17 '16 at 07:28
  • @sakiM I tried that already it removes the padding from the bottom but the top padding is still there. This prevents both the textView to align completely with the center of the circular progress bar. – Rakesh Apr 17 '16 at 07:32
  • I tried [this](http://stackoverflow.com/a/30763169/1024482) solution and it works. – Rakesh Apr 17 '16 at 07:42
  • @Rakesh I found [this](http://stackoverflow.com/a/32836547/3792350) looks more reasonable. I tried this solution and it can crop all the padding perfectly. – sakiM Apr 17 '16 at 08:13
  • @sakiM This is the exactly the same link which I have posted above. Thanks though. – Rakesh Apr 17 '16 at 17:26

1 Answers1

0

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!

Anupam KR
  • 484
  • 4
  • 5