Android clear view using button

Question

Disclaimer: I am reasonably new to android/java.

I followed the tutorial here: http://creative-punch.net/2014/03/make-basic-single-touch-drawing-app-android/ and added a couple of buttons. I can get the buttons to display toasts, so the buttons are working, but I am not sure how to make a button access the MainDrawingView class to get it to clear the view to get rid of a previous drawing.

This is the MainActivity class:

package com.mycompany.simpledraw;

import android.content.Context;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import org.w3c.dom.Attr;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    public void clearButtonClicked (View view){
        Toast.makeText(this, "Clear clicked!", Toast.LENGTH_SHORT).show();
    }

    public void submitButtonClicked (View view){
        Toast.makeText(this, "Submit clicked!", Toast.LENGTH_SHORT).show();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

This is the MainDrawingView class:

package com.mycompany.simpledraw;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import java.util.ArrayList;

public class MainDrawingView extends View {
    private Paint paint = new Paint();
    private Path path = new Path();
    LineData LD = new LineData();

    public MainDrawingView(Context context, AttributeSet attrs) {
        super(context, attrs);

        paint.setAntiAlias(true);
        paint.setStrokeWidth(5f);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.ROUND);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // Get the coordinates of the touch event
        float eventX = event.getX();
        float eventY = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // Set a new starting point
                path.moveTo(eventX, eventY);
                return true;
            case MotionEvent.ACTION_MOVE:
                // Connect the points
                path.lineTo(eventX, eventY);
                break;
            case MotionEvent.ACTION_UP:
                break;
            default:
                return false;
        }

        // Makes our view repaint and call onDraw
        invalidate();
        return true;
    }

}

And here is the activity_main.xml file

<LinearLayout 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"
    android:orientation="vertical"
    android:background="#ffffff"
    tools:context="com.example.app.FullscreenActivity">

    <!-- This is the view on which we will draw. -->
    <view
        android:layout_width="match_parent"
        android:layout_height="0dp"
        class="com.mycompany.simpledraw.MainDrawingView"
        android:id="@+id/single_touch_view"
        android:layout_gravity="start|top"
        android:layout_weight="1"
        android:background="#ffffff" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/clear_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/clear_btn"
            android:onClick="clearButtonClicked" />

        <Button
            android:id="@+id/submit_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/submit_btn"
            android:onClick="submitButtonClicked"/>

    </LinearLayout>


</LinearLayout>

Where did you use your MainDrawingView class?.. can you provide a sample code? — icaneatclouds, Jun 17 '15 at 02:28
It is accessed by the line class="com.mycompany.simpledraw.MainDrawingView" in the xml file? — Metallor, Jun 17 '15 at 02:38

score 1 · Accepted Answer · edited May 23 '17 at 10:26

In the handler for your button, you can locate the view by using the Activity's findViewById method.

 public void clearButtonClicked (View view){
     MainDrawingView mainDrawingView = (MainDrawingView)findViewById(R.id.single_touch_view);

     // Now you can call methods on mainDrawingView
 }

Note the R.id.id.single_touch_view matches the id you assigned to the view in activity_main.xml

In your comment below, you have asked a 2nd question - how to clear the view. My suggestion is taken from the following: Android, canvas: How do I clear (delete contents of) a canvas (= bitmaps), living in a surfaceView?.

1) In you MainDrawingView class, add the instance variable

private boolean forceClear;

2) In you MainDrawingView class, add the following method

public void clearView() {
    forceClear = true;
    invalidate();  // this will force a call to onDraw
}

3) In you MainDrawingView class, update the onDraw method as follows.

protected void onDraw(Canvas canvas) {
    if (forceClear) {
        canvas.drawColor(Color.BLACK);  // or whatever color works best for you.
        forceClear = false;
    } else {
        canvas.drawPath(path, paint);
    }
}

4) Then in your button handler, simply call the new method:

public void clearButtonClicked (View view){
         MainDrawingView mainDrawingView = (MainDrawingView)findViewById(R.id.single_touch_view);
         mainDrawingView.clearView();
 }

This tells me that "Variable 'view' is alread defined in scope." — Metallor, Jun 17 '15 at 02:44

score 0 · Answer 2 · answered Sep 20 '17 at 07:28

I have fixed the problem a bit different logic.

View myView;
case R.id.btnReset:

                if (myView.mBitmap != null) {
                    myView.mBitmap.eraseColor(Color.TRANSPARENT);
                    myView.mPath.reset();
                    myView.invalidate();
                }
                break;

Android clear view using button

2 Answers2