Tuesday, January 6, 2015

TextView new line (multiline) in android

TextView new line (multiline)
TextView display text on android app. by default, TextView show text on a single line, and if it is long then TextView take more lines to display its text. android developers can generate a new line on TextView both programmatically and syntactically. android developers can make a multiline TextView without splitting text to multiline by android:minLines attribute.

the following android example code demonstrate us how can we syntactically create a new line on TextView widget by xml layout file and string resource file.

the simplest way to create a new line on TextView is android:text attribute. android:text attribute allow us to display text on android app. we can add a simple '\n' to TextView text where we want to start a new line. in this way we can create a multiline TextView widget in android app. we can assign android:text attribute value by this way android:text="Line1 \n Line2 \n Line3" for a TextView widget. this value will display the specified TextView widget's text on three lines. each '\n' on TextView text generate a new line on TextView text.

another popular way to display text on TextView widget by referencing from string resource file. we can put a simple string name value pair on strings.xml file in res/values folder. then we can reference it to TextView widget by android:text attribute as android:text="@string/Multiline_Text_By_N". finally the TextView widget will display text on android app from string resource file.

so, if we want to create a new line on Textview and if we also want to generate text from string resource file, then we can simply put '\n' on string resource where we need a new line as example <string name="Multiline_Text_By_N">Line number 1 \nLine number 2</string>. this reference string will display two lines text on TextView.

android:minLines attribute allow us to set the minimum number of lines displayed in the TextView. if our text is small then TextView will display additional lines as blank line.

android:maxLines attribute allow us to set the maximum number of lines displayed in the TextView. if we break our text to 5 lines and set the android:maxLines attribute value to 3 then last 2 lines will be discarded (hide) from TextView widget.
activity_main.xml

<LinearLayout
    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"
    android:orientation="vertical"
    android:layout_margin="25dp"
    tools:context=".MainActivity"
    >

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#DEB887"
        android:text="This is line 1 \nThis is line 2 \nLine number 3"
        />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#DA70D6"
        android:text="This is line 1 \nThis is line 2 \nLine number 3"
        android:maxLines="2"
        />

    <TextView
        android:id="@+id/text_view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#8FBC8F"
        android:text="This is line 1 \nThis is line 2"
        android:minLines="3"
        />

    <TextView
        android:id="@+id/text_view4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#5F9EA0"
        android:text="@string/Multiline_Text_By_N"
        />

</LinearLayout>
res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My Application5</string>
    <string name="action_settings">Settings</string>
    <string name="Multiline_Text_By_N">
        Line number 1 \nLine number 2
    </string>
</resources>


the following image shows the string resource file's contents and location on android app file system. strings.xml file located in res/values folder.



the following image shows the outout of this android app. the image shows the multiline text on TextView which we generated syntactically on xml layout file.

TextView new line programmatically

this is the second example app of this tutorial. the following example code demonstrate us how can create a new line on Textview programmatically in java file.

android setText() method allow us to specify the text of TextView widget to display in android app. simply we can put an '\n' on text where we want to create a new line as example setText("Line1 \n Line 2").

Append() method allow us to append text with TextView widget's old text and finally display both old and appended text on TextView. we can append a android system line separator on TextView text where we want to start a new line then we can append next line's text to TextView. so the specified TextView will display multiline text on android app.

android System class allow us to get the system related information and resources. System.getProperty(String propertyName) method allow us to get the value of a particular system property. so we can get the android system line separator as this way System.getProperty("line.separator").

we can generate TextView text from html formatted contents. so we can simply put a html 'break' <br /> tag in text where we want to start new line. finally we can set the TextView text as setText(Html.fromHtml(String)).

we also can populate TextView text from string resource file. to do this we can reference it as this way setText(R.string.Multiline_Text_By_N).

we also can declare a String variable and populate the string by mixing android line separator and text. finally we can set TextView text by setText(String) method. the TextView will display multiline text on android app.
activity_main.xml

<LinearLayout
    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"
    android:orientation="vertical"
    android:layout_margin="25dp"
    tools:context=".MainActivity"
    >

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#F5F5DC"
        android:text="Sample TextView 1"
        />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#E9967A"
        android:text="Sample TextView 2"
        />

    <TextView
        android:id="@+id/text_view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#DEB887"
        android:text="Sample TextView 3"
        />

    <TextView
        android:id="@+id/text_view4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#7FFF00"
        android:text="Sample TextView 4"
        />

    <TextView
        android:id="@+id/text_view5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#B0C4DE"
        android:text="Sample TextView 5"
        />

    <Button
        android:id="@+id/push_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="Apply TextView New Line"
        android:onClick="perform_action"
        />

</LinearLayout>
MainActivity.java

package com.cfsuman.me.myapplication5;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.text.Html;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void perform_action(View v)
    {
        TextView tv1 = (TextView) findViewById(R.id.text_view1);
        //define multiline by \n line separator
        tv1.setText("Line number 1 \nLine number 2 \nLine number 3");

        TextView tv2 = (TextView) findViewById(R.id.text_view2);
        tv2.setText("Line number 1");
        //define new line by append android system line separator
        tv2.append(System.getProperty("line.separator"));
        tv2.append("Line number 2");

        TextView tv3 = (TextView) findViewById(R.id.text_view3);
        String str = "Line number 1"
                + System.getProperty("line.separator")
                + "Line number 2";
        //define new line by android system line separator
        tv3.setText(str);

        TextView tv4 = (TextView) findViewById(R.id.text_view4);
        //define new line by html <br />tag
        String str2 = "Line number 1 <br /> Line number 2";
        //need to import android.text.Html class
        tv4.setText(Html.fromHtml(str2));

        TextView tv5 = (TextView) findViewById(R.id.text_view5);
        tv5.setText(R.string.Multiline_Text_By_N);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}


the following image displays the initial state of the second android app.




the following image displays the multiline text on Textview widget which we created programmatically at run time in java file.

More android examples