androidandroid-layouttablelayoutandroid-tablelayout

Tablelayout elements are not centered and go off screen

When I see the table in android studio, it looks centered but it's not on AVD or my own device. Here is the image. enter image description here

As you can see, the table is slightly off to the right. On the physical devices, the shift is more remarkable. How can I fix this? I already tried android:layout_gravity="center" in table layout. and .setGravity(Gravity.CENTER); in java file. and both didn't work.

Here is my XML.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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/cl"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/scrl"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scrollbars="none"
        app:layout_constraintBottom_toTopOf="@+id/progressBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar2">

        <LinearLayout
            android:id="@+id/Llayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        </LinearLayout>
    </ScrollView>

    <TableLayout

        android:id="@+id/table1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="false"
        android:orientation="horizontal"
        android:stretchColumns="*"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar">


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

            <Button
                android:id="@+id/btn_one"
                android:layout_width="118dp"
                android:layout_height="wrap_content"
                android:gravity="clip_horizontal|center"
                android:text="@string/one"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/btn_two"
                android:layout_width="21dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/two"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/btn_three"
                android:layout_width="27dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/three"
                android:textSize="@dimen/btn_size" />
        </TableRow>

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

            <Button
                android:id="@+id/btn_four"
                android:layout_width="140dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/four"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/btn_five"
                android:layout_width="140dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/five"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/btn_six"
                android:layout_width="7dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/six"
                android:textSize="@dimen/btn_size" />
        </TableRow>

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

            <Button
                android:id="@+id/btn_seven"
                android:layout_width="140dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/seven"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/btn_eight"
                android:layout_width="140dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/eight"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/btn_nine"
                android:layout_width="140dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/nine"
                android:textSize="@dimen/btn_size" />
        </TableRow>

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

            <TextView
                android:id="@+id/textView6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/btn_zero"
                android:layout_width="140dp"
                android:layout_height="wrap_content"
                android:layout_gravity="clip_vertical"
                android:gravity="center"
                android:text="@string/zero"
                android:textSize="@dimen/btn_size" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentStart="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:layout_gravity="clip_horizontal"
                android:onClick="onclick2"
                android:visibility="gone"
                app:backgroundTint="@color/white" />

        </TableRow>

    </TableLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:layout_constraintTop_toBottomOf="@+id/scrl"
        app:layout_constraintBottom_toTopOf="@+id/table1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="368dp" />

    <ProgressBar
        android:id="@+id/progressBar2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:indeterminateOnly="false"
        android:progressDrawable="@drawable/circle"
        android:rotation="0"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:max="100"
        app:layout_constraintBottom_toTopOf="@+id/scrl"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:progress="70" />

    <TextView
        android:id="@+id/textinprog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/one"
        android:textSize="60sp"
        app:layout_constraintBottom_toTopOf="@+id/scrl"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/progressBar2"
        app:layout_constraintTop_toTopOf="@+id/progressBar2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Solution

  • The problem that the widths of the buttons' are hard-coded with certain values while you need to stretch them using android:stretchColumns="*" attribute.

    And therefore their widths might exceed the width of a phone's screen.

    So, in order to have equal width buttons with android:stretchColumns="*", you also need to change/add the below attributes to every button (except the zero button):

    android:layout_width="0dp"
android:layout_weight="1"

    Side note:

    There are extra unneeded attributes in the <TableLayout> that can be removed as you already using android:layout_width="match_parent", so you can keep it just like:

    <TableLayout
    android:id="@+id/table1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:stretchColumns="*"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/progressBar">