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.
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.
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)));
}
}
});
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>
