Scaling canvas drawing to fit custom view in activity

Question

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 (ie it is drawn in the middle) for example, like this:

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 eg:

The desired result is to scale the canvas drawing to fit the custom view in the activity (eg 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!

Answer 1

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);
}

Answer 2

You can use

Canvas.drawBitmap(Bitmap bitmap, 
                Rect src, 
                Rect dst, 
                Paint paint) 

where bitmap is your image. src would contain the dimensions of the image

src.top = 0, src.left = 0, src.right = src + bitmap.width, src.bottom = bitmap.height

Your destination dst would be where you want it drawn inside the canvas.

dst.top = 0, dst.left = 0, dst.right = 50, dst.bottom = 50

for example, it would scale your bitmap so that it fits in the top left of the canvas in a 50x50 square.