android studio エミュレーターとxmlのプレビュー画面が異なる

Question

タイトル通りなのですが、（起動してからしばらく時間が経過した）
エミュレーターと(layoutにある）xmlのプレビューが
明らかレイアウトが違ってきます。

エラーも忠告もないので混乱しております。
android studio 3.0.1です。

プレビューでは画像とボタンが表示されるのですが、
エミュレーターではボタンしか表示されず、ボタンもButton1と勝手に定義されています。

回答お願いします。

OmikujiActivity.java

package jp.wings.nikkeibp.omikuji;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

import java.util.Random;

public class OmikujiActivity extends Activity {

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

omikuji.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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="192dp"
        android:layout_height="400dp"
        android:contentDescription="@string/omikuji"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/omikuji" />

    <Button
        android:id="@+id/btn_event"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="@string/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        tools:text="おみくじを始める" />
</android.support.constraint.ConstraintLayout>

strings.xml

<resources>
    <string name="app_name">おみくじ</string>
    <string name="btn_event">占いを始めます</string>
    <string name="omikuji">Omikuji</string>
    <string name="button1">Button1</string>

</resources>

Comments

[退会済みユーザー]

プレビューしているものと、実行しているものは同一ビルドですか？

[退会済みユーザー]

※　特定条件下（不明）でモック内が更新されないときがある

[mercurian-teto]

パソコンを再起動してからもう一度見比べましたが、同じでした。ちなみに実際に端末にインストールしたときはプレビューのほうが優先されますか。インストールしたときにプレビューのほうが適用されていれば、シミュレーターでバグっていても問題がないです。

[mercurian-teto]

ボタンは@string/とあるところに/の後ろが違うIDでした。なのでボタンは表示されましたが、画像が一向に表示されません

[mercurian-teto]

ConstraintLayoutがベースになっています

Answer 1

Buttonのテキストは解決されたとのことなので、ImageViewの画像が表示されない件について回答します。

レイアウトxml内のImageViewタグで、

<ImageView
    ...（省略）
    app:srcCompat="@drawable/omikuji" />

という風に画像ファイルの指定をされていますが、この app:srcCompat という属性はサポートライブラリのappcompat-v7に含まれる、 AppCompatImageView というクラスで使用できる属性です。

本来、 AppCompatActivity 内ではImageViewはAppCompatImageViewに自動的に変換されるためその記述でもプレビューのように問題なく表示されるのですが、ご質問のソースではAppCompatActivityではなくActivityを使用されているので、これが問題の原因です。レイアウトプレビューではAppCompatActivityを使用しているという前提で表示を行っているものと思います。

修正するには、AppCompatActivityを使用するか、 android:src="..." で画像を指定するようにしてください。

Comments

[mercurian-teto]

返信が大変遅れてしまい申し訳ありません。
解説本にはActivityが記載されているので、
android:src="..."で指定するようにしました。
解決しました。ありがとうございました。

Answer 2

Buttonのテキストの方は解決されたようですが、

tools:text="おみくじを始める"

のようにtools:textで指定した内容はレイアウトエディターの表示上のみ作用するもので、実行したときにはここで設定した文字列は反映されません。空っぽのTextViewやButtonなどを配置してプログラムで文字列を設定するような用途のときに、エディター上でコンポーネントが見えないと不便ですから、「仮表示」ができるということです。

ImageViewが表示されない方についてですが、もしかして下図のように画像ファイル名の後ろに(v24)がついた状態になっていませんか？

これはAPI 24以降適用のフォルダーに格納されていることを表していますので、プレビューするAPIレベルの設定が24未満だと、この画像はエディター上には表示されません。

---

あ、ImageViewの説明は逆じゃん。プレビューには表示されるけどエミュレーターには表示されない、という話でしたね。これは勘違いしました。