Search code examples
javaandroidcanvasscalingcustom-view

Scaling canvas drawing to fit custom view in activity

I could use some help trying to figure out how to scale a canvas to fit a custom view in an activity. Currently the drawings on the canvas are drawn to fit the size of the screen for whatever device the app is being run on (i.e. it is drawn in the middle) for example, like this:

enter image description here

However, when it is viewed in the custom view in the activity the image is cut off due to the size of the custom view in the activity being smaller than the size of the screen e.g:

enter image description here

The desired result is to scale the canvas drawing to fit the custom view in the activity (e.g. it shows the first image), below is my code:

The class that draws the canvas:

public class DrawGraphTest extends View {

    int mWidth = this.getResources().getDisplayMetrics().widthPixels;
    int mHeight = this.getResources().getDisplayMetrics().heightPixels;


    public DrawGraphTest(Context context) {
        super(context);
        init();
    }

    public DrawGraphTest(final Context context, final AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        //Various paints and such...

        //Set point to middle of screen for drawings
        point1 = new Point(mWidth / 2, mHeight / 2);
    }

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //Draw various stuff to canvas
    }
}

The activity class:

public class GraphActivity extends AppCompatActivity {
    DrawGraphTest drawGraphTest;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_graph);

        drawGraphTest = (DrawGraphTest)findViewById(R.id.drawGraphTest);
    }
}

The XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".GraphActivity">

    <g.myPackage.DrawGraphTest
        android:id="@+id/drawGraphTest"
        android:layout_width="350dp"
        android:layout_height="300dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.041" />  
</android.support.constraint.ConstraintLayout>

I am very new to Android Studio and could really use some help, cheers!

Solution

  • If you override onSizeChanged(int w, int h, int oldw, int oldh) for your custom view, you can (re)calculate your measurements and hold them in member variables where you can use them when onDraw is called.

    Something like:

    private int width;
private int height;
private int paddingLeft;
private int paddingRight;
private int paddingTop;
private int paddingBottom;
private int centerX;
private int centerY;

@Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    width = w;
    height = h;
    paddingLeft = getPaddingLeft();
    paddingRight = getPaddingRight();
    paddingTop = getPaddingTop();
    paddingBottom = getPaddingBottom();
    int usableWidth = width - (paddingLeft + paddingRight);
    int usableHeight = height - (paddingTop + paddingBottom);
    centerX = paddingLeft + (usableWidth / 2);
    centerY = paddingTop + (usableHeight / 2);
}