Image view in android studio is showing in xml layout but not showing in app

Question

Image view in android studio is showing in xml layout but it is not showing in the app after run I tried every solution available but not got the solution to my problem.

I'm making a simple meme share app in which there will be two buttons share and next, after clicking next button another meme appears I used an random meme api I have not completed the app ( not added function for next button and share button ) just to check whether meme image is showing or not I ran my code successfully it was installed on my phone, buttons are showing but image is not showing only white background

MainActivity.kt

package com.example.memeshare

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.android.volley.Request
import com.android.volley.Response
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import com.bumptech.glide.Glide

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    loadMeme()
}

private fun loadMeme(){

  var memeImageview = findViewById<ImageView>(R.id.imageView)
// ...

// Instantiate the RequestQueue.
    val queue = Volley.newRequestQueue(this)
    val url = "https://i.redd.it/bi9tnlxmqlr71.jpg"


    val jsonObjectRequest = JsonObjectRequest(
        Request.Method.GET, url,null,
        { response ->

          val url = response.getString("url")
            Glide.with(this).load(url).into(memeImageview)
        },
        {  },
    )

// Add the request to the RequestQueue.
    queue.add(jsonObjectRequest)
}
fun shareMeme(view: View) {

}

fun nextMeme(view: View) {

}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    tools:srcCompat="@tools:sample/avatars" />

<Button
    android:id="@+id/shareButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/share"
    android:padding="32dp"
    app:layout_constraintRight_toRightOf="@id/guideline2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:onClick="shareMeme"/>



<Button
    android:id="@+id/nextButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:width="0dp"
    android:padding="32dp"
    android:text="@string/next"
    app:layout_constraintLeft_toLeftOf="@id/guideline2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:onClick="nextMeme"/>

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintGuide_percent="0.5"/>




</androidx.constraintlayout.widget.ConstraintLayout>

[It look like this in layout]

( https://i.stack.imgur.com/CarzW.jpg )

Answer 1

You need to set the

android:layout_width="wrap_content"
android:layout_height="wrap_content

And you need to add a source or background to the imageview.

android:background="@drawable/image"
android:src="@drawable/image"

Answer 2

Your mistake is to use tools:srcCompat. So when you use tools, nothing will show in your app You have to use android:src="drawable/avatar"

Answer 3

Thanks to everyone who answered my question after a lot of struggle to find why my image view is not loading I got the mistake, actually what I did wrong was in

val url = "https://i.redd.it/bi9tnlxmqlr71.jpg"

I put the image link in val url instead of API link which is "https://meme-api.herokuapp.com/gimme"

So the correct one is:

val url ="https://meme-api.herokuapp.com/gimme"

After this correction, my meme is loading.

Also, "tools:srcCompat="@tools:sample/avatars" is only used for debugging, it doesn't do anything when you run the app.

Correct code,

MainActivity.kt

package com.example.memeshare
import android.graphics.drawable.Drawable
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast
import com.android.volley.Request
import com.android.volley.Response
import com.android.volley.toolbox.JsonObjectRequest
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import com.bumptech.glide.Glide
import com.bumptech.glide.load.DataSource
import com.bumptech.glide.load.engine.GlideException
import com.bumptech.glide.request.RequestListener
import com.bumptech.glide.request.target.Target

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        loadMeme()
    }

   private fun loadMeme(){

        var memeImageview = findViewById<ImageView>(R.id.imageView)
// ...

// Instantiate the RequestQueue.
        val queue = Volley.newRequestQueue(this)
        val url = "https://meme-api.herokuapp.com/gimme"

// Request a string response from the provided URL.
       val jsonObjectRequest = JsonObjectRequest(
               Request.Method.GET, url,null,
               {
                   response ->
                   val url = response.getString("url")
                   Glide.with(this).load(url).into(memeImageview)
               },
               {
                 Toast.makeText(this,"Something went wrong",Toast.LENGTH_LONG).show()
               }
               )


       queue.add(jsonObjectRequest)



   }

    fun nextMeme(view: View) {
        loadMeme()
    }

    fun shareMeme(view: View) {}


// Add the request to the RequestQueue.

    }

activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:srcCompat="@tools:sample/avatars"/>

    
    <Button
        android:id="@+id/shareButton"
        android:layout_width="190dp"
        android:layout_height="wrap_content"
        android:text="@string/share"
        android:padding="32dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:onClick="shareMeme"/>



    <Button
        android:id="@+id/nextButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:width="190dp"
        android:padding="32dp"
        android:text="@string/next"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:onClick="nextMeme"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintGuide_percent="0.5"/>




</androidx.constraintlayout.widget.ConstraintLayout>