Home > Software design >  GridLayout not showing images in Android
GridLayout not showing images in Android

Time:02-17

So this is xml file having GridLayout inside RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <androidx.appcompat.widget.Toolbar
        android:id="@ id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorSecondary" />

    <GridLayout
        android:id="@ id/grid_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/main_toolbar"
        android:layout_marginTop="50dp"
        android:orientation="horizontal"
        android:rowCount="1"
        android:useDefaultMargins="true">

        <ImageView
            android:id="@ id/dal_bati"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:onClick="buyDalBati"
            android:src="@drawable/dal_bati" />

        <ImageView
            android:id="@ id/gulab_jamun"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:onClick="buyGulabJamun"
            android:src="@drawable/gulab_jamun" />

        <ImageView
            android:id="@ id/gajar_halwa"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnWeight="1"
            android:onClick="buyGajarHalwa"
            android:src="@drawable/gajar_halwa" />
    </GridLayout>
</RelativeLayout>

I tried with image format jpeg, jpg and png no image format show up the images.

Drawable folder having images Drawable folder having images

I set the onclick listner over each image so if I click assuming that it is gonna be image here then it will open's up the next activity to buy it means onClickListener is working only the image is not showing.

MainActivity code

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = findViewById(R.id.main_toolbar);

        //setting the toolbar
        setSupportActionBar(toolbar);
        if(getSupportActionBar() != null) {
            getSupportActionBar().setTitle("Click To Buy");
        }
    }

    public void buyGajarHalwa(View view) {
        Intent intent = new Intent(this,GajarHalwa.class);
        startActivity(intent);
    }

    public void buyGulabJamun(View view) {
        Intent intent = new Intent(this,GulabJamun.class);
        startActivity(intent);
    }

    public void buyDalBati(View view) {
        Intent intent = new Intent(this,DalBati.class);
        startActivity(intent);
    }
}

And this is the theme's code


<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.GridLayoutExperiment" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

CodePudding user response:

It's because you are giving android:width="wrap_content" which takes as the actual with of the image. So, please make it 0dp like below: and, also provide fixed height else it will take a whole screen. And, I have given a margin to each imageview so that it looks nice.

<RelativeLayout 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">

<androidx.appcompat.widget.Toolbar
    android:id="@ id/main_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorSecondary" />

<GridLayout
    android:id="@ id/grid_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/main_toolbar"
    android:layout_marginTop="50dp"
    android:orientation="horizontal"
    android:rowCount="1"
    android:useDefaultMargins="true">

    <ImageView
        android:id="@ id/dal_bati"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_columnWeight="1"
        android:onClick="buyDalBati"
        android:layout_margin="5dp"
        android:src="@drawable/dal_bati"
        />

    <ImageView
        android:id="@ id/gulab_jamun"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_columnWeight="1"
        android:onClick="buyGulabJamun"
        android:layout_margin="5dp"
        android:src="@drawable/gulab_jamun"
        />

    <ImageView
        android:id="@ id/gajar_halwa"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_columnWeight="1"
        android:layout_margin="5dp"
        android:onClick="buyGajarHalwa"
        android:src="@drawable/gajar_halwa"
        />
   </GridLayout>
 </RelativeLayout>
  • Related