Katex

Introduction: Android Katex library to render math Formula faster in android using khanacademy Katex
More: Author   ReportBugs   
Tags:

CI Maven Central

A KhanAcademy Katex based Library for Rendering math faster in various Android Devices. This a View which is created from extending webview. This view allows you to render latex in your android devices. It can load normal text, text with latex and latex alone. The only thing you have to make sure is your latex should be enclosed inside either $your latex formula$ or $$your latex formula$$. This will also allow you to beautify your formula text by setting color and text size.


Accepted Inputs

$x=\frac{1+y}{1+2z^2}$

or

 $$x=\frac{1+y}{1+2z^2}$$

or

 sum of ratios =4+3=7 $=\frac{4}{7}\times560=320$

or

 Data Included inside HTML TAGS
 
 <p>If <span class="latexEle" data-latex="x:35::48:60">$x:35::48:60$</span><span>  </span>, find the value of <span class="latexEle" data-latex="x">$x$</span><span>  </span>.</p>

Setup

Available over Maven Central

dependencies {
  implementation 'io.github.lingarajsankaravelu:katexmathview:2.0.0'
}

Attributes supported

 setTextColor          -> Allows you to beautify your latex with specific color of your choice
 setTextSize           -> Allows you to set text size of the latex displayed on screen
 setViewBackgroudColor -> set the background color of the view.
 setClickable  
   i.True     -> Setting this to true will allow KatexMathview to act as Textview and it will also intercept parent layout touchevent useful to register click 
   when this view is used with List,Recyclerview.
   ii.False   -> Setting this to false will make katexMathvview act as an webview with zoom in controls etc. 
   
   

Adding to your XML Layout

    <katex.hourglass.in.mathlib.MathView
      app:setTextColor="@color/primary"
      app:setTextSize="14sp"
      app:setClickable="true"
      app:setText="@string/single_formula"
      android:layout_gravity="center"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
    
    

Adding at runtime

    MathView mathView = new MathView(getApplicationContext());
    mathView.setClickable(true);
    mathView.setTextSize(14);
    mathView.setTextColor(ContextCompat.getColor(getApplicationContext(),android.R.color.white));
    mathView.setDisplayText(getResources().getString(R.string.runtime_formula));
    mathView.setViewBackgroundColor(ContextCompat.getColor(getApplicationContext(),android.R.color.black));
    parent_layout.addView(mathView);
   

Demo

demo_katex_list_200 demo_katex_layout_200 demo_katex_runtime_200

Sample code is available under the app module, in this same repo

License

Licensed under MIT

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools
AI Daily Digest