Draw a line within a Fragment using Canvas in Android

Question

I am trying to draw a line with Canvas inside of a Fragment. After some research it appeared that I just had to extend the View class and override onDraw, then return an instance of my new View class where I would normally inflate a layout. However when I access the fragment on my device all I see is a white screen. Here is what I have so far:

package com.example.testing;

import android.app.Fragment;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class LineTab extends Fragment 
{       

    private class DrawView extends View {
        Paint paint = new Paint();

        public DrawView(Context context) {
            super(context);
            paint.setColor(Color.BLACK);
        }
        public DrawView(Context context, AttributeSet attrs) {
            super(context, attrs);
            paint.setColor(Color.BLACK);
        }
        public DrawView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            paint.setColor(Color.BLACK);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);

            canvas.drawLine(0, 0, 50, 50, paint);
            canvas.drawLine(50, 0, 0, 50, paint);
        }

        @Override 
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);

            int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
            int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
            this.setMeasuredDimension(parentWidth, parentHeight);
        }
    }   

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);

        return new DrawView(this.getActivity());
    }
}

What am I missing here?

EDIT: For anyone else facing this problem, this code turned out to work fine. I just had issues displaying it within my activity.

Answer 1

A few things you need to do when creating your own type of Widget:

• What size should the view have? You need to overwrite one of or both of onMeasure and onLayout. Check the Guide to customizing widgets that shows what should go into onMeasure.

• Overwrite/implement all three constructors. This is more kind of optional in your case, where you dont get inflated via XML. But it's good style to do so.

This should bring you at least a step forward. Maybe there're other issues with that code. Let's see.

EDIT: The second way is to use a Drawable and a usual ImageView to draw on the screen. This is more direct and needs much less lines to code.

Here's the XML that puts an ImageView on the screen. Note, that it does not define android:src.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/drawLineImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFFFF" />

</FrameLayout>

Now you can code the drawable and connect it to the ImageView:

public class DrawLineActivity extends Activity {
/* (non-Javadoc)
 * @see android.app.Activity#onCreate(android.os.Bundle)
 */
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.draw_line);

    // Create a simple drawable and set it in the ImageView
    ((ImageView) findViewById(R.id.drawLineImageView)).setImageDrawable(new MyDrawable());
}

private class MyDrawable extends Drawable {
    @Override
    public void draw(Canvas canvas) {
        Paint paint = new Paint();
        paint.setColor(Color.RED);
        canvas.drawLine(0, 0, 50, 50, paint);
        canvas.drawLine(50, 0, 0, 50, paint);
    }

    @Override
    public int getOpacity() {return 0;}

    @Override
    public void setAlpha(int alpha) {}

    @Override
    public void setColorFilter(ColorFilter cf) {}
}
}