How to display the microcharacter letter of the popupCharacters next to the actual key letter?

Question

I'm trying to make a keyboard in Android. I already made it but I don't know how to display the microcharacter letter for the popupCharacters next to the actual key letter, like this:

keyboardView.xml

<?xml version="1.0" encoding="utf-8"?>
<android.inputmethodservice.KeyboardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/keyboard_view"
    android:keyPreviewLayout="@layout/keyboard_preview"
    android:layout_alignParentBottom="true"
    android:keyBackground="@color/bbb"
    android:background="#bbb"
    android:keyPreviewOffset="50dp">

</android.inputmethodservice.KeyboardView>

keysLayout.xml

<?xml version="1.0" encoding="utf-8"?>
<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
    android:keyWidth="9.7%p"
    android:horizontalGap="3px"
    android:verticalGap="3px"
    android:keyHeight="50dp"
    >


    <Row android:keyWidth="9.7%p" android:horizontalGap="1dp">
        <Key android:codes="49" android:keyLabel="1" android:keyEdgeFlags="left" android:layout_marginLeft="1dp"/>
        <Key android:codes="50" android:keyLabel="2"/>
        <Key android:codes="51" android:keyLabel="3"/>
        <Key android:codes="52" android:keyLabel="4"/>
        <Key android:codes="53" android:keyLabel="5"/>
        <Key android:codes="54" android:keyLabel="6"/>
        <Key android:codes="55" android:keyLabel="7"/>
        <Key android:codes="56" android:keyLabel="8"/>
        <Key android:codes="57" android:keyLabel="9"/>
        <Key android:codes="48" android:keyLabel="0"/>

    </Row>


    <Row>
        <Key android:codes="113" android:keyLabel="q" android:keyEdgeFlags="left"/>
        <Key android:codes="119" android:keyLabel="w"/>
        <Key android:codes="101" android:keyLabel="e"/>
        <Key android:codes="114" android:keyLabel="r"/>
        <Key android:codes="116" android:keyLabel="t"/>
        <Key android:codes="121" android:keyLabel="y"/>
        <Key android:codes="117" android:keyLabel="u"/>
        <Key android:codes="105" android:keyLabel="i"/>
        <Key android:codes="111" android:keyLabel="o"/>
        <Key android:codes="112" android:keyLabel="p" android:keyEdgeFlags="right"/>
    </Row>
    <Row>
        <Key android:codes="97" android:keyLabel="a" android:keyEdgeFlags="left"/>
        <Key android:codes="115" android:keyLabel="s"/>
        <Key android:codes="100" android:keyLabel="d"/>
        <Key android:codes="102" android:keyLabel="f"/>
        <Key android:codes="103" android:keyLabel="g"/>
        <Key android:codes="104" android:keyLabel="h"/>
        <Key android:codes="106" android:keyLabel="j"/>
        <Key android:codes="107" android:keyLabel="k"/>
        <Key android:codes="108" android:keyLabel="l"/>
        <Key android:codes="-5" android:keyEdgeFlags="right" android:isRepeatable="true" android:keyIcon="@mipmap/del"/>
    </Row>
    <Row>
        <Key android:codes="-1" android:keyIcon="@mipmap/up" android:keyEdgeFlags="left"/>
        <Key android:codes="122" android:keyLabel="z"/>
        <Key android:codes="120" android:keyLabel="x"/>
        <Key android:codes="99" android:keyLabel="c"/>
        <Key android:codes="118" android:keyLabel="v"/>
        <Key android:codes="98" android:keyLabel="b"/>
        <Key android:codes="110" android:keyLabel="n"/>
        <Key android:codes="109" android:keyLabel="m"/>
        <Key android:codes="46" android:keyLabel="."/>
        <Key android:codes="63" android:keyLabel="\?" android:keyEdgeFlags="right"/>

    </Row>
    <Row android:rowEdgeFlags="bottom">
        <Key android:codes="-2" android:keyIcon="@mipmap/glob" android:keyEdgeFlags="left"/>
        <Key android:codes="47" android:keyLabel="/" android:keyWidth="10%p" />
        <Key android:codes="32" android:keyLabel="SPACE" android:keyWidth="60%p" android:isRepeatable="true"/>
        <Key android:codes="-4" android:keyBackground="@color/colorPrimary" android:keyLabel="DONE"
            android:keyWidth="20%p" android:keyEdgeFlags="right"/>
    </Row>
</Keyboard>

Answer 1

I understood it from several sources and I will attach it below

The solution was using overriding the onDraw() method.

public class MyKeyboardView extends KeyboardView {
    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(25);
        paint.setColor(Color.RED);

        List<Key> keys = getKeyboard().getKeys();
        for(Key key: keys) {
            if(key.label != null)
                canvas.drawText(key.label.toString(), key.x + (key.width/2), key.y + 25, paint);
        }
    }
}

Resources:

Barry Fruitman

Aniket

Thank you so much.