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.
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>
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">