Need help in the android layout

Question

I code my android application: K-map solver. So I need to create the layout for kmap. I coded it and get the next view:

Code of this layout:

`<TableLayout
        android:id="@+id/table"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.25">

        <TableRow>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="B'"
                android:textColor="@color/black"
                android:textSize="30sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="B"
                android:textColor="@color/black"
                android:textSize="30sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:textColor="@color/black"
                android:textSize="20sp" />

        </TableRow>

        <TableRow>

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="A'"
                android:textColor="@color/black"
                android:textSize="30sp"
                android:layout_marginEnd="5dp"/>

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

            <Button
                android:id="@+id/button0"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:background="@android:color/transparent"
                android:text="@string/zero"
                android:textColor="@android:color/black"
                android:textSize="30sp"
                tools:ignore="DuplicateSpeakableTextCheck" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

            <Button
                android:id="@+id/button1"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:background="@android:color/transparent"
                android:text="@string/zero"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />
        </TableRow>

        <TableRow>

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

        </TableRow>

        <TableRow>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="A"
                android:textColor="@color/black"
                android:textSize="30sp"
                android:layout_marginEnd="5dp"/>

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

            <Button
                android:id="@+id/button2"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:layout_weight="0"
                android:background="@android:color/transparent"
                android:text="@string/zero"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />

            <Button
                android:id="@+id/button3"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:background="@android:color/transparent"
                android:text="@string/zero"
                android:textColor="@android:color/black"
                android:textSize="30sp" />

            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="@color/black" />
        </TableRow>

        <TableRow>

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />

            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/black" />
        </TableRow>
    </TableLayout>`

So my question is: how can i improve this code without using the "View" element which describes the black line between the button? Or, maybe, this table layout is normal and i do not need to change anything. Thank you for your answers!

I tied only that i describet above.

Answer 1

It depends on how fussy you are on the exact border width.

Another way that can work is to use background drawables like:-

border.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/black"/>
        </shape>
    </item>
    <item android:left="2dp" android:right="2dp" android:top="2dp" android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

this produces a background like:-

Then apply that to your buttons layout:-

        <TableLayout
            android:id="@+id/table"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.25">

            <TableRow>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:textColor="@color/black"
                    android:textSize="20sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="B'"
                    android:textColor="@color/black"
                    android:textSize="30sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="B"
                    android:textColor="@color/black"
                    android:textSize="30sp" />

            </TableRow>

            <TableRow>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="5dp"
                    android:gravity="center"
                    android:text="A'"
                    android:textColor="@color/black"
                    android:textSize="30sp" />

                <Button
                    android:id="@+id/button0"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    app:backgroundTint="@null"
                    android:background="@drawable/border"
                    android:text="0"
                    android:textColor="@android:color/black"
                    android:textSize="30sp" />

                <Button
                    android:id="@+id/button1"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    app:backgroundTint="@null"
                    android:background="@drawable/border"
                    android:text="0"
                    android:textColor="@android:color/black"
                    android:textSize="30sp" />

            </TableRow>

            <TableRow>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginEnd="5dp"
                    android:gravity="center"
                    android:text="A"
                    android:textColor="@color/black"
                    android:textSize="30sp" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    android:layout_weight="0"
                    app:backgroundTint="@null"
                    android:background="@drawable/border"
                    android:text="0"
                    android:textColor="@android:color/black"
                    android:textSize="30sp" />

                <Button
                    android:id="@+id/button3"
                    android:layout_width="90dp"
                    android:layout_height="90dp"
                    app:backgroundTint="@null"
                    android:background="@drawable/border"
                    android:text="0"
                    android:textColor="@android:color/black"
                    android:textSize="30sp" />

            </TableRow>
        </TableLayout>

Note the app:backgroundTint="@null" if you are using Material Buttons which add there own background color from the materials Theme.

This produces

Note the double thickness in the lines in the middle as these are double thickness (one from the right of the first button and one from the left of the second, the same goes for top or bottom) as these borders are inside each cell. You can fix this by having multiple different border drawables with thinner middle lines, this would be 4 different border drawables in this case.