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
Glow TextView in Android
By default Android doesn't provide a simple way to add the glow to the text view or any other view, so to make our app more attractive and beautiful we can add the glow effect to our TextView. In order to do so, we can use many different external libraries. A sample GIF is given below to get an idea
4 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
TreeView in Android with Example
If you are looking for new UI designs to represent huge data, then there are so many ways to represent this type of data. You can use pie charts, graphs, and many more view types to implement these views. For displaying such huge data then we can prefer using a TreeView. TreeView is similar to that
4 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
ExpandableBottomBar in Android
In this article, ExpandableBottomBar is added in android using Kotlin. It is the substitute for BottomNavigationView. BottomNavigationView makes it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destin
3 min read
PhotoView in Android with Example
In this article, PhotoView is added to android. PhotoView aims to help produce an easily usable implementation of a zooming Android ImageView using multi-touch and double-tap. Besides that, it has many more features like it notifying the application when the user taps on the photo or when the displa
2 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
Double-Tap on a View in Android
Detecting a double tap i.e. whenever the user double taps on any view how it is detected and according to the view a response can be added corresponding to it. Here an example is shown in which the double tap on the view is detected and corresponding to it a response is added in the form of toast. S
2 min read