Custom Grid Layout column border

Question

I have a question. How can I do that custom double side border in my xml file?

I tried to use various variants of custom drawable, but in the end it did not work out the result I needed.

Any ideas? In the 2x2 grid example, it works. However, I would like to have a 3x4 grid instead.

At the moment, I have this layout file:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="3"
    tools:background="@color/colorLightBlue">

    <Button
        android:id="@+id/btn_pass_code_1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="1"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_2"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="2"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_3"
        android:layout_columnWeight="0"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="3"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_4"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="4"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_5"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="5"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_6"
        android:layout_columnWeight="1"
        android:background="@color/colorTransparent"
        android:layout_gravity="fill"
        android:text="6"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_7"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="7"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_8"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="8"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_9"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="9"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_0"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="0"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_delete"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@drawable/input_delete"
        android:textColor="@color/colorWhite"
        android:textSize="22sp" />
</GridLayout>

Answer 1

You can use this as the background of your buttons:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Change top, bottom, left and right values to change the borders 
    as you like, this configuration is for top/left border-->
    <item android:top="-1dp" android:left="-1dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="1dip"
                android:color="@android:color/holo_blue_bright" />
        </shape>
    </item>
</layer-list>

You'll have to change the borders depending on the button position in the grid to achieve the result you want. You will have to create a gradient from blue to white to be able to reproduce the intended result (like in the first image you referenced).