TableLayout rows don't shrink equally but only last row does on different screen sizes

I have created a table in which i want to display 9 animals and a next arrow button. Each row has 3 animals, so that's 3 rows for the animals and one last row for the next arrow button. My problem is that on different screen sizes, the rows don't shrink equally but only the last row does having as a result, the next arrow button to disappear.

This is how it looks on a Nexus 4

And that's how it looks an a smaller screen that has a 3.2" size

And here is my XML code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_animals"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="@color/background"
tools:context="kidsbook.jok.kidsbook.Animals">

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/ads_text"
    android:weightSum=".9"
    android:id="@+id/animalsPage1"
    android:visibility="visible">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum=".9">

        <Button
            android:background="@drawable/cat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/catSounds"
            android:layout_weight=".3"/>

        <Button
            android:background="@drawable/dog"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/dogSounds"
            android:layout_weight=".3"/>

        <Button
            android:background="@drawable/chicken"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/chickenSounds"
            android:layout_weight=".3"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum=".9">

        <Button
            android:background="@drawable/horse"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/horseSounds"
            android:layout_weight=".3"/>

        <Button
            android:background="@drawable/frog"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/frogSounds"
            android:layout_weight=".3"/>

        <Button
            android:background="@drawable/pig"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/pigSounds"
            android:layout_weight=".3"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum=".9">

        <Button
            android:background="@drawable/cock"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/cockSounds"
            android:layout_weight=".3"/>

        <Button
            android:background="@drawable/donkey"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/donkeySounds"
            android:layout_weight=".3"/>

        <Button
            android:background="@drawable/sheep"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/sheepSounds"
            android:layout_weight=".3"/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:weightSum="1">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".22"
            android:id="@+id/nextButtonAnimalsTo2"
            android:background="@drawable/next_arrow"
            android:onClick="toPage2from1"/>
    </TableRow>

</TableLayout>

<TextView
    android:text="@string/ads"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:minHeight="50dp"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textSize="20sp"
    android:id="@+id/ads_text"
    android:layout_alignParentBottom="true"/>

</RelativeLayout>

Any suggestions and help would be highly appreciated and thank you all in advance.

Upvotes: 0

Answers (2)

rafsanahmad007

Reputation: 23881

Try this layout: use a Linearlayout instead of Relativelayout and manage layout weight and weightsum properly to divide the screen.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_animals"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_white"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:weightSum="5">

    <TableLayout
        android:id="@+id/animalsPage1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_above="@+id/ads_text"
        android:layout_weight="4"
        android:visibility="visible"
        android:weightSum="4">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:weightSum="3">

            <Button
                android:id="@+id/catSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />

            <Button
                android:id="@+id/dogSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />

            <Button
                android:id="@+id/chickenSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:weightSum="3">

            <Button
                android:id="@+id/horseSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />

            <Button
                android:id="@+id/frogSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />

            <Button
                android:id="@+id/pigSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:weightSum="3">

            <Button
                android:id="@+id/cockSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />

            <Button
                android:id="@+id/donkeySounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />

            <Button
                android:id="@+id/sheepSounds"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="end"
            android:weightSum="3">

            <Button
                android:id="@+id/nextButtonAnimalsTo2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@mipmap/ic_launcher"
                android:onClick="toPage2from1" />
        </TableRow>

    </TableLayout>

    <TextView
        android:id="@+id/ads_text"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Your TEXT"
        android:textColor="#000000"
        android:textSize="20sp" />

</LinearLayout>

output:

Upvotes: 1

Kuldeep Kulkarni

Reputation: 796

@Smolikas, I think your views are overlapping in small screen because you are using RelativeLayout. You can use LinearLayout with orientation vertical inside scrollview. It will work for you.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
        android:id="@+id/activity_animals"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">

Your TableLayout & Textview.

    </LinearLayout>
</ScrollView>

Upvotes: 1

TableLayout rows don&#39;t shrink equally but only last row does on different screen sizes

Answers (2)

Related Questions

TableLayout rows don't shrink equally but only last row does on different screen sizes