Drawing in a Fragment in Android

Question

I have the following code:

import android.app.Fragment;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.widget.TextView;

public class MainFragment extends Fragment {

protected AlphaAnimation fadeIn = new AlphaAnimation(0.0f , 1.0f ); 


public MainFragment(){}


public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    View rootView = inflater.inflate(R.layout.main_fragment, container, false);
    String fontPath = "fonts/roboto.ttf";
    Typeface font = Typeface.createFromAsset(getActivity().getAssets(), fontPath);

    TextView txt1 = (TextView) rootView.findViewById(R.id.headerTextView);
    txt1.setTypeface(font); 

    TextView txt2 = (TextView) rootView.findViewById(R.id.instructions);
    txt2.setTypeface(font);


    txt1.startAnimation(fadeIn);
    txt2.startAnimation(fadeIn);
    fadeIn.setDuration(1400);
    fadeIn.setFillAfter(true);

    Rect rectangle = new Rect(200, 56, 200, 112);


    return rootView;
  }
}

I'm trying to draw a rectangle, but for the life of me can't figure it out. I've looked everywhere for the onDraw() method, but I don't believe that is possible in a fragment.

Answer 1

There is no difference in drawing a Rectangle in Activity or Fragment. You just need a View added to your layout. You can draw anything as you wish.

Create a custom view and override the onDraw() like this to create a rectangle.

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

    public Rectangle(Context context) {
        super(context);
    }
    @Override
    public void onDraw(Canvas canvas) {
        paint.setColor(Color.GREEN);
        Rect rect = new Rect(20, 56, 200, 112);
        canvas.drawRect(rect, paint );
    }
 }

Now add this view into your layout , it could be the layout set in Fragment or Activity.

RelativeLayout relativeLayout = (RelativeLayout) rootView.findViewById(R.id.container);
relativeLayout.addView(new Rectangle(getActivity()));

ie, R.id.container is the layout id.

Answer 2

Create your own RelativeLayout class, in this case MyRelativeLayout (which extends the RelativeLayout class).

Then implement the onDraw feature and add your square.

During the Fragment's onCreateView method, return the MyRelativeLayout.

Read the comments.

public class MainFragment extends Fragment
{
    protected AlphaAnimation fadeIn = new AlphaAnimation(0.0f, 1.0f);

    public MainFragment() { }

    /*
     *  Create a custom RelativeLayout and implement the inherited 'onDraw' 
     *  method
     */
    class MyRelativeLayout extends RelativeLayout
    {
        public MyRelativeLayout(Context context)
        {
            super(context);
        }

        @Override
        protected void onDraw(Canvas canvas)
        {
            /*
             *  Draw your rectangle
             */
            Rect rectangle = new Rect(200, 56, 200, 112);

            Paint paint = new Paint();
            paint.setAntiAlias(true);
            paint.setColor(Color.BLACK);

            canvas.drawRect(rectangle, paint);

            super.onDraw(canvas);
        }
    }

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState)
    {

        /*
         *  Create the layout
         */
        MyRelativeLayout layout = new MyRelativeLayout(getActivity());
        layout.setLayoutParams(
            new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 
                                       ViewGroup.LayoutParams.MATCH_PARENT));

        /*
         *  Inflate your xml view
         */
        View rootView = 
            inflater.inflate(R.layout.main_fragment, container, false);

        String fontPath = "fonts/roboto.ttf";
        Typeface font = 
            Typeface.createFromAsset(getActivity().getAssets(), fontPath);

        TextView txt1 = (TextView) rootView.findViewById(R.id.headerTextView);
        txt1.setTypeface(font);

        TextView txt2 = (TextView) rootView.findViewById(R.id.instructions);
        txt2.setTypeface(font);

        txt1.startAnimation(fadeIn);
        txt2.startAnimation(fadeIn);

        fadeIn.setDuration(1400);
        fadeIn.setFillAfter(true);

        /*
         *  Add your view to the MyRelativeLayout you made, 'layout'
         */
        layout.addView(rootView);

        /*
         *  Return the 'layout' instead of just the 'rootView'
         */
        return layout;
    }
}