How can i show grid lines in grid layout?

Question

Hi I am devoloping an app. I used grid layout to place the images side by side. My problem is, i want grid layout lines to be visible in app. I tried adding borders to images to do that but in my program images are disappearing, so it did not work. How can i implement this?

my code here:

<androidx.gridlayout.widget.GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="300dp"
        android:layout_height="363dp"
        android:clipToPadding="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:onClick="increaseScore"
            app:layout_column="0"
            app:layout_row="0"
            app:srcCompat="@drawable/perry" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:onClick="increaseScore"

            app:layout_column="1"
            app:layout_row="0"
            app:srcCompat="@drawable/perry" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:onClick="increaseScore"

            app:layout_column="2"
            app:layout_row="0"
            app:srcCompat="@drawable/perry" />

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:onClick="increaseScore"

            app:layout_column="0"
            app:layout_row="1"
            app:srcCompat="@drawable/perry" />

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:onClick="increaseScore"

            app:layout_column="1"
            app:layout_row="1"
            app:srcCompat="@drawable/perry" />

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:onClick="increaseScore"

            app:layout_column="2"
            app:layout_row="1"
            app:srcCompat="@drawable/perry" />

        

    </androidx.gridlayout.widget.GridLayout>

I want lines to be visible between images.

Please share some code to demonstrate how you are adding the images to the GridLayout — Bö macht Blau, Dec 10 '20 at 18:09
Does this answer your question? [Gridlayout with borders](https://stackoverflow.com/questions/13776547/gridlayout-with-borders) — Bö macht Blau, Dec 10 '20 at 18:30
Here's how to do the border: [How do I put a border around an Android textview?](https://stackoverflow.com/questions/3496269/how-do-i-put-a-border-around-an-android-textview) — Bö macht Blau, Dec 10 '20 at 18:35

score 1 · Answer 1 · answered Dec 10 '20 at 18:32

You can set a background color (android:background) to the GridLayout that is different than each of your ImageView's background color, and set a android:layout_margin to each ImageView with a dp value that equals to the thickness you want of the grid lines.

Applying that to your layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.gridlayout.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/gridLayout"
    android:layout_width="300dp"
    android:layout_height="363dp"
    android:background="#FFFFFF"
    android:clipToPadding="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_margin="2dp"
        android:background="#8CDD81"
        android:onClick="increaseScore"
        app:layout_column="0"
        app:layout_row="0"
        app:srcCompat="@drawable/perry" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_margin="2dp"
        android:background="#8CDD81"
        android:onClick="increaseScore"

        app:layout_column="1"
        app:layout_row="0"
        app:srcCompat="@drawable/perry" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_margin="2dp"
        android:background="#8CDD81"
        android:onClick="increaseScore"
        app:layout_column="2"
        app:layout_row="0"
        app:srcCompat="@drawable/perry" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_margin="2dp"
        android:background="#8CDD81"
        android:onClick="increaseScore"
        app:layout_column="0"
        app:layout_row="1"
        app:srcCompat="@drawable/perry" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_margin="2dp"
        android:background="#8CDD81"
        android:onClick="increaseScore"
        app:layout_column="1"
        app:layout_row="1"
        app:srcCompat="@drawable/perry" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="100dp"
        android:layout_height="120dp"
        android:layout_margin="2dp"
        android:background="#8CDD81"
        android:onClick="increaseScore"
        app:layout_column="2"
        app:layout_row="1"
        app:srcCompat="@drawable/perry" />


</GridLayout>

Here is the Source

How can i show grid lines in grid layout?

1 Answers1