B4A Library KatexMathView

It is a wrap for this Github project. No other libs required other than the attached B4A libraries. Extract them and copy them to your additional library folder.

You need to download and extract this folder (https://www.dropbox.com/s/1sthbkm5vc7fa0h/katex.zip?dl=0) and copy the folder with its contents to be under the /Files folder of the B4A project i.e.

....a number of files and folders....
1. B4A library files
2. B4A sample project.


Sample code:
#Region  Project Attributes
    #ApplicationLabel: b4aKatexMathView
    #VersionCode: 1
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private kmv1 As KatexMathView
    Private kmv2 As KatexMathView
    Private kmv3 As KatexMathView
    Private kmv4 As KatexMathView
    Private kmv5 As KatexMathView
    Private kmv6 As KatexMathView

End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:

    kmv1.TextColor = Colors.White
    kmv1.TextSize = 11
    kmv1.ViewBackgroundColor = Colors.Black
    kmv1.DisplayText = "$x=\frac{1+y}{1+2z^2}$"

    kmv2.TextColor = Colors.Blue
    kmv2.ViewBackgroundColor = Colors.White
    kmv2.TextSize = 11
    kmv2.DisplayText = "$\frac{4}{7}\times560=320$"

    kmv3.ViewBackgroundColor = Colors.Yellow
    kmv3.TextColor = Colors.Red
    kmv3.TextSize = 11
    kmv3.DisplayText = "$\int_0^\infty e^{-x^2} dx=\frac{\sqrt{\pi}}{2}$"

    kmv4.TextColor = Colors.Magenta
    kmv4.ViewBackgroundColor = Colors.Green
    kmv4.TextSize = 11
    kmv4.DisplayText = "$\int \!\! \int f(x,y)\,\mathrm{d}x\mathrm{d}y$"

    kmv5.TextColor = Colors.Black
    kmv5.ViewBackgroundColor = Colors.Magenta
    kmv5.TextSize = 11
    kmv5.DisplayText = "$\displaystyle \int_0^\infty e^{-x^2} dx$"

    kmv6.TextColor = Colors.Magenta
    kmv6.ViewBackgroundColor = Colors.LightGray
    kmv6.TextSize = 11
    kmv6.DisplayText = "${n+1\choose k} = {n\choose k} + {n \choose k-1}$"

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

See what I have done to change the formulas to display correctly.
Visit https://khan.github.io/KaTeX/

You can download it and test if but if you want to use it you need to


  • KatexMathViewLibFiles.zip
    8.8 KB · Views: 258
  • b4aKatexMathView.zip
    8.2 KB · Views: 246
Last edited:


Active Member
Licensed User
Longtime User
Dear Johan,
I am getting this crash report:
** Service (starter) Create **
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
main_activity_create (java line: 339)
java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:166)
    at anywheresoftware.b4a.objects.ActivityWrapper.LoadLayout(ActivityWrapper.java:209)
    at JHS.KatexMathView.main._activity_create(main.java:339)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:179)
    at JHS.KatexMathView.main.afterFirstLayout(main.java:102)
    at JHS.KatexMathView.main.access$000(main.java:17)
    at JHS.KatexMathView.main$WaitForLayout.run(main.java:80)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: java.lang.reflect.InvocationTargetException
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:64)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:158)
    ... 14 more
Caused by: java.lang.NoSuchMethodError: No static method getColor(Landroid/content/Context;I)I in class Landroid/support/v4/content/ContextCompat; or its super classes (declaration of 'android.support.v4.content.ContextCompat' appears in /data/app/JHS.KatexMathView-2/base.apk)
    at katex.hourglass.in.mathlib.MathView.<init>(MathView.java:51)
    at mathviewwrapper.mathviewWrapper._initialize(mathviewWrapper.java:73)
    ... 17 more


Licensed User
Longtime User
I get the result text correct only in release mode. In debug it shows the text as in the code...


Licensed User
Longtime User
Can't make these show "≠" :
$  \{=}\mathllap{/}  $
$  \mathrlap{/}{=}   $
The character itself also does not show.

Johan Schoeman

Licensed User
Longtime User


Licensed User
Longtime User
With this view I have made an application that enables the user to write two pages of formulas and publish them with whatsapp to someone else (probably a student ?).
Though you can always write it on a piece of paper and make a photo of it, but what if you are in the desert and you don't have paper and pen ?
Thank you again Johan.


  • Screenshot_1.png
    124.1 KB · Views: 186
  • Screenshot_2.png
    278.4 KB · Views: 178
  • Screenshot_3.png
    232.3 KB · Views: 197
Last edited:


Licensed User
Longtime User
what if you are in the desert and you don't have paper and pen ?
In that case I wouldn't dare to ask where the cell tower could be.. eheh
here is important option of KaTeX like displayMode and leqno that could be used somewhere in java code like this :
katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", element, { displayMode: true, leqno: false , macros: { "\\RR": "\\mathbb{R}" } });
please put their booleans value a option or method of your library and save my life!