CODEWITHSUNDEEP
androidandroid-layoutfontsfont-size
kos
kos

Reputation: 1791

Nexus 5 monospace font has different width for unicode circles

On an Android app, I have credit-card entry as four EditText fields. The fields are configured to use a monospace typeface.

When I type numbers, the width of each 4-character block is always the same is expected.

However, to mask credit card details that have already been entered I use a unicode black circle character "●". It turns out that even with a monospace typeface the width of "●●●●" is wider than "1111"! Which is causing me problems when I'm trying to support different system font sizes and screen sizes.

Monospaced circle vs numbers

Interestingly, on Nexus 5 with Marshmallow, or Samsung phones on KitKat, I don't see this issue!

Am I missing something or is the default Android monospace font on Lollipop not actually monospaced?

My XML: 

       <LinearLayout
        android:id="@+id/card_number_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <EditText
            android:id="@+id/card_field_1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:hint="●●●●"
            android:typeface="monospace"
            android:inputType="number"
            android:focusable="true"
            android:maxLength="4">
        </EditText>

        ...
        </LinearLayout>

Upvotes: 0

Views: 607

Answers (1)

hyc
hyc

Reputation: 1443

On my Marshmallow build these graphics characters are coming from NotoSansSymbols-Regular-Subsetted.ttf and they're definitely not monospaced. Google screwed this up. Hiding that file and using DroidSansFallback.ttf from Kitkat makes things line up for me.

I've submitted a bug report here https://github.com/googlei18n/noto-fonts/issues/617

Upvotes: 4

Related Questions