Monday, September 17, 2012

Exapand - Collapse Android TextView.

Hello,
Here I want to share some knowledge about android textview. Android Textview is a very Useful element in your application.
If you want to make functionality like expand - collapse of textview it is easy after end of this article you can make this functionality.

I guess,you have a basic knowledge of Android technology. Than you can easily grasp this article

e.g. If you want to expand or collapse your textview like in  below is image of Play store app.



Here I am only describe that how more/less button functionality are work. 
first of all in your activity_main.xml file paste below code.
activity_main.xml

<ScrollView 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" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/description_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="5"
            android:text="@string/desc_content" />

        <ImageButton
            android:id="@+id/show"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/description_text"
            android:background="@drawable/arrow_down"
            android:clickable="true" />

        <View
            android:id="@+id/view1"
            android:layout_width="wrap_content"
            android:layout_height="2dp"
            android:layout_below="@+id/description_text"
            android:layout_marginTop="5dp"
            android:layout_toLeftOf="@+id/show"
            android:background="#000" />

        <ImageButton
            android:id="@+id/hide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/description_text"
            android:background="@drawable/arrow_up"
            android:clickable="true"
            android:visibility="invisible" />
    </RelativeLayout>

</ScrollView>


now open your main java file and paste below code
MainActivity.java

package com.example.expand.textview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.TextView;

public class MainActivity extends Activity {
TextView descText;
ImageButton show, hide;

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

descText = (TextView) findViewById(R.id.description_text);
show = (ImageButton) findViewById(R.id.show);
show.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
System.out.println("Show button");
show.setVisibility(View.INVISIBLE);
hide.setVisibility(View.VISIBLE);
descText.setMaxLines(Integer.MAX_VALUE);

}
});
hide = (ImageButton) findViewById(R.id.hide);
hide.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
System.out.println("Hide button");
hide.setVisibility(View.INVISIBLE);
show.setVisibility(View.VISIBLE);
descText.setMaxLines(5);

}
});

}

}

and finally change your string.xml file
string.xml

<resources>

    <string name="app_name">Expand TextView</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
    <string name="desc_content">    Android powers hundreds of millions of mobile devices in more than 190 countries around the world. It\'s the largest installed base of any mobile platform and growing fast—every day another million users power up their Android devices for the first time and start looking for apps, games, and other digital content.

Android gives you a world-class platform for creating apps and games for Android users everywhere, as well as an open marketplace for distributing to them instantly.
</string>

</resources>

and run your Project It will give you below output.


After Clicking on the arrow button you will see the below screen in your application. it will expand your textview to maximum of height.


I Also added image of arrow button. from below you can download








8 comments:

  1. Thanks, nice post, easier than creating a custom component..

    ReplyDelete
  2. It was a great help. Can we animate the image like slide down when pressed.? If yes , how? Thanks

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Great Example .... hardik Thank you so much.. Great Job :)

    ReplyDelete