Justified Alignment in Android

Alternatively referred to as align or alignment, justify is a term used to describe how text is aligned. For example, text that is justified to the left creates a straight line of text on the left-hand side of the page (like this paragraph). Text can be aligned along the edge of a page, cell, div, table, or other visible or non-visible line. Below are some different examples of aligned text.

justified1

Alignment is only a small piece of the puzzle. What works for one design might be totally inappropriate for another layout. As with all layouts, it depends on the purpose of the piece, the audience and its expectations, the fonts, the margins and white space, and other elements on the page. The most appropriate choice is the alignment that works for that particular design.

In this example we will see how we can justify text in web view and text view. As we all know android does not supports full justification of text in a textview. It does not have in-built option for it. However, you can justify text in android using WebView. The trick is to use HTML tags with justify alignment so that the text gets aligned properly. In your main Activity, add a WebView as follows:

 

ackage com.example;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class MainActivity extends Activity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{

super.onCreate(savedInstanceState);
setContentView(R.layout.main);

String text = "<html><body style="text-align:justify"> %s </body></Html>";

String data = " In this example we will see how we can justify text in web view and text view. As we all know android does not supports full justification of text in a textview. It does not have in-built option for it. However, you can justify text in android using WebView.";

WebView webView = (WebView) findViewById(R.id.WebView);
webView.loadData(String.format(text, data), "text/html", "utf-8");

}
}

 

 

Write following into your main xml file:

 

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<WebView
android:id="@+id/WebView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</RelativeLayout>

 

 

You cannot apply the same trick for TextView since Android does not support full justification at present. However TextView in Android is a complete text editor that helps us to display text to the user. TextView also optionally allows the user to edit the text, though the basic class is configured to not allow editing.

Justifying the text means aligning the text from both sides i.e. Left Hand Side and Right Hand Side.

Steps
1.) Create an XML file and drag the TextView and write some text in it.

 

<p>&lt;LinearLayout xmlns:android=&lt;i&gt;&quot;http://schemas.android.com/apk/res/android&quot;&lt;/i&gt;</p>
<p>xmlns:myapp=&lt;i&gt;&quot;http://schemas.android.com/apk/res/com.example.justifysampleapp&quot;&lt;/i&gt;</p>
<p>android:layout_width=&lt;i&gt;&quot;match_parent&quot;&lt;/i&gt;</p>
<p>android:layout_height=&lt;i&gt;&quot;match_parent&quot;&lt;/i&gt;</p>
<p>android:orientation=&lt;i&gt;&quot;vertical&quot;&lt;/i&gt;&gt;</p>
<p>&lt;LinearLayout</p>
<p>android:layout_width=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:layout_height=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:orientation=&lt;i&gt;&quot;vertical&quot;&lt;/i&gt;</p>
<p>&lt;TextView</p>
<p>android:layout_width=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:layout_height=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:gravity=&lt;i&gt;&quot;center&quot;&lt;/i&gt;</p>
<p>android:layout_marginTop=&lt;i&gt;&quot;10dp&quot;&lt;/i&gt;</p>
<p>android:background=&lt;i&gt;&quot;#ffb100&quot;&lt;/i&gt;</p>
<p>android:text=&lt;i&gt;&quot;The Google Directions API is a service that calculates directions between locations using an HTTP request. You can search for directions for several modes of transportation, include transit, driving, walking or cycling. Directions may specify origins, destinations and waypoints either as text strings or as latitude/longitude coordinates. The Directions API can return multi-part directions using a series of waypoints.&quot;&lt;/i&gt;/&gt;</p>
<p>&lt;/LinearLayout&gt;<br />
</p>

 

 

2.) Define the XML in the Main Activity to get the main screen displayed.

 

<br />
&lt;b&gt;package&lt;/b&gt; com.example.textviewjustification;<br />
&lt;b&gt;import&lt;/b&gt; android.os.Bundle;<br />
&lt;b&gt;import&lt;/b&gt; android.app.Activity;<br />
&lt;b&gt;import&lt;/b&gt; android.view.Menu;<br />
&lt;b&gt;public class&lt;/b&gt; MainActivity &lt;b&gt;extends&lt;/b&gt; Activity<br />
{<br />
&lt;strong&gt;@Override&lt;/strong&gt;<br />
&lt;b&gt;protected void&lt;/b&gt; onCreate(Bundle savedInstanceState)<br />
{<br />
&lt;b&gt;super&lt;/b&gt;.onCreate(savedInstanceState);<br />
setContentView(R.layout.&lt;i&gt;main&lt;/i&gt;);<br />
}<br />
}<br />

 

 

3.) Create an XML file in the ‘Value’ folder with the name justifiedtextview_attr.xml for the justification attributes. It will contain the below points:
4.) Define the XML Code for justification in Main.Xml.

 

<br />
&lt;RelativeLayout</p>
<p>android:layout_width=&lt;em&gt;&quot;match_parent&quot;&lt;/em&gt;</p>
<p>android:layout_height=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;&gt;</p>
<p>&lt;com.example.textviewjustification.Justification</p>
<p>android:id=&lt;i&gt;&quot;@+id/justifiedTextView1&quot;&lt;/i&gt;</p>
<p>android:layout_width=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:layout_height=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:layout_alignParentLeft=&lt;i&gt;&quot;true&quot;&lt;/i&gt;</p>
<p>android:layout_below=&lt;i&gt;&quot;@+id/justifiedTextView1&quot;&lt;/i&gt;</p>
<p>app:backgroundColor=&lt;i&gt;&quot;#ADD8E6&quot;&lt;/i&gt;</p>
<p>app:text=&lt;i&gt;&quot;The Google Directions API is a service that calculates directions between locations using an HTTP request. You can search for directions for several modes of transportation, include transit, driving, walking or cycling. Directions may specify origins, destinations and waypoints either as text strings or as latitude/longitude coordinates. The Directions API can return multi-part directions using a series of waypoints.&quot;&lt;/i&gt;/&gt;</p>
<p>&lt;com.example.textviewjustification.Justification</p>
<p>android:id=&lt;i&gt;&quot;@+id/justifiedTextView1&quot;&lt;/i&gt;</p>
<p>android:layout_width=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:layout_height=&lt;i&gt;&quot;wrap_content&quot;&lt;/i&gt;</p>
<p>android:layout_alignParentLeft=&lt;i&gt;&quot;true&quot;&lt;/i&gt;</p>
<p>android:layout_alignParentTop=&lt;i&gt;&quot;true&quot;&lt;/i&gt;</p>
<p>android:layout_marginTop=&lt;i&gt;&quot;16dp&quot;&lt;/i&gt;</p>
<p>app:text=&lt;i&gt;&quot;Justified Text&quot;&lt;/i&gt;</p>
<p>app:textColor=&lt;i&gt;&quot;#1a0edb&quot;&lt;/i&gt;</p>
<p>app:textSize=&lt;i&gt;&quot;15&quot;&lt;/i&gt;/&gt;</p>
<p>&lt;View</p>
<p>android:layout_width=&lt;i&gt;&quot;fill_parent&quot;&lt;/i&gt;</p>
<p>android:layout_height=&lt;i&gt;&quot;2dp&quot;&lt;/i&gt;</p>
<p>android:layout_below=&lt;i&gt;&quot;@+id/justifiedTextView1&quot;&lt;/i&gt;</p>
<p>android:background=&lt;i&gt;&quot;#e00707&quot;&lt;/i&gt;/&gt;</p>
<p>&lt;/RelativeLayout&gt;</p>
<p>

 

 

5.) Create another Class named – justificationClass.This class is used to implement the code for justification with the help of HTML to fetch data and set it in TextView with the justified format.

 

<br />
&lt;b&gt;private&lt;/b&gt; String htmlcode = &quot;&lt;html&gt;&lt;body style='textalign:justify;color:rgba(%s);font-size:%dpx;margin: 10px 10px 10px 10px;'&gt;%s&lt;/body&gt;&lt;/html&gt;&quot;;</p>
<p>&lt;b&gt;private&lt;/b&gt; String justifytextview;</p>
<p>&lt;b&gt;private int &lt;/b&gt;justifycolortextview;</p>
<p>&lt;b&gt;private int &lt;/b&gt;justifycolorbackground;</p>
<p>&lt;b&gt;private int &lt;/b&gt;JustifytextSize;</p>
<p>&lt;b&gt;public&lt;/b&gt; Justification(Context context, AttributeSet attributes)</p>
<p>{</p>
<p>&lt;b&gt;super&lt;/b&gt;(context, attributes);</p>
<p>&lt;strong&gt;init&lt;/strong&gt;(attributes);</p>
<p>}</p>
<p>&lt;b&gt;public&lt;/b&gt; Justification(Context context, AttributeSet attributes, &lt;b&gt;int&lt;/b&gt; x) {</p>
<p>&lt;b&gt;super&lt;/b&gt;(context, attributes, x);</p>
<p>&lt;strong&gt;init&lt;/strong&gt;(attributes);</p>
<p>}</p>
<p>&lt;b&gt;private void&lt;/b&gt; init(AttributeSet attributes)</p>
<p>{</p>
<p>TypedArray array = getContext().obtainStyledAttributes(attributes, R.styleable.&lt;i&gt;JustifiedTextView&lt;/i&gt;);</p>
<p>justifytextview = array.getString(R.styleable.&lt;i&gt;JustifiedTextView_text&lt;/i&gt;);</p>
<p>&lt;b&gt;if&lt;/b&gt; (justifytextview == &lt;b&gt;null&lt;/b&gt;)</p>
<p>justifytextview = &quot;&quot;;</p>
<p>justifycolortextview = array.getColor(R.styleable.&lt;i&gt;JustifiedTextView_textColor&lt;/i&gt;,Color.&lt;i&gt;BLACK&lt;/i&gt;);</p>
<p>justifycolorbackground = array.getColor(R.styleable.&lt;i&gt;JustifiedTextView_backgroundColor&lt;/i&gt;,Color.&lt;i&gt;TRANSPARENT&lt;/i&gt;);</p>
<p>JustifytextSize = array.getInt(R.styleable.&lt;i&gt;JustifiedTextView_textSize&lt;/i&gt;, 14);</p>
<p>array.recycle();</p>
<p>&lt;b&gt;this&lt;/b&gt;.setWebChromeClient(&lt;b&gt;new&lt;/b&gt; WebChromeClient()</p>
<p>{</p>
<p>});</p>
<p>reloadData();</p>
<p>}</p>
<p>&lt;b&gt;public void&lt;/b&gt; setText(&lt;strong&gt;String&lt;/strong&gt; s)</p>
<p>{</p>
<p>&lt;b&gt;if&lt;/b&gt; (s == &lt;b&gt;null&lt;/b&gt;)</p>
<p>&lt;b&gt;this&lt;/b&gt;.justifytextview = &quot;&quot;;</p>
<p>&lt;b&gt;else&lt;/b&gt;</p>
<p>&lt;b&gt;this&lt;/b&gt;.justifytextview = s;</p>
<p>reloadData();</p>
<p>}</p>
<p>&lt;strong&gt;@SuppressLint&lt;/strong&gt;(&quot;NewApi&quot;)</p>
<p>&lt;b&gt;private void&lt;/b&gt; reloadData()</p>
<p>{</p>
<p>&lt;b&gt;if&lt;/b&gt; (justifytextview != &lt;b&gt;null&lt;/b&gt;)</p>
<p>{</p>
<p>&lt;strong&gt;String&lt;/strong&gt; data = String.&lt;i&gt;format&lt;/i&gt;(htmlcode, toRgba(justifycolortextview), JustifytextSize, justifytextview);</p>
<p>Log.&lt;i&gt;d&lt;/i&gt;(&quot;test&quot;, data);</p>
<p>&lt;b&gt;this&lt;/b&gt;.loadDataWithBaseURL(&lt;b&gt;null&lt;/b&gt;, data, &quot;text/html&quot;, &quot;utf-8&quot;, &lt;b&gt;null&lt;/b&gt;);</p>
<p>}</p>
<p>// set WebView's background color *after* data was loaded.</p>
<p>&lt;b&gt;super&lt;/b&gt;.setBackgroundColor(justifycolorbackground);</p>
<p>// Hardware rendering breaks background color to work as expected.</p>
<p>&lt;b&gt;if&lt;/b&gt; (android.os.Build.VERSION.&lt;i&gt;SDK_INT&lt;/i&gt;&gt;= 11)</p>
<p>&lt;b&gt;this&lt;/b&gt;.setLayerType(WebView.&lt;i&gt;LAYER_TYPE_SOFTWARE&lt;/i&gt;, &lt;b&gt;null&lt;/b&gt;);</p>
<p>}</p>
<p>&lt;b&gt;public void&lt;/b&gt; setTextColor(&lt;b&gt;int&lt;/b&gt; valuehex)</p>
<p>{</p>
<p>justifycolortextview = valuehex;</p>
<p>reloadData();</p>
<p>}</p>
<p>&lt;b&gt;public void&lt;/b&gt; setBackgroundColor(&lt;b&gt;int&lt;/b&gt; valuehex)</p>
<p>{</p>
<p>justifycolorbackground = valuehex;</p>
<p>reloadData();</p>
<p>}</p>
<p>&lt;b&gt;public void&lt;/b&gt; setTextSize(&lt;b&gt;int&lt;/b&gt; textSize)</p>
<p>{</p>
<p>&lt;b&gt;this&lt;/b&gt;.JustifytextSize = textSize;</p>
<p>reloadData();</p>
<p>}</p>
<p>&lt;b&gt;private&lt;/b&gt;&lt;strong&gt; String&lt;/strong&gt; toRgba(&lt;b&gt;int&lt;/b&gt; values)</p>
<p>{</p>
<p>&lt;strong&gt;String&lt;/strong&gt; get = Integer.&lt;i&gt;toHexString&lt;/i&gt;(values);</p>
<p>&lt;b&gt;int&lt;/b&gt; M = Integer.&lt;i&gt;parseInt&lt;/i&gt;(get.substring(0, 2), 16);</p>
<p>&lt;b&gt;int&lt;/b&gt; N = Integer.&lt;i&gt;parseInt&lt;/i&gt;(get.substring(2, 4), 16);</p>
<p>&lt;b&gt;int&lt;/b&gt; O = Integer.&lt;i&gt;parseInt&lt;/i&gt;(get.substring(4, 6), 16);</p>
<p>&lt;b&gt;int&lt;/b&gt; P = Integer.&lt;i&gt;parseInt&lt;/i&gt;(get.substring(6, 8), 16);</p>
<p>&lt;b&gt;return&lt;/b&gt; String.&lt;i&gt; format&lt;/i&gt;(&quot;%d,%d,%d,%d&quot;, M, N, O, P);</p>
<p>}</p>
<p>}</p>
<p>

 

 

The type alignment setting is sometimes referred to as text alignment, text justification or type justification. The edge of a page or column is known as a margin, and a gap between columns is known as a gutter.

justified2

Leave a Comment: