how to draw on a surface view?

Question

i'm trying to make a paint application that look like this:

so when the user put his hand in the surface view, the user will be able to draw lines inside the surface view. xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Paint"
    android:layout_marginTop="10sp"
    android:layout_marginLeft="5sp"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:layout_weight="3" />
<TextView
        android:id="@+id/textV"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dip"
        android:layout_toRightOf="@+id/ivImage"
        android:text="User Name"

         />
        <ImageView
        android:id="@+id/ivImage"
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:src="@drawable/person"
         />


       </LinearLayout>

       <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_marginTop="20sp">

       <ScrollView
       android:id="@+id/scrollView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" >

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

       <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Assets Models" 
        android:gravity="center"/>

       <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:drawableLeft="@drawable/ic_launcher"
        android:layout_height="wrap_content"
        android:text="Button" />

        </LinearLayout>
        </ScrollView>

        <SurfaceView
         android:id="@+id/surfaceView1"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_weight="2" />

        <ScrollView
         android:id="@+id/scrollView2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" >

        <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:orientation="vertical"
         android:layout_gravity="right" >

       <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Assets Models" />

       <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_launcher"
        android:text="Button" />

       </LinearLayout>
       </ScrollView>
       </LinearLayout>



       </LinearLayout>

does anyone know how to do it with a surfaceview or a view that is already defined in the xml file not in a dynamic way so i could put those extra elements e.g buttons, scroll, user name and image at the same activity. i would truly appreciate any help. Thanks

Answer 1

To manage that, you can just follow below steps.

1. Create a java Class and extend it with SurfaceView.

2. Use the code below

3. And use that as UI component in your "yourlayout.xml"

   public class mySurfaceView extends SurfaceView {
   
     public static Paint mPaint;
     public static Path path;
     public static Bitmap mBitmap;
     public static Canvas mCanvas;
     private ArrayList<PathWithPaint> _graphics1 = new ArrayList<PathWithPaint>();
   
     public mySurfaceView(Context context, AttributeSet attrs) {
       super(context, attrs);
       path = new Path();
       mBitmap = Bitmap.createBitmap(820, 480, Bitmap.Config.ARGB_8888);
       mCanvas = new Canvas(mBitmap);
       this.setBackgroundColor(Color.BLACK);
       mPaint = new Paint();
       mPaint.setDither(true);
       mPaint.setColor(0xFFFFFF00);
       mPaint.setStyle(Paint.Style.STROKE);
       mPaint.setStrokeJoin(Paint.Join.ROUND);
       mPaint.setStrokeCap(Paint.Cap.ROUND);
       mPaint.setStrokeWidth(3);
     }
   
     @Override
     public boolean onTouchEvent(MotionEvent event) {
       PathWithPaint pp = new PathWithPaint();
       mCanvas.drawPath(path, mPaint);
       if (event.getAction() == MotionEvent.ACTION_DOWN) {
         path.moveTo(event.getX(), event.getY());
         path.lineTo(event.getX(), event.getY());
       } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
         path.lineTo(event.getX(), event.getY());
         pp.setPath(path);
         pp.setmPaint(mPaint);
         _graphics1.add(pp);
       }
       invalidate();
       return true;
     }
   
     @Override
     protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       if (_graphics1.size() > 0) {
         canvas.drawPath(_graphics1.get(_graphics1.size() - 1).getPath(),
               _graphics1.get(_graphics1.size() - 1).getmPaint());
       }
     }
   
     public class PathWithPaint {
       private Path path;
       public Path getPath() {
         return path;
       }
       public void setPath(Path path) {
         this.path = path;
       }
       private Paint mPaint;
       public Paint getmPaint() {
         return mPaint;
       }
       public void setmPaint(Paint mPaint) {
         this.mPaint = mPaint;
       }
     }
   }
   

and now I will just use it in my layout

<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"    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"     tools:context=".MainActivity">

<ayttunc.example.com.drawingstackoverflow.mySurfaceView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</RelativeLayout>

Then you just run it but I want you to notice that we didn't write anycode in the MainActivity, and also after you run it you will see something like this!

https://i.sstatic.net/YjGk6.png

And if you want more information you can send me a mail via aytuncmatrac@anadolu.edu.tr.