Android - Drawing simple sine wave on SurfaceView

Question

I have an activity with a view, which contains a few UI elements like a slider, some textViews and a surfaceView. I want to draw a simple sine wave on the surfaceView, except I have got no idea on how to do that. The tutorials I could found, did not solve my problem.

So basically, how can I draw a sine wave on a surfaceView defined in my xml layout file?

Answer 1

OK here's a simple fun way to draw a sine on a Surface View. Of course it's all done the wrong way but it nicely illustrates the principle.

I am aware of Google's opinion on exit buttons and I disagree. so there.

MainActivity.java:

package com.gladeworks.gwscope ;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity
{
    TextView textView = null;
    SurfaceView surfaceView;
    SurfaceHolder holder;
    Canvas canvas;
    Paint paint;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = (TextView) findViewById(R.id.textView);
        textView.setText("Press the Draw button!");
        surfaceView = (SurfaceView) findViewById(R.id.surfaceView);
        holder = surfaceView.getHolder();
        holder.getSurface();
        paint = new Paint();

        final Button buttonExit = (Button) findViewById(R.id.buttonExit);
        buttonExit.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View view)
            {
                exit(view);
            }
        });
        final Button buttonDraw = (Button) findViewById(R.id.buttonDraw);
        buttonDraw.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View view)
            {
                draw(view);
            }
        });
    }


    protected void draw(View view)  //This gets called when the Draw button is clicked.
    {
        paint.setColor(Color.GREEN);
        paint.setStrokeWidth(5);

        canvas = holder.lockCanvas();
        if (canvas == null) {
            textView.setText("Canvas is still null");
        } else {
            float a, w,h,x,y;
            w=canvas.getWidth();
            h=canvas.getHeight();
            canvas.drawRGB(32, 32, 255);    //Clear the canvas to light blue
            canvas.drawLine(0,h/2,(int)w,h/2,paint);//Draw a line from left to right as the y=0 line.
            x=0;
            while(x<w)
            {
                a=(x/w)*((float)2.0*(float)3.131592654);
                y=(h/2)-((float)Math.sin(a)*(h/(float)2.1));

                canvas.drawPoint(x,y,paint);

                x++;
            }


            holder.unlockCanvasAndPost(canvas);
            textView.setText("Done drawing!, Canvas size="+w+"x"+h);
        }


    }

    protected void exit(View view)
    {
        System.exit(0);
    }

}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.gladeworks.gwscope.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Uninitialized"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignBottom="@+id/buttonExit"
        android:layout_toLeftOf="@+id/buttonExit"
        android:layout_toStartOf="@+id/buttonExit"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Quit"
        android:id="@+id/buttonExit"
        android:layout_alignTop="@+id/buttonDraw"
        android:layout_toLeftOf="@+id/buttonDraw"
        android:layout_toStartOf="@+id/buttonDraw"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Draw"
        android:id="@+id/buttonDraw"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"/>

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/buttonExit"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

</RelativeLayout>

Answer 2

To draw on a SurfaceView, you need to write your own class which extends SurfaceView. Use this class in your XML layout file. Then you have to override onDraw(Canvas canvas) to do the drawing. Use Math.sin(double a) to get the sinus.