Expanding in Context in a ListView - Android

Question

I have a listView, one component of the row is a TextView. By default, I wish to show only 2 rows of text in the TextView. But if the user taps on the TextView I wanted to the textView to expand in context.

I actually have this portion working, but I want to have a more content indicator :

My current implementation (Below) has it's own issues w/ not collapsing if the list view is scrolled, but I will handle that by storing the values for each cursor record in some collection..

I tried using chatBubble.getLineCount() but that returns zero initially b/c it has not gone through onLayout (from my understanding).

I only wish to show it if there is more than 2 lines of content.

I figure my solution will be creating my own implementation of TextView which can handle some of my requirements, but not sure if anyone has any examples I can look at.. (Or other suggestions).

   <RelativeLayout
        android:id="@+id/linear_layout_row_three"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linear_layout_row_two"
        android:layout_toRightOf="@+id/munzeeQuickContact"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/chat_bubble"
            android:clickable="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:background="@drawable/chat_bubble"
            android:text="I went looking for this particular token on a rainy day, and I was unable to locate it due to the bad weather, next time please leave an um I went looking for this particular munzee on a rainy day, and I was unable to locate it due to the bad weather, next time please leave an um" />
        <ImageView 
            android:id="@+id/minimize_maximize"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/chat_bubble"
            android:layout_alignRight="@id/chat_bubble"
            android:visibility="gone"
            android:src="@android:drawable/ic_menu_more"/>
    </RelativeLayout>

Here is some of the source I currently have :

final TextView chatBubble = (TextView) view.getTag(R.id.chat_bubble);
        final ViewGroup expandableContainer = (ViewGroup) view.getTag(R.id.linear_layout_row_three);
        final ImageView minimizeMaximize = (ImageView) view.getTag(R.id.minimize_maximize);
        chatBubble.setOnClickListener(

                new View.OnClickListener() {
                    boolean isExpanded = false;
                    int lastHeight = 0;
                    // This is for the auto expanding text view
                    @Override
                    public void onClick(View v) {
                        if (isExpanded) {
                            ViewGroup.LayoutParams params = (ViewGroup.LayoutParams) expandableContainer
                                    .getLayoutParams();

                            params.height = lastHeight;
                            chatBubble.setMaxLines(2);

                            expandableContainer.setLayoutParams(params);
                            expandableContainer.invalidate();
                            minimizeMaximize.setVisibility(View.VISIBLE);
                        } else {
                            lastHeight = expandableContainer.getHeight();

                            ViewGroup.LayoutParams params = (ViewGroup.LayoutParams) expandableContainer
                                    .getLayoutParams();

                            params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
                            chatBubble.setMaxLines(99);

                            expandableContainer.setLayoutParams(params);
                            expandableContainer.invalidate();
                            minimizeMaximize.setVisibility(View.VISIBLE);
                        }

                        isExpanded = !isExpanded;

                    }
                });

Answer 1

I figure my solution will be creating my own implementation of TextView which can handle some of my requirements, but not sure if anyone has any examples I can look at..

Have a look at the class below:

public class LimitedTextView extends TextView {

    private boolean mStatus;

    public LimitedTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Paint p = getPaint();
        String s = getText().toString();
        if (s != null && !s.equals("")) {
            int m = (int) p.measureText(s);
            if (m < getMeasuredWidth() * 2) {
                modifyParent(true);
            } else {
                modifyParent(false);
            }
        }
    }

    private void modifyParent(boolean how) {
        RelativeLayout rl = (RelativeLayout) getParent();
        rl.findViewById(R.id.minimize_maximize).setVisibility(
                how ? View.GONE : View.VISIBLE);
        if (mStatus) {
            setMaxLines(40); // arbitrary number, set it as high as possible
        } else {
            setMaxLines(2);
        }
    }

    public void storeCurrentStatus(boolean status) {
        mStatus = status;
    }

}

The LimitedTextView will measure its text using its own Paint object and test it against the measured width. If it fits on the two allowed rows it will hide the ImageView, otherwise it will show it. It also stores the current status of row(expanded/not-expanded) and increases or decreases the maximum number of lines to obtain the proper appearance. In the getView method of the adapter you would:

• set the text

• set the status from a boolean array according to a position(this is also required to keep the rows in order as you scroll the list):

  textView.storeCurrentStatus(mStatus[position])

• set the OnClickListener on the LimitedTextView itself and from there update the status:

  mStatus[(Integer) v.getTag()] = !mStatus[(Integer) v.getTag()];
  notifyDataSetChanged();
  

• based on the same mStatus boolean array you'll probably change the drawable of the ImageView, to show a different one depending on if the TextView is expanded or not

I manually wrote it, so there could be some mistakes I'm missing right now, take it as an idea. The LimitedTextView could be improved as in performance, I also don't know how well it would behave if you want to animate expanding the text.