Add view in Android

Question

I created a DrawCircle View Class to draw a Circle. I like to add this DrawCircle View Class to a fragment. The DrawCircle View class is as follow.

public class DrawCircle extends View {

    private Paint paint;

    public DrawCircle(Context context) {
        super(context);
        // create the Paint and set its color
        paint = new Paint();
        paint.setColor(Color.WHITE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawColor(Color.BLUE);
        canvas.drawCircle(200, 200, 100, paint);
    }
}

Inside my fragment, I have a Layout already inflated.

public class GripForce extends Fragment{
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParam1 = getArguments().getString(ARG_PARAM1);
            mParam2 = getArguments().getString(ARG_PARAM2);
        }


    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        v = inflater.inflate(R.layout.fragment_grip_force, container, false);
        final Button buttonAcce = (Button) v.findViewById(R.id.gripbutton);
        buttonAcce.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                if (vibrate == false) {
                    vibrate = true;
                    buttonAcce.setText("VIBRATE STOP");
                    // Vibrate for 300 milliseconds
                    timer = new Timer();
                    myTimerTask = new MyTimerTask();
                    timer.schedule(myTimerTask, 1, 80000);
                    mVibrator.vibrate(100000);
                } else {
                    timer.cancel();
                    timer.purge();
                    mVibrator.cancel();
                    vibrate = false;
                    buttonAcce.setText("VIBRATE");

                }

            }
        });
        mVibrator = (Vibrator) getActivity().getSystemService(Context.VIBRATOR_SERVICE);


        return v;
    }

}

My question is how to get this DrawCirle View on top of the existing View.

Thanks in advance.

EDIT: I set the View in the xml.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.forcetest.GripForce">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|top">

        <com.abbott.forcetest.DrawCircle
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/circleView"
            android:layout_weight="1"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_gravity="center_horizontal|bottom">



        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="VIBRATE"
            android:id="@+id/gripbutton"
            android:background="#e71919"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="20dp" />
    </LinearLayout>


</FrameLayout>

Then in the onCreateView, the program crashed at the line

v = inflater.inflate(R.layout.fragment_grip_force, container, false);

What is worng?

EDIT2: I changed my xml to

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.abbott.forcetest.GripForce"
    android:id="@+id/gripLayout">

    <!--<LinearLayout-->
        <!--android:orientation="vertical"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:layout_gravity="center_horizontal|top">-->

        <!--<com.abbott.forcetest.DrawCircle-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"-->
            <!--android:id="@+id/circleView"-->
            <!--android:layout_weight="1"/>-->
    <!--</LinearLayout>-->

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_gravity="center_horizontal|bottom">
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="VIBRATE"
            android:id="@+id/gripbutton"
            android:background="#e71919"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="20dp" />
    </LinearLayout>


</FrameLayout>



Then in the program,

final FrameLayout l_out = (FrameLayout) v.findViewById(R.id.gripLayout);
DrawCircle circleVIew = new DrawCircle(this.getContext());
l_out.addView(circleVIew);

It works now.

Answer 1

You are trying to self-define view. And now assuming that you already make everything related to the view drawing fine( I haven't check your code related to view drawing), and now what you need to do to place that view is just simply code it in your layout file.

Like this:

<com.example.yourprojectname.DrawCircle
    android:layout_width=xxxx
    android:layout_height=xxx
   />

Like what you do to TextView or Button, code it in layout xml file and remember to findViewById in you java code. It will appear.

And of course you could do it programmingly, try addView method in your code. But write it in xml file is a little bit easier, also you can define the position you want that view to show up.

Answer 2

Just add it like you would add any other view dynamically.

Just create it -

DrawCircle circle = new DrawCircle(context);

Then add it to your your parent layout -

yourParentLayout.addView(circle);

Set any properties you want while adding the circle view to place it accordingly.

See here how to add views dynamically.