0

I am currently creating a text editing app and I wanted to know if it's possible to make an onDraw canvas only take up the top half of the screen. I want to do this so that I can put a seekbar below it that the user can control and based on the value, it will change what is on the canvas. In this case the value would change the curve of the text. I would really appreciate some help. Please DO NOT hesitate to ask me to clarify something. I will put the code for drawing the canvas and the curve below the image.

Thank you

image

**EDIT**

These are my new classes. The IDE Preview of the emulator shows exactly what I want (as seen in the second image) but when I actually run it, it looks the same as the first image, nothing's changed.

My New Painting.class file

import android.app.Activity;
import android.graphics.*;
import android.os.Bundle;
import android.view.*;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class Painting extends Activity
{
    public static int y = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_painting);
    }
}

My NEW SampleView.class File

public class SampleView extends View
    {
        private Paint mPaint;
        private float mX;
        private float[] mPos;

        private Path mPath;
        private Paint mPathPaint;

        private static final int DY = 30;
        private static final String TEXTONPATH = "Along a path";

        public SampleView(Context context, AttributeSet attrs)
        {
            super(context, attrs);
        }

        public SampleView(Context context)
        {
            super(context);
            setFocusable(true);

            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setTextSize(90);
            mPaint.setTypeface(Typeface.SERIF);

//            mPos = buildTextPositions(POSTTEXT, 0, mPaint);

            mPath = new Path();
            makePath(mPath);

            mPathPaint = new Paint();
            mPathPaint.setAntiAlias(true);
            mPathPaint.setColor(Color.rgb(255,0,0));
            mPathPaint.setStyle(Paint.Style.STROKE);
        }

        public void makePath(Path p)
        {
//            p.moveTo(250, -300);
            p.moveTo(0,0);
//            p.cubicTo(-250, -550, 750, -550, 250, -300);
            p.cubicTo(0,-400,620,-400,620,0);
        }

        @Override
        protected void onDraw(Canvas canvas)
        {
            canvas.drawColor(Color.WHITE);

            Paint p = mPaint;
            float x = mX;
            float y = 0;
            float[] pos = mPos;

//            p.setColor(0x80FF000);
            canvas.drawLine(0, 0, 0, 0, p);
            p.setColor(Color.BLACK); // setting the text color

            canvas.translate(100, DY*2);

            canvas.translate(0, DY*10);

            canvas.translate(100, DY*10);
            canvas.drawPath(mPath, mPathPaint);
            p.setTextAlign(Paint.Align.LEFT);
            canvas.drawTextOnPath(TEXTONPATH, mPath, 100, 0, p);
        }
    }

My current XML File

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    tools:context="com.example.android.postvu.Painting">

    <com.example.android.postvu.SampleView
        android:id="@+id/view"
        android:layout_height="300dp"
        android:layout_width="match_parent"
        />

    <SeekBar
        android:id="@+id/curveBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/view"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="40dp"
        android:layout_marginEnd="40dp"
        android:elevation="50dp"/>

    </RelativeLayout>

IDE Preview

Marc Karam
  • 445
  • 6
  • 22
  • 1
    Pull `SampleView` out of the `Activity`, into its own top-level class. Add the necessary two-parameter constructor: https://stackoverflow.com/a/18312617. Then include it in an XML layout, similar to any other `View`: https://stackoverflow.com/a/10410678. – Mike M. Jan 26 '18 at 05:49
  • @MikeM. Please see my edit. I've tried what you suggested and I'm almost certain I did it correctly but nothing's changed. Please let me know if I did something incorrectly – Marc Karam Jan 27 '18 at 22:43
  • 1
    You need to call `setContentView()` in `Painting` with the `R.layout` for the new layout, instead of the `SampleView` instance your creating right there. You can then `findViewById()` it like you normally would. Also, you forgot to add the two-parameter constructor in `SampleView` that takes a `Context` and an `AttributeSet`. That's the constructor that's going to be used when it's inflated from a layout, so make sure you do your initializations in that one, too. – Mike M. Jan 27 '18 at 23:04
  • @MikeM. I apologize for not including the needed constructor. I actually did have it, I just forgot to edit it in. After making the suggested changes, the app simply crashes saying that the line `canvas.drawline()` is the error. Please let me know how I can fix this. – Marc Karam Jan 27 '18 at 23:32
  • 1
    When I said "make sure you do your initializations in that one, too", I meant that everything you have in the original constructor after the `super(context);` line needs to be done in the constructor you've just added, as well. You're likely getting a `NullPointerException` because `mPaint`, and therefore `p`, is null. You could move that stuff into another method, and call that method from both constructors, so you're not repeating code. Alternatively, you could chain constructors, so that the first one calls the second, instead of calling the `super`; e.g., `this(context, null);`. – Mike M. Jan 28 '18 at 00:02
  • THANK YOU SO MUCH @MikeM. I REALLY APPRECIATE IT!! – Marc Karam Jan 28 '18 at 00:08
  • No problem. :-) Glad you got it working. Cheers! – Mike M. Jan 28 '18 at 00:12

0 Answers0