How do I draw certain views after others?

Question

I have a simple LinearLayout containing only a custom view extending TextView (which I shall start calling "IdiomView") and a ListView. The only difference in IdiomView from a normal TextView is that I have overridden the onDraw() method to iteratively reduce the text size until the text is less than 3 lines long. My problem is that when the views are drawn, the user will see this:

 ______________
|__ACTION_BAR__|
|  IdiomView   |
|______________|
|              |
|   ListView   |
|              |
|              |
|______________|

which quickly becomes:

 ______________
|__ACTION_BAR__|
|__IdiomView __|
|              |
|   ListView   |
|              |
|              |
|              |
|______________|

i.e. the ListView is drawn and then jumps up after IdiomView has sorted out its size.

What I would like is a way to wait until my IdiomView is fully drawn, before drawing the ListView. This post What event is fired after all views are fully drawn? explains how to line up a thread after the drawing is complete by calling View.post(Runnable). The problem is my overridden onDraw() method calls onDraw() multiple times in order to calculate the whether the smaller text covers less than 3 lines, so this element probably "finishes drawing" numerous times before I would want the ListView to appear.

I appreciate all comments and answers. Here's my current code:

layout XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:background="@color/off_white"
    android:orientation="vertical" >

    <carter.cwords.idioms.IdiomView
        android:id="@+id/idiom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:textColor="@color/transparent"
        android:textSize="28sp"
        android:textStyle="italic"
        android:visibility="invisible" />

    <ListView
        android:id="@+id/quote_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:choiceMode="none"
        android:footerDividersEnabled="false"
        android:headerDividersEnabled="false"
        android:visibility="invisible" />

</LinearLayout>

Activity:

private IdiomView mIdiomTextView;
private ListView mQuoteList;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.idiom_of_the_day);
    mIdiomTextView = (IdiomView) findViewById(R.id.idiom);
    mQuoteList = (ListView) findViewById(R.id.quote_list);      

    // Populate page data onResume()
}

@Override
protected void onResume() {
    super.onResume();

    sendRequest(R.string.url_idiom_of_the_day, new AfterRequest(){
        @Override
        public void useResults(Document resultXml) {
            if(resultXml != null){

                Log.i(getClass().getSimpleName(), "useResults()");

                String idiomString = XmlUtilities.getTextValue(resultXml, NetworkHelper.XML_TAG_IDIOM_CONTENT);

                logDebug("idiomString: " + idiomString);
                mIdiomTextView.setText("\"" + idiomString + "\"");
                mQuoteList.setAdapter(new ContentAdapter(mContext, resultXml));
                mIdiomTextView.setVisibility(View.VISIBLE);

                mIdiomTextView.post(new Runnable(){
                    @Override
                    public void run() {
                        mQuoteList.setVisibility(View.VISIBLE);
                    }
                });
            }

        }
    });

}

IdiomView:

public class IdiomView extends TextView {

    public IdiomView(Context context) {     
        super(context);
    }

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.i(getClass().getSimpleName(), "onDraw(): " + this.getLineCount());
        if(this.getLineCount() > 2){
            this.setTextSize(TypedValue.COMPLEX_UNIT_PX, this.getTextSize()-1);
        }
        else{
            this.setTextColor(getResources().getColor(R.color.text));
        }
        Log.i(getClass().getSimpleName(), "onDraw(): " + this.getLineCount());

    }


}

Thank you very much.

You could probably avoid setting the text size repeatedly(and redrawing the widget at the same time) by using it's `getPaint()` method. Use that `Paint` to measure the text's width in a loop(with different text sizes), until you'll see what value will fit the maximum width available(to the `TextView`) two times and use that direct value for the text size — user, Feb 20 '13 at 21:35
Thanks Luksprog. This is how I should have approached the problem. [This thread](http://stackoverflow.com/questions/14276853/how-to-measure-textview-height-based-on-device-width-and-font-size) provides detailed information about measuring `TextView`s. — William Carter, Feb 21 '13 at 23:42

Kirk · Answer 1 · 2013-02-20T21:39:24.763

I've never tried this on a View before, but I think it could help direct your app to only work with the ListView, after the IdiomView is drawn. You may be able to use a listener to get this to happen. However, it will require you to use a code behind method.

Create an interface in IdiomView such as

public static interface OnDrawComplete {
    public abstract void onDrawComplete();
}

private OnDrawComplete mListener;

public IdiomView(Context context) {     
    super(context);
    // this forces it to make sure it's actually an activity
    // context so you can get a listener
    if (context instanceof Activity)
        this.mListener = context;
}

Now at the end of your drawing, call it

if (this.mListener != null)
    this.mListener.onDrawComplete();

This will call the Activity that created the object and notify of it's drawing. So within your Activity, you implement the interface

public void onDrawComplete() {
    // After the draw completes, it calls this callback.
    // setup the rest of your layout now
    mQuoteList = (ListView) findViewById(R.id.quote_list);
    this.populateQuoteList();
}

You may also be able to call this.mListener.onDrawComplete(); in some sort of other View event, but I can't find one that is appropriate. You mention the View.post(runnable), which may work but I've never used that sort of thing either.

The biggest potential issue is that I don't know how the IdiomView will receive a Context or which one. In this case you need the Activity context of the one implementing the interface.

It may be that you need to instantiate and add it to the layout manually to use this method if it doesn't get the right context.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mIdiomTextView = new mIdiomTextView(this);
    // add to the Layout manually.  
}

Here is more of it fleshed out

IdiomView

public class IdiomView extends TextView {
    public static interface OnDrawComplete {
        public abstract void onDrawComplete();
    }

    private OnDrawComplete mListener;

    public IdiomView(Context context) {     
        this(context, 0);
    }

    public IdiomView(Context context, AttributeSet attrs){
        super(context, attrs);
        if (context instanceof Activity)
            this.mListener = context;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // do your drawing code here
        // ...
        // after drawing, call the listener, which tells your
        // Activity to deal with the ListView.
        if (this.mListener != null)
            this.mListener.onDrawComplete();
    }
}

Activity

public class MyActivity extends Activity implements IdiomView.OnDrawComplete {
    //...

    private IdiomView mIdiomTextView;
    private ListView mQuoteList;

    public void onDrawComplete() {
        // After the draw completes, it calls this callback.
        // setup the rest of your layout now
        mQuoteList = (ListView) findViewById(R.id.quote_list);
        this.populateQuoteList();
        // now show the ListView
        mQuoteList.setVisibility(View.Visible);
    }

    private void populateQuoteList() {
        // populate your ListView here
    }
}

This is a fantastic answer and one that answers the question I asked perfectly. However, after implementing this answer, I timed how long it took my `IdiomView` to finish drawing and it was almost half a second. The question I asked was a bad one and others with the same problem should look at Luksprog's comment (above) who's method takes about 50 milliseconds. — William Carter, Feb 21 '13 at 23:44
Glad you fixed it. See if Luksprog will add it as an answer so you can accept it. — Kirk, Feb 22 '13 at 00:01

score 2 · Accepted Answer · answered Feb 22 '13 at 05:18

2

Setting the text size repeatedly until you find the proper font size could be very inefficient because your TextView will need to be remeasured and redrawn each time. Instead of doing this, you could measure and set the text only once by using its TextView.getPaint() method. You could than measure the text with the Paint in a loop providing it different font sizes until the value returned by Paint.measureText() is below two times the current width of the widget.

answered Feb 22 '13 at 05:18

user

86,916
18
197
190

Looping until the width is less than twice the maximum width can still span three lines if longer words wrap over to a third, so I just measured with a maximum height instead. – William Carter Feb 22 '13 at 10:48
@WilliamCarter I forgot about that, you could still measure the width but it will require an additional check to see where half of the text stands(in a word or empty space) and make some adjustments from there. – user Feb 22 '13 at 11:54

How do I draw certain views after others?

2 Answers2