Expandable TextView in Android

ExpandableTextView is an Android library which allows us to easily create a TextView which can expand/collapse when user clicks on it .we can use this feature in many apps such as movie review app or storytelling app and in many other apps. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Before going to the coding section first do some pre-task

Go to app -> res -> values -> colors.xml file and set the colors for the app.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>

</resources>

Go to app -> res -> values -> strings.xml file and set the string for the app.

XML

<resources>
    <string name="app_name">Manabu-GT Expandable Text View </string>
    <string name="expandable_text">We Sanchhaya Education Pvt. Ltd., are registered and headquartered
        at BC 227, 2nd Floor, Matrix Business Tower, B4, Sector 132, Noida, UP-201301, hereinafter
        referred to as GeeksforGeeks. We also offer paid Courses managed by Sanchhaya Classes Pvt. Ltd.
        with registered office address B-142, Vishwash Park, Uttam Nagar, New Delhi, North Delhi, Delhi, India, 110059.
        At GeeksforGeeks, we value your trust and  respect your privacy. This privacy statement (“Privacy Statement”)
        applies to the treatment of personally identifiable information submitted by, or otherwise obtained from,
        you in connection with the associated application (“Application”). The Application is
        provided by GeeksforGeeks (and may be provided by Geeksforgeeks on behalf
        of a GeeksforGeeks licensor or partner (“Application Partner”).
        By using or otherwise accessing the Application, you acknowledge that you accept the practices
        and policies outlined in this Privacy Statement.</string>
</resources>

Go to Gradle Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “sync Now” on the above pop-up.

implementation ‘com.ms-square:expandableTextView:0.1.4’

Step 3: Designing the UI

In the activity_main.xml remove the default TextView and change the layout to RelativeLayout and add the ExpandableTextView  and inside it, we add a TextView and ImageButton as shown below. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:expandableTextView="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--  ExpandableTextView Container -->
    <com.ms.square.android.expandabletextview.ExpandableTextView
        android:id="@+id/expand_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        expandableTextView:animDuration="100"
        expandableTextView:maxCollapsedLines="5">

        <!-- simple text view  -->
        <TextView
            android:id="@id/expandable_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:textColor="#666666"
            android:textSize="16sp" />

        <!-- expandable ImageButton -->
        <ImageButton
            android:id="@id/expand_collapse"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:background="@android:color/transparent" />

    </com.ms.square.android.expandabletextview.ExpandableTextView>

</RelativeLayout>

Note: The id of ImageButton must be expanded collapse and id of TextView must be expandable text 

Properties of ExpandableTextView

• expandableTextView:collapseDrawable: Customize a drawable set to ImageButton to collapse the TextView
• expandableTextView:expandDrawable: It is used to set drawable to ImageButton to expand the TextView
• expandableTextView:maxCollapsedLines: The maximum number of text lines allowed to be shown when the TextView gets collapsed (defaults value is 8 )
• expandableTextView:animDuration: It is used to set the duration of the Animation for the expansion/collapse (defaults to 300ms)
• expandableTextView:animAlphaStart: The alpha value of the TextView when the animation starts (NOTE) Set this value to 1 if you want to disable the alpha animation (defaults to 0.7f )

Step 4: Coding Part

Open the MainActivity.java file and inside on Create()  create and initialize the expandable text view and setText to it from the strings.xml (R.string.expandable_text) as shown below 

Java

// getting reference of  ExpandableTextView
ExpandableTextView expTv = (ExpandableTextView) findViewById(R.id.expand_text_view).findViewById(R.id.expand_text_view);

// calling setText on the ExpandableTextView so that
// text content will be  displayed to the user
expTv.setText(getString(R.string.expandable_text));

Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

import com.ms.square.android.expandabletextview.ExpandableTextView;

public class MainActivity extends AppCompatActivity {


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

        // getting reference of  ExpandableTextView
        ExpandableTextView expTv = (ExpandableTextView) findViewById(R.id.expand_text_view).findViewById(R.id.expand_text_view);

        // calling setText on the ExpandableTextView so that
        // text content will be  displayed to the user
        expTv.setText(getString(R.string.expandable_text));
    }
}

Output: