AndroidStudio ボタンの配置がずれる。

Question

前提・実現したいこと

実機で実行する際、HelloAndroidのアプリをPreview通りに正しく動かしたいです。

発生している問題・エラーメッセージ

スマホで実行した結果が画像の通りです。

エラーメッセージ

該当のソースコード

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Button tapHere = (Button) findViewById(R.id.tapHere);
    tapHere.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            TextView textView = (TextView) findViewById(R.id.textView);
            textView.setText("ボタンがタップされました！");
        }
    });
}

}

試したこと

https://teratail.com/questions/70144
を閲覧したくらいです。すみません。

補足情報（FW/ツールのバージョンなど）

keicha_hrs様、前回の質問ではお世話になりました。
無事、ビルドできアプリ開発に取り組むことができました。しかし、前回の質問で返信が送信できなくなってしまいましたので、ここでお礼申し上げます！見てくださいましたら、後ほどベストアンサーをつけさせていただきます。

Comments

[Wind]

レイアウトのソースを貼ってください。

[H30_inenaga]

レイアウトのソースが何か分かりませんが、レイアウトの写真を追加しました。よろしくお願いします。

[keicha_hrs]

レイアウトエディターの画面の下方に"Design"と"Text"というタブがあります（掲載された画像にも写っています）。その"Text"をクリックすると、現在のデザインをXML形式にしたソースファイルが見られます。これを掲載して欲しいという意味です。まあ、原因がConstraintLayoutの使いこなしにあるのは想像つきますので、回答欄に図入りで答えを書きますので、ちょっと待ってね。

[H30_inenaga]

これでしたか。

[H30_inenaga]

<?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="com.example.m_yuta.helloandroid.MainActivity"> <Button android:id="@+id/tapHere" android:layout_width="150dp" android:layout_height="80dp" android:text="@string/tap_here" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" tools:layout_editor_absoluteY="379dp" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" tools:layout_editor_absoluteY="101dp" /> <ImageView android:id="@+id/imageView" android:layout_width="200dp" android:layout_height="200dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:srcCompat="@drawable/bird" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </android.support.constraint.ConstraintLayout>

[H30_inenaga]

待ちますので、よろしくお願いします。

[Wind]

すごく見づらいです。本文に書いて```で囲ってください。

Answer 1

現在のAndroid StudioではConstraintLayoutと言われるレイアウトが標準でもちいられます。このレイアウトは、エディター上でコンポーネントを並べただけだと、その通りの配置で実行されません。コンポーネントをクリックしたときに四辺に出てくる○印の上でマウス左ボタンを押下して（クリックではない、押し込んだまま）、そのままマウスをドラッグすると、矢印が伸びていきます。この矢印を外枠や他のコンポーネントに接続することによって、位置決めをすることができます。

そうした作業を繰り返して位置を設定していくのがConstraintLayoutの使い方になるのですが、まあ初歩の段階では面倒でしょうから、ツールバーのInfer Constraintsボタン（下図の赤枠で囲ったもの）を押すことで、並べた状態で位置決めをしてくれます。とりあえずこれを使ってみては。

Comments

[H30_inenaga]

ConstraintLayoutの使い方も併せて勉強します！