URL 使用 Glide 时图像未显示在 Android Studio 中

Question

My activity is made up of 12 ImageViews. When the user clicks on one of the grid, I want to replace the default rectangular X image with an URL image. I have been trying to use Glide to set the image. However, I kept having issues with the alignment of the pictures.

Before setting URL image using glide

After setting URL image using glide

This is my code in the corresponding layout page.

    <LinearLayout
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/gameScoreDynamic"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@+id/gameScoreDynamic"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:src="@drawable/recx"></ImageView>

            <ImageView
                android:id="@+id/image2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:src="@drawable/recx"></ImageView>

            <ImageView
                android:id="@+id/image3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:src="@drawable/recx"></ImageView>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@+id/gameScoreDynamic"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/image4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

            <ImageView
                android:id="@+id/image5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

            <ImageView
                android:id="@+id/image6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@+id/gameScoreDynamic"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/image7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

            <ImageView
                android:id="@+id/image8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

            <ImageView
                android:id="@+id/image9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@+id/gameScoreDynamic"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/image10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

            <ImageView
                android:id="@+id/image11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

            <ImageView
                android:id="@+id/image12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/recx"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1">
            </ImageView>

        </LinearLayout>

    </LinearLayout>

This is my code in the activity page.

public class GamePage extends AppCompatActivity implements View.OnClickListener {

....
....
....

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

    ImageView img1 = findViewById(R.id.image1);
    img1.setOnClickListener(this);
    gridIDs.add(img1.getId());
    Glide.with(this)
            .load("https://cdn.stocksnap.io/img-thumbs/280h/tree-desert_JMTQNOJWU8.jpg")
            .into(img1);
}

I would like to replace the 12 rectangular boxes with X with URL images. Have tried to fiddle with the ImageView layout settings but to no avail. Please help!

Answer 1

The problem is that you are using wrap_content for the height and width of the ImageViews . When Glide loads the new image, the view expands to accommodate the size of the new image.

There is likely to be a way to specify different behavior with Glide, but another approach would be to set the size of the ImageViews programmatically to a fixed size based upon the intrinsic size of "drawable/recx". In the activity's onCreate() :

ImageView iv = findViewById(R.id.image7);
Drawable d = iv.getDrawable();
ViewGroup.LayoutParams lp = iv.getLayoutParams();
lp.width = d.getIntrinsicWidth();
lp.height = d.getIntrinsicHeight();

You could also just set the size in the XML.

Your XML is a mixture of different layout attributes, so it looks like you have tried several things in XML. Another thought is to use 0dp along with weights or other means to adjust the size of the ImageViews rather than use wrap_content . This may be a better way since it would not need any additional code. (It it works, that is. You will have to try it out.)