Expandable TextView in Android
Last Updated : 06 Apr, 2021
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:
Similar Reads
TextView in Android with Example TextView is a simple widget that is seen in every android application. This widget is used to display simple text within the android application. We can add custom styling to the text that we have to show. In this article, we will take a look at How to create a simple Text View in an android applica
2 min read
TextWriter in Android with Example TextWriter is used to animate text. TextWriter can be used when users open the app i.e. in place of Splash Screen. One can also use Splash Screen instead of TextWriter but TextWriter is an animation library and it is known that animations help to gain the attention of the user so it is best to learn
2 min read
Autosizing TextView in Android If the user is giving the input and the input needs to be shown as TextView and if the user inputs the stuff which can go out of the screen, then in this case the font TextView should be decreased gradually. So, in this article, it has been discussed how the developer can reduce the size of TextView
6 min read
TextView widget in Android with Examples Widget refers to the elements of the UI (User Interface) that help the user interact with the Android App. TextView is one of many such widgets which can be used to improve the UI of the app. TextView refers to the widget which displays some text on the screen based on the layout, size, colour, etc
5 min read
Expandable Text in Android using Jetpack Compose Many applications display tons of textual data in the form of passages and have the feature of expanding or contracting it. Generally, 2-3 out of n lines of a passage are displayed along with "View More", "Read More", and "..." at the end. These appear like hyperlinks that upon click expand the text
2 min read