How can I implement a collapsible view like the one from Google Play?

Question

I want to implement a collapsible view, exactly like the one from Google Play market. It displays a number of rows from the content, and an arrow, and tapping on the arrow reveals the whole content. Is this implemented with the ExpandableListView or is there any other solution?

Screen shots attached with highlighting what I am looking for. Thanks.

Answer 1

Warpzits's solution upgraded (expand any container content):

A layout XML:

<LinearLayout
    android:layout_width = "match_parent"
    android:layout_height = "wrap_content"
    android:clickable = "true"
    android:focusable = "true"
    android:orientation = "vertical"
    android:gravity="end">

    <ImageButton
      android:id = "@+id/expandImageButton"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:layout_margin = "12dp"
      android:background = "#00ffffff"
      android:src = "@drawable/dropdown_white"
      android:onClick="onClickExpandImageButton"/>

    <TextInputLayout
      android:id = "@+id/container"
      android:layout_width = "match_parent"
      android:layout_height = "match_parent"
      android:visibility="gone">

      <EditText
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"/>

    </TextInputLayout>

  </LinearLayout>

An onClick handler:

public void onClickExpandImageButton(
  View expandImageButton) {

  expandImageButton
    .setRotation(
      container.getVisibility() == View.GONE ?
      180 :
      0);

  container.setVisibility(
    container.getVisibility() == View.GONE ?
    View.VISIBLE :
    View.GONE);
}

Image from /res/drawable/:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

<path
  android:fillColor="#f5f5f5"
  android:pathData="M7,10 L12,15 L17,10 Z" />
<path
  android:pathData="M0,0 L24,0 L24,24 L0,24 Z" />
</vector>

Answer 2

Excuse my horrible english.

Based on Warpzip response

res/values/strings.xml
 ...
 ...
 <string name="str_more"><![CDATA[<p><b>This is the header</b><u>( see more ..)</u>]]></string>
 <string name="str_less"><![CDATA[<p><b>This is the header</b><u>(less ..)</u>]]></string>
 <string name="str_details"><![CDATA[<p>A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.A long string of text that do not want to show all the time.</p>]]></string>
 ...
 ...

In our layoutIn our layout, we can include a scrollview with a vertical LinearLayout (or with a little work a RelativeLayout). In these:

<TextView
             android:id="@+id/txtvw_header"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_alignParentTop="true"
             android:text="@string/str_more"
             android:textAppearance="?android:attr/textAppearanceMedium" />

         <TextView
             android:id="@+id/txtvw_detail"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentLeft="true"
             android:layout_below="@+id/txtvw_tituloEntreTodos"
             android:text="@string/str_details"
             android:textAppearance="?android:attr/textAppearanceMedium" />

Finally our Activity

 view = inflater.inflate(R.layout.f_entretodos, container, false);
         info = (TextView) view.findViewById(R.id.txtvw_header);
         fullinfo = (TextView) view.findViewById(R.id.txtvw_detail);
         info.setText(Html.fromHtml(getString(R.string.str_more)));
         fullinfo.setText(Html.fromHtml(getString(R.string.str_detail)));
         fullinfo.setVisibility(View.GONE);
         info.setOnClickListener(new OnClickListener(){

             @Override
             public void onClick(View v) {
                 // TODO Auto-generated method stub
                 if (fullinfo.isShown()){
                     fullinfo.setVisibility(View.GONE);
                     info.setText(Html.fromHtml(getString(R.string.str_more)));
                 }else{
                     fullinfo.setVisibility(View.VISIBLE);
                     info.setText(Html.fromHtml(getString(R.string.str_less)));
                 }
             }

         });

Answer 3

There is a simpler way:

        final TextView descriptionText = (TextView) view.findViewById(R.id.detail_description_content);
        final TextView showAll = (TextView) view.findViewById(R.id.detail_read_all);
        showAll.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                showAll.setVisibility(View.INVISIBLE);

                descriptionText.setMaxLines(Integer.MAX_VALUE);
            }
        });

XML:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/detail_description_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <TextView
            android:id="@+id/detail_description_content"
            android:maxLines="5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/detail_read_all"
            android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</ScrollView>

The important part is maxlines and scrollview. This doesn't give a slow animation (that would be a bid more complex) but an instant open effect.