How do I save a users drawing in a fragment in an app?

Question

I am creating an app where multiple fragments have a video and a custom drawing view (let's call it canvas) where a user can draw a line with their finger. What I'm trying to figure out is: After the user draws on the canvas, how do I get the app to keep the drawing if the user goes to a different fragment or leaves the app?

Edit
Fragment With the same actions as previous, from my test app

import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class LineLHwFragment extends Fragment {

private PaintView paintView;


@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable 
ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_line_l_hw, container, 
false);
        paintView = v.findViewById(R.id.lineLPaintView);
    DisplayMetrics metrics = new DisplayMetrics();
    getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
    paintView.init(metrics);
    setHasOptionsMenu(true);
        return v;

}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.main, menu);
    super.onCreateOptionsMenu(menu, inflater);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.normal:
            paintView.normal();
            return true;

        case R.id.clear:
            paintView.clear();
            return true;
    }

    return super.onOptionsItemSelected(item);
}


//putParcelableArray not working as getting ArrayList not Parcelable[]
@Override
public void onSaveInstanceState(@NonNull Bundle outState) {
    super.onSaveInstanceState(outState);
    outState.putParcelableArray("line test", paintView.getPaths());
}


}

Edit

Fragment that controls the drawing events now with a getter

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.EmbossMaskFilter;
import android.graphics.MaskFilter;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;



public class PaintView extends View {

public static int BRUSH_SIZE = 10;
public static final int DEFAULT_COLOR = Color.WHITE;
public static int DEFAULT_BG_COLOR = Color.GRAY;
private static final float TOUCH_TOLERANCE = 4;
private float mX, mY;
private Path mPath;
private Paint mPaint;
private ArrayList<FingerPath> paths = new ArrayList<>();
private int currentColor;
private int backgroundColor = DEFAULT_BG_COLOR;
private int strokeWidth;
private boolean emboss;
private boolean blur;
private MaskFilter mEmboss;
private MaskFilter mBlur;
private Bitmap mBitmap;
private Canvas mCanvas;
private Paint mBitmapPaint = new Paint(Paint.DITHER_FLAG);



public PaintView(Context context) {
    this(context, null);

}

public PaintView(Context context, AttributeSet attrs) {
    super(context, attrs);
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);

    mPaint.setColor(DEFAULT_COLOR);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setXfermode(null);
    mPaint.setAlpha(0xff);

    mEmboss = new EmbossMaskFilter(new float[] {1, 1, 1}, 0.4f, 6, 3.5f);
    mBlur = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);

}

//the getter in question

public ArrayList getPaths() {
    return paths;

}

public void init(DisplayMetrics metrics) {
    int height = metrics.heightPixels;
    int width = metrics.widthPixels;

    mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    mCanvas = new Canvas(mBitmap);

    currentColor = DEFAULT_COLOR;
    strokeWidth = BRUSH_SIZE;
}

public void normal() {
    emboss = false;
    blur = false;
}



public void clear() {
    backgroundColor = DEFAULT_BG_COLOR;
    paths.clear();
    normal();
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    canvas.save();
    mCanvas.drawColor(backgroundColor);

    for (FingerPath fp: paths) {
        mPaint.setColor(fp.color);
        mPaint.setStrokeWidth(fp.strokeWidth);
        mPaint.setMaskFilter(null);

        if (fp.emboss)
            mPaint.setMaskFilter(mEmboss);
        else if (fp.blur)
            mPaint.setMaskFilter(mBlur);

        mCanvas.drawPath(fp.path, mPaint);
    }

    canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

    canvas.restore();
}

private void touchStart(float x, float y) {
    mPath = new Path();
    FingerPath fp = new FingerPath(currentColor, emboss, blur, strokeWidth, 
mPath);
    paths.add(fp);

    mPath.reset();
    mPath.moveTo(x, y);
    mX = x;
    mY = y;
}

private void touchMove(float x, float y) {
    float dx = Math.abs(x-mX);
    float dy = Math.abs(y-mY);

    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
        mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
        mX = x;
        mY = y;
    }
}

private void touchUp() {
    mPath.lineTo(mX, mY);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    float x = event.getX();
    float y = event.getY();

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN :
            touchStart(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE :
            touchMove(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP :
            touchUp();
            invalidate();
            break;
    }

    return true;
}
}

Newly newly altered FingerPath Class

import android.graphics.Path;
import android.os.Parcel;
import android.os.Parcelable;

import java.util.ArrayList;


public class FingerPath implements Parcelable {

public int color;
public boolean emboss;
public boolean blur;
public int strokeWidth;
public Path path;

public FingerPath(int color, boolean emboss, boolean blur, int strokeWidth, 
Path path) {
    this.color = color;
    this.emboss = emboss;
    this.blur = blur;
    this.strokeWidth = strokeWidth;
    this.path = path;

}



protected FingerPath(Parcel in) {
    color = in.readInt();
    emboss = in.readByte() != 0;
    blur = in.readByte() != 0;
    strokeWidth = in.readInt();

}

public static final Creator<FingerPath> CREATOR = new Creator<FingerPath>() {
    @Override
    public FingerPath createFromParcel(Parcel in) {
        return new FingerPath(in);
    }

    @Override
    public FingerPath[] newArray(int size) {
        return new FingerPath[size];
    }
};

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

@Override
public void writeToParcel(Parcel parcel, int i) {
    parcel.writeInt(color);
    parcel.writeByte((byte) (emboss ? 1 : 0));
    parcel.writeByte((byte) (blur ? 1 : 0));
    parcel.writeInt(strokeWidth);

}

Answer 1

easy way would be to convert View with painting to Bitmap and setting this image as background when restoring Fragment

but you probably want to keep editing already drawn paths option, so you have to store all your FingerPaths in onSaveInstanceState method and restore them in onCreateView (Bundle savedInstanceState will carry data). if you want to keep whole path history even when app will be restarted then instead use some persistent storage, e.g. SharedPreferences or SQLite database - store data in onDestroyView and restore in onCreateView

note that your custom FingerPath class must implements Parcelable for being stored in Bundle