Show a Button seeMore When the text in the text view goes out of view

Question

I want to show a Button seeMore when the text in the text view is larger than one line or when the text in the text view goes out of the view.I have done it using character length and substring method. But the problem is when it comes with different screen size, i was not able to to determine the string length. Now i am using a fixed length for four different screen sizes mainly medium,Normal ,large Xlarge. Could anyone help me to overcome this issue

Thanks inadvance....

Glycerol

is there any library availaible for seeMore feature in Android? – Glycerol

yes that is what i am looking for...could you please post the answer...it will be of great help to me. please let me know how you get around with different screen size issue in Android – Glycerol

You need to rewrite the question. Otherwise my answer would have nothing to do with your question. – Aminoplast

hi, i have modified the question as needed. please take look at it. – Glycerol

Answer 1

I have implememented a similar functionality recently, where I needed to show a list of users' comments. Each item would show a max of two lines and "more" link. When that link was clicked, the full text would be shown and "more" link hidden.

First, I had an array of Comment objects:

public class Comment {
    private boolean showFull;
    private String name;
    private String date,
    private String description;

    //standard constructor and a set of setters and getters, including
    public String getFullDescription();
    public String getShortDescription();
}

Now, in this particular implementation, the short description was just the first 100 chars of the long description with '...' appended (if the overall length was more than 100 chars).

I used the array of these Comment objects as the datasource for a custom Adaper:

public class CommentRowAdapter extends BaseAdapter {
    private List<Comment> data = null;
    ...
    //all standard method implementations, including get, count, etc., etc. and then

    public View getView(int position, View convertView, ViewGroup parent) {
        LinearLayout row = (LinearLayout) (convertView == null ? LayoutInflater
                .from(context).inflate(R.layout.listcomm, parent, false)
                : convertView);
        row.setClickable(false);
        final Comment comment = data.get(position);

        //populate all other elements of the row
                ...

                //and now the description
        if (comment.isShowFull()) {
            TextView tv = (TextView) row.findViewById(R.id.CommentDesc);
            tv.setText(comment.getDescriptionFull());
            tv.setTextColor(context.getResources().getColor(R.color.black));
            tv = (TextView) row.findViewById(R.id.CommentMore);
            tv.setVisibility(View.GONE);            
        } else {
            final TextView tvDesc = (TextView) row.findViewById(R.id.CommentDesc);
            tvDesc.setText(comment.getDescriptionShort());
            tvDesc.setTextColor(context.getResources().getColor(R.color.black));
            final TextView tvMore = (TextView) row.findViewById(R.id.CommentMore);
            tvMore.setVisibility(View.VISIBLE);
            tvMore.setTextColor(context.getResources().getColor(R.color.venue_blue));
            tvMore.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View arg0) {                    
                    comment.setShowFull(false); 
                    tvDesc.setText(comment.getDescriptionFull());
                    tvMore.setVisibility(View.GONE);
                    tvDesc.invalidate();
                }
            });

        }

        return row;
    }
}

The XML for the row was

<LinearLayout android:id="@+id/ListPoi"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical" android:padding="5dp"
    android:background="@drawable/listpoi_color" xmlns:android="http://schemas.android.com/apk/res/android">
    />
    <LinearLayout android:id="@+id/LinearLayout01"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:orientation="horizontal"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <TextView android:id="@+id/CommentName" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textSize="12sp"
            android:gravity="left" android:textStyle="bold" android:text="Name"
            android:singleLine="true" />
        <TextView android:id="@+id/CommentDate" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textSize="12sp"
            android:paddingLeft="5dp" android:textStyle="bold"  android:text="Date" android:singleLine="true" />
    </LinearLayout>

    <TextView android:id="@+id/CommentDesc" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:gravity="bottom"
        android:textSize="12sp" android:text="Description" />

    <TextView android:id="@+id/CommentMore" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:gravity="right"
        android:textSize="12sp" android:text="more" />
</LinearLayout>

The layout for different screen sizes was taken care of by the list itself.

You can extend this implementation by not limiting the size of text by number of characters but rather by the height of the text field. This question has a very good answer about how to compute the size of text in a text view. Using that technique, you can determine the number of characters that you need to use for truncation. Other than that, it's the ListView itself that's responsible for the layout in different screen sizes.

Aminoplast

Any chance of seeing a screenshot? – Predigestion