AndroidStudio4.1でglideを使ったURLからの画像読込・表示ができません

AndroidStudio4.1を使っています。

https://nulab.com/ja/blog/nulab/android-library-glide/

にある手順どおりにやったのですが、画像を読み込めません。

MainActivity.ktは、

<code> package com.example.myapplication11

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ImageView
import com.bumptech.glide.Glide

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {

    ImageView matchImage = findViewById(R.id.match_image);
    String gifUrl = "https://nulab.com/ja/app/uploads/sites/2/2017/10/techblog-vue-kanban-06.gif";
    Glide.with(this).load(gifUrl).into(matchImage);

    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)


}

}
</code>

そしてActivityMain.xmlは、

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/match_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

</androidx.constraintlayout.widget.ConstraintLayout>
</code>

です。

ここ３日ほど試行錯誤していますが全くわかりません。上に挙げたURLのが一番シンプルだったので挙げました。
INTERNETのパーミッションや、Glideのbuild.gradleとその後のSyncは大丈夫です。
別スレッドでなければいけないという情報もあるし、非同期にしなければ駄目ともありますが、なんのことやらという状態です。

どなたか時間のある方、ご指南お願いできないでしょうか。

keicha_hrs

2020/11/01 08:33 編集

コードの範囲を囲うには、<code>タグではなくMarkdownを用いてください。質問の入力フォームに<code>ボタンがありますが、それを押下すると ```ここに言語を入力コード ``` と出力されるはずです。この```で挟み込むようにコードを記述し、「ここに言語を入力」の部分を言語名（今回ならkotlinやxml）に書き換えてください。それによって、下記にある私の回答のようにコードの範囲が修飾されます。

mitdok

2020/11/01 12:45

なるほどです。サイトの使い方の解説まで丁寧にありがとうございました！次からそうしたいと思います。よろしくおねがいします。

行動規範の内容に同意します

回答1件

ベストアンサー

参照したページのコードはJavaで記述されているのに、作成したプログラムはKotlinで記述されていますね。まず移植するコードをKotlinの書式に書き換える必要があるでしょう。

kotlin
1    override fun onCreate(savedInstanceState: Bundle?) {
2        super.onCreate(savedInstanceState)
3        setContentView(R.layout.activity_main)
4
5        val matchImage: ImageView = findViewById(R.id.match_image)
6        val gifUrl = "https://nulab.com/ja/app/uploads/sites/2/2017/10/techblog-vue-kanban-06.gif"
7        Glide.with(this).load(gifUrl).into(matchImage)
8    }

なお、findViewById()でImageViewを取得するのを、setContentView()以前に行ってはいけません。setContentView()を行うことによってXMLで記述したコンポーネントが初めて配置されるので、それ以前にfindViewById()を行うとnullが返ってきてしまいます。そのまま処理を進めたら、NullPointerExceptionでアプリが落ちます。

それから、レイアウトXMLに追加したImageViewも、ConstraintLayoutに配置するための記述方法になっていません。ConstraintLayoutに配置したコンポーネントには、縦方向と横方向に制約をつけて位置決めする必要があります。元々あるTextViewは不要でしょうから、これを除去してImageViewを中央に配置するなら、次のような記述にすれば良いでしょう。

xml
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.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=".MainActivity">
8
9    <ImageView
10        android:id="@+id/match_image"
11        android:layout_width="0dp"
12        android:layout_height="wrap_content"
13        app:layout_constraintBottom_toBottomOf="parent"
14        app:layout_constraintEnd_toEndOf="parent"
15        app:layout_constraintStart_toStartOf="parent"
16        app:layout_constraintTop_toTopOf="parent" />
17
18</androidx.constraintlayout.widget.ConstraintLayout>