配置のズレアプリ作成

画面左側に３×４のマス目をcanvasで描いて、画面右側に操作用の矢印ボタンを４つrelativelayoutで配置しているのですが、Design画面と実機での画面にずれが生じてしまいます。実機では、マス目の左上側に矢印ボタンが配置されてしまいます……

activity_main.xml

java
1<?xml version="1.0" encoding="utf-8"?>
2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context="com.example.nakahara.game.MainActivity">
8
9
10    <com.example.nakahara.game.MyView
11        android:id="@+id/view"
12        android:layout_width="609dp"
13        android:layout_height="792dp"
14        tools:layout_editor_absoluteY="17dp"
15        tools:layout_editor_absoluteX="26dp" />
16
17    <RelativeLayout
18        android:layout_width="386dp"
19        android:layout_height="264dp"
20        tools:layout_editor_absoluteX="645dp"
21        tools:layout_editor_absoluteY="27dp">
22
23        <Button
24            android:id="@+id/button3"
25            android:layout_width="wrap_content"
26            android:layout_height="wrap_content"
27            android:layout_alignParentTop="true"
28            android:layout_marginTop="108dp"
29            android:layout_toStartOf="@+id/button6"
30            android:text="←" />
31
32        <Button
33            android:id="@+id/button4"
34            android:layout_width="wrap_content"
35            android:layout_height="wrap_content"
36            android:layout_alignParentEnd="true"
37            android:layout_alignTop="@+id/button3"
38            android:layout_marginEnd="68dp"
39            android:text="→" />
40
41        <Button
42            android:id="@+id/button5"
43            android:layout_width="wrap_content"
44            android:layout_height="wrap_content"
45            android:layout_above="@+id/button4"
46            android:layout_alignEnd="@+id/button4"
47            android:layout_marginEnd="95dp"
48            android:text="↑" />
49
50        <Button
51            android:id="@+id/button6"
52            android:layout_width="wrap_content"
53            android:layout_height="wrap_content"
54            android:layout_alignStart="@+id/button5"
55            android:layout_below="@+id/button4"
56            android:text="↓" />
57    </RelativeLayout>
58
59</android.support.constraint.ConstraintLayout>
60

MyView.java

java
1package com.example.nakahara.game;
2
3
4import android.content.Context;
5import android.graphics.Canvas;
6import android.graphics.Color;
7import android.graphics.Paint;
8import android.util.AttributeSet;
9import android.view.View;
10
11public class MyView extends View {
12        public MyView(Context context) {
13        super(context);
14    }
15
16        public MyView(Context context, AttributeSet attrs) {
17        super(context, attrs);
18        }
19
20        @Override
21        protected void onDraw(Canvas canvas) {
22        Paint paint = new Paint();
23        paint.setColor(Color.argb(255, 0, 0, 0));
24
25        paint.setStyle(Paint.Style.STROKE);
26            canvas.drawRect(50, 50, 1000, 1300, paint);
27            canvas.drawLine(367,50,367,1300,paint);
28            canvas.drawLine(683,50,683,1300,paint);
29            canvas.drawLine(50, (float) 362.5,1000, (float) 362.5,paint);
30            canvas.drawLine(50,675,1000,675,paint);
31            canvas.drawLine(50, (float) 987.5,1000, (float) 987.5,paint);
32        }
33        }
34