How to add MathView Android Layout Library

When i was beginner then i want to make an Android app on Math tutorial but i faced a problem to show advance Math formulas. But now if you also want to do same thing then i have a great library named Katext MathView Android Layout Library.

It is 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.

Recommended Article:

ExtraMapUtils Library – Add Google Map in Android App

Now lets move on the implementation of MathView Android Layout Library

Setup

dependencies
{
  compile 'in.hourglass.mathrender:katexmathview:1.0'
}

Demo

demo_katex_list_200 demo_katex_layout_200 demo_katex_runtime_200

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>

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" />

Recommended :

Make dynamic Android View using json2view library

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);

Hope you like this tutorial and please comment us with suggestion and thoughts.

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...