1

I am trying to create a 7 equal width columns using the include blocks. The following code seems to be working for higher resolutions, but on lower resolutions (e.g. 480x800) the last column is off the screen.

I am new to Android and I would really appreciate any advice oh how to organize the layout of reusable elements. My final goal is a board of 7x7 "cells" that can contain superposed images (that is why I used RelativeLayout in my include).

screenshot of the seventh column off the screen

main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.banzaitokyo.monstrarium.MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="*">

        <TableRow android:background="@color/colorPrimary">

            <include layout="@layout/cell" />
            <include layout="@layout/cell" />
            <include layout="@layout/cell" />
            <include layout="@layout/cell" />
            <include layout="@layout/cell" />
            <include layout="@layout/cell" />
            <include layout="@layout/cell" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </TableLayout>
</LinearLayout>

cell.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorGround"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="1dp"
        android:adjustViewBounds="true"
        android:background="@color/colorDesert"
        android:contentDescription="@string/evil_state"
        android:cropToPadding="false"
        android:src="@drawable/evil" />
</RelativeLayout>
Pritesh - ɐʎıɥpɐΛ ɥsǝʇᴉɹꓒ
  • 758
  • 1
  • 6
  • 19
BanzaiTokyo
  • 1,376
  • 4
  • 17
  • 33
  • 1
    What a **terrible layout nesting**! Did you know that **nesting layouts is bad for performances**? As a general rule, try to **keep your layouts as flat as possible**. – Phantômaxx Oct 10 '17 at 09:56
  • Check out this : https://stackoverflow.com/questions/6647177/set-equal-width-of-columns-in-table-layout-in-android – Haresh Chhelana Oct 10 '17 at 09:58
  • 1
    @ModularSynth thanks for your comment. What specific improvements would you suggest? How would you make it flat? – BanzaiTokyo Oct 10 '17 at 09:58
  • @HareshChhelana I looked at that. It doesn't seem to work in 's case. – BanzaiTokyo Oct 10 '17 at 09:59
  • **1** - You can probably get Rid of the current LinearLayout root. **2** - You don't need a RelativeLayout surrounding your ImageView cells. And probably you don't need all the `include` part anymore. See also: https://developer.android.com/training/improving-layouts/reusing-layouts.html – Phantômaxx Oct 10 '17 at 10:28
  • @ModularSynth I use RelativeLayout to be able to superpose images. As for include, I am trying to avoid copy&pasting 49 blocks of identical code. – BanzaiTokyo Oct 10 '17 at 11:35
  • You still don't need to enclose the ImageViews in a RelativeLayout. – Phantômaxx Oct 10 '17 at 13:03
  • 1
    @ModularSynth this layout is not complete and I tried to remove everything that is not related to the problem. Now the problem is solved. But I agree I need to learn more about layouts. – BanzaiTokyo Oct 10 '17 at 13:17

1 Answers1

1

You can make partition using weight inside your "TableRow" tag with an extra LinearLayout like below.

<TableRow android:background="@color/colorPrimary">

                    <include layout="@layout/cell"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"/>
                    <include layout="@layout/cell"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"/>
                    <include layout="@layout/cell"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"/>
                    <include layout="@layout/cell"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"/>
                    <include layout="@layout/cell"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"/>
                    <include layout="@layout/cell"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"/>
                    <include layout="@layout/cell"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"/>

            </TableRow>

You can find more detail about weight here

Manish Karena
  • 724
  • 6
  • 29