title: How to store Canvas in Firebase usnig android for realtime Collaboration?
body: <p>Hello android developers,</p>
  
  <p>I want to create a whiteboard app in android so that users running that app can collaborate using whiteboard.</p>
  
  <p>I've created a simple whiteboard but unable to make it for collaboration in real time.</p>
  
  <p>below is my code for MainActivity.java file - </p>
  
  <pre><code>package com.example.cyno.whiteboardcustomview;
  import android.content.Context;
  import android.graphics.Bitmap;
  import android.graphics.Canvas;
  import android.graphics.Color;
  import android.graphics.Path;
  import android.graphics.Paint;
  import android.graphics.Point;
  import android.net.Uri;
  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.MotionEvent;
  import android.view.View;
  import android.widget.Button;
  import android.widget.RelativeLayout;
  import android.view.ViewGroup.LayoutParams;
  import android.widget.TextView;
  
  import com.google.firebase.database.DataSnapshot;
  import com.google.firebase.database.DatabaseError;
  import com.google.firebase.database.DatabaseReference;
  import com.google.firebase.database.FirebaseDatabase;
  import com.google.firebase.database.ValueEventListener;
  import com.google.firebase.storage.FirebaseStorage;
  import com.google.firebase.storage.StorageReference;
  
  import java.util.ArrayList;
  import java.util.List;
  
  public class MainActivity extends AppCompatActivity {
  
      RelativeLayout relativeLayout;
      Paint paint;
      View view;
      Path path2;
      Bitmap bitmap;
      Canvas canvas;
      Button button;
      TextView textView;
      private float mX, mY;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          relativeLayout = (RelativeLayout) findViewById(R.id.relativelayout1);
  
          button = (Button)findViewById(R.id.button);
  
          view = new SketchSheetView(MainActivity.this);
  
          paint = new Paint();
  
          path2 = new Path();
  
          textView = (TextView)findViewById(R.id.textview);
  
          relativeLayout.addView(view, new LayoutParams(
                  RelativeLayout.LayoutParams.MATCH_PARENT,
                  RelativeLayout.LayoutParams.MATCH_PARENT));
  
          paint.setDither(true);
  
          paint.setColor(Color.parseColor("#000000"));
  
          paint.setStyle(Paint.Style.STROKE);
  
          paint.setStrokeJoin(Paint.Join.ROUND);
  
          paint.setStrokeCap(Paint.Cap.ROUND);
  
          paint.setStrokeWidth(2);
  
          button.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  path2.reset();
  
              }
          });
  
      }
  
      class SketchSheetView extends View {
  
          public SketchSheetView(Context context) {
  
              super(context);
  
              bitmap = Bitmap.createBitmap(820, 480, Bitmap.Config.ARGB_4444);
  
              canvas = new Canvas(bitmap);
  
  
              this.setBackgroundColor(Color.WHITE);
          }
  
          private ArrayList&lt;DrawingClass&gt; DrawingClassArrayList = new ArrayList&lt;DrawingClass&gt;();
  
  
          @Override
          public boolean onTouchEvent(MotionEvent event) {
  
              DrawingClass pathWithPaint = new DrawingClass();
              DatabaseReference myRef1 = FirebaseDatabase.getInstance().getReference(); //Getting root reference
              DatabaseReference myRef = myRef1.child("path2");
              DatabaseReference myRef2 = myRef1.child("paint");
              myRef.setValue(path2.toString());
              myRef2.setValue(paint.toString());
  
              myRef.addValueEventListener(new ValueEventListener() {
                  @Override
                  public void onDataChange(DataSnapshot dataSnapshot) {
  
  
  
  
                  }
  
                  @Override
                  public void onCancelled(DatabaseError databaseError) {
  
                  }
              });
  
  
              canvas.drawPath(path2,paint);
  
  
  
  
  
  
              if (event.getAction() == MotionEvent.ACTION_DOWN) {
  
                  path2.moveTo(event.getX(), event.getY());
  
                  path2.lineTo(event.getX(), event.getY());
              }
              else if (event.getAction() == MotionEvent.ACTION_MOVE) {
  
                  path2.lineTo(event.getX(), event.getY());
  
                  pathWithPaint.setPath(path2);
  
                  pathWithPaint.setPaint(paint);
  
                  DrawingClassArrayList.add(pathWithPaint);
              }
  
              invalidate();
              return true;
          }
  
          @Override
          protected void onDraw(Canvas canvas) {
              super.onDraw(canvas);
              if (DrawingClassArrayList.size() &gt; 0) {
  
                  canvas.drawPath(
                          DrawingClassArrayList.get(DrawingClassArrayList.size() - 1).getPath(),
  
                          DrawingClassArrayList.get(DrawingClassArrayList.size() - 1).getPaint());
              }
          }
      }
  
      public class DrawingClass {
  
          Path DrawingClassPath;
          Paint DrawingClassPaint;
  
          public Path getPath() {
              return DrawingClassPath;
          }
  
          public void setPath(Path path) {
              this.DrawingClassPath = path;
          }
  
  
          public Paint getPaint() {
              return DrawingClassPaint;
          }
  
          public void setPaint(Paint paint) {
              this.DrawingClassPaint = paint;
          }
      }
  
  }
  </code></pre>
  
  <p>code for activity_main.xml - </p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;RelativeLayout 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.example.cyno.whiteboardcustomview.MainActivity"&gt;
  android:weightSum="100"&gt;
  
  
  &lt;RelativeLayout
      android:id="@+id/relativelayout1"
      android:layout_weight="90"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"&gt;
  
  &lt;/RelativeLayout&gt;
  
      &lt;TextView
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
  
          android:id="@+id/textview"
          android:layout_weight="10"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true"
          android:layout_marginBottom="22dp" /&gt;
  
      &lt;Button
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="Click Here to clear drawing "
          android:id="@+id/button"
          android:layout_weight="10"
          android:layout_above="@+id/textview"
          android:layout_alignParentLeft="true"
          android:layout_alignParentStart="true" /&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>Now what I want to accomplish is that, if I run app on two devices and draw on any once device the same should be draw on another device without any user interaction and vice versa. </p>
  
  <p>I've done the same thing using Firebase Realtime database but, that was using EditText and TextView in android. I can't figure out how to do it with canvas.</p>
  
  <p>Please help me.</p>
  
  <p>Thanks in advance!</p>