Android - how to build a custom textview that has money with superscript aligned with dollar value

Question

I would like to build a custom textview that can show money like this:

In the end I want any user to be able to call it like this:

<com.util.MyCustomViews.MoneyTextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="24.92"
    android:textColor="#727272"
    android:textSize="18dp" />

Two problems I have is that if I use html to achieve tis its not quite the exact height UX team wants the cents raised by. They only want the cents raised half way as you can see in the photo. so calling <p>This text contains <sup>superscript</sup>45</p>raises it too high. i need to to put able to raise it myself. Im not sure how to begin but im assuming I'll over ride setText in a custom textView like this:

class MoneyTextView extends AppCompatTextView {
    public MoneyTextView(Context context) {
        super(context);
    }

    public MoneyTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MoneyTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setText(CharSequence text, BufferType type) {
        Spannable s = getSomeCustomSpannableSuperScriptString(getContext(), text);
        super.setText(s, BufferType.SPANNABLE);
    }
}

UPDATE: I Tried the following code but it did not work:

public class MoneyTextView extends AppCompatTextView {

static final String SEPERATOR = ".";
static final double HEIGHT_IN_EM = 0.5;
static final int MOGO_BASELINE_SHIFT = 10;

public MoneyTextView(Context context) {
    super(context);
}

public MoneyTextView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
}

public MoneyTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void setText(CharSequence text, BufferType type) {

    super.setText(Html.fromHtml("<b>$27</b><sup style=\"vertical-align:top,line-height:"+HEIGHT_IN_EM+"em\">.45</sup>"), BufferType.SPANNABLE);
}

and used it with this constant: static final double HEIGHT_IN_EM = 0.5;

but this is the output i get no matter the height i choose, on a nexus api 19 emulator:

it wont push down the ".45".

the layout file itself if necessary looks like this:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myapplicationtest.MainActivity">

    <com.example.myapplicationtest.MoneyTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical"
        android:text="666.33"
        android:textSize="22dp"/>

</LinearLayout>

I think you need check this library to getting some idea : https://github.com/fabiomsr/MoneyTextView — Haresh Chhelana, Apr 04 '17 at 06:19
Please check this out .....> http://stackoverflow.com/questions/23990381/how-to-create-vertically-aligned-superscript-and-subscript-in-textview — Ravindra Shekhawat, Apr 04 '17 at 06:20
@HareshChhelana thats a good library. but its missing the ability to adjust the height of the superscript. i want to push the cents values down more or add padding to it etc. its too high. If there was a app:decimalGravity="center" it would be nice or if there was an adjustDecimalPadding attribute. any suggestions as i really like the library otherwise. and Reaz i thought of two textviews but i want a custom component others can share. — j2emanue, Apr 04 '17 at 06:39
@HareshChhelana , the library you mentioned resolved my issue. see https://github.com/fabiomsr/MoneyTextView/issues/6 . thank you. — j2emanue, Apr 05 '17 at 18:28

score 1 · Answer 1 · answered Apr 04 '17 at 06:19

1

Have a look at Ticker. You can change the source per your requirements.

answered Apr 04 '17 at 06:19

azizbekian

60,783
13
169
249

Rishabh Maurya · Answer 2 · 2017-04-05T07:48:24.560

1

You can prefer Html.fromHtml method for displaying such type of texts. It is easier as compared to spannable string . Just use the following line in your textView setText method .

double HEIGHT_IN_EM=0.5;

and

Html.fromHtml("<b>$27</b><sup style=\"vertical-align:top,line-height:"+HEIGHT_IN_EM+"em\">.45</sup>")

edited Apr 05 '17 at 07:48

answered Apr 04 '17 at 06:24

Rishabh Maurya

1,448
3
22
40

the problem is i need to be able to adjust the height of the superscript – j2emanue Apr 04 '17 at 06:38
@j2emanue In place of line height use whatever height you want . – Rishabh Maurya Apr 04 '17 at 06:46
yes i think this can solve my problem but can you tell me if there is a way to control the size of the subscript ? lets say i wanted to lower the subscript height using line-height property you showed, how would i then make the size bigger. is there a text size property ? – j2emanue Apr 04 '17 at 11:10
Its all about how well you can use HTML . Just put the $27 in bold tag .e.g. $27 . It will make the size of subscript bigger. – Rishabh Maurya Apr 04 '17 at 12:46
hi. i tried it but the spannable will not accept the line-height. it just gets ignored. have you tried it yourself ? i even started a new project and tried it fresh but still the style properites get ignored. i am applying them to a textview. the sub tag works but not the styles. can you try it ? – j2emanue Apr 05 '17 at 06:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139929/discussion-between-rishabh-maurya-and-j2emanue). – Rishabh Maurya Apr 05 '17 at 07:06
when i try your updated code the line height has no affect. it does a superscript but i can not adjust line height still. i updated my question. – j2emanue Apr 05 '17 at 08:27
1

It is so simple . – Apr 05 '17 at 15:07

score 1 · Accepted Answer · answered Apr 05 '17 at 18:30

1

using the library @HareshChhelana mentioned resolved my issue.

it perfectly aligns at runtime the text. in the android viewer it was not aligning though. had to wait until runtime.

the resolution is from here

answered Apr 05 '17 at 18:30

j2emanue

60,549
65
286
456

Android - how to build a custom textview that has money with superscript aligned with dollar value

3 Answers3