The Gap between "Image" and "Text" of a button is too much

The Gap between "Image" and "Text" of a button is too much - java

I have developed an app, following is the code
This is the code of this app
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/cBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/cStr" />
<Button
android:id="#+id/aBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
<Button
android:id="#+id/lBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/lStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/oBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/oStr" />
<Button
android:id="#+id/tBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/tStr" />
<Button
android:id="#+id/eBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/eStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/dBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/dStr" />
<Button
android:id="#+id/hBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/hStr" />
<Button
android:id="#+id/aaBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
</TableRow>
</TableLayout>
</RelativeLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="fStr">Fffffffff</string>
<string name="rStr">Rrrrrr</string>
<string name="sStr">Ssssss </string>
<string name="lStr">Lllll</string>
<string name="oStr">Oooooooooooo</string>
<string name="tStr">Ttttt</string>
<string name="eStr">Eeeeee</string>
<string name="dStr">Dddddddddd</string>
<string name="cStr">Cccccccc</string>
<string name="hStr">Hhhh</string>
<string name="aStr">Aaaaaaaaaa aaaa</string>
</resources>
This app has an issue.
The gap between button image and text is too much, specially in 5.1 WVGA screen. It does the same look in my mobile, which has the screen size of 4.5 inches
Following is the image
How can I solve this issue?

Maybe use LinearLayout ;
![<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="0.33"
android:orientation="horizontal">
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</LinearLayout>
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="0.33"
android:orientation="horizontal">
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</LinearLayout>
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="0.33"
android:orientation="horizontal">
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</LinearLayout>
<LinearLayout
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="0.33"
android:orientation="horizontal">
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight="0.33"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

try to use android:drawablePadding, and android:paddingLeft and android:paddingRight
refer to android:drawableLeft margin and/or padding

Here's a modified version which will reduce the size of the buttons, and center them inside their row, and gets rid of the useless RelativeLayout parent (as Lint was probably pointing out to you) :
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:stretchColumns="*"
android:weightSum="4"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/cBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/aBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/lBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/oBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/tBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/eBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/dBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/hBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
<Button
android:id="#+id/aaBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="bla" />
</TableRow>
</TableLayout>

Related

How to decrease the space between column

I have this table:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="369dp"
android:layout_height="118dp"
android:layout_marginTop="224dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/q1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="A:" />
<TextView
android:id="#+id/q2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="15%" />
<TextView
android:id="#+id/q3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/editTextBackground"
android:layout_weight="1.5"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:textColor="#000000" />
<TextView
android:id="#+id/q4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="20%" />
<TextView
android:id="#+id/q5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
<TextView
android:id="#+id/q6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="25%" />
<TextView
android:id="#+id/q7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="B:" />
<TextView
android:id="#+id/a2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="15%" />
<TextView
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
<TextView
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="20%" />
<TextView
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
<TextView
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="25%" />
<TextView
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000"
/>
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
How to make the columns closer together?
To make less space between 15% and underscore?

Used below codes
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="369dp"
android:layout_height="118dp"
android:layout_marginTop="224dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/q1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="A:" />
<TextView
android:id="#+id/q2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="15%" />
<TextView
android:id="#+id/q3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:textColor="#000000" />
<TextView
android:id="#+id/q4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="20%" />
<TextView
android:id="#+id/q5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
<TextView
android:id="#+id/q6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="25%" />
<TextView
android:id="#+id/q7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:text="B:" />
<TextView
android:id="#+id/a2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="15%" />
<TextView
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
<TextView
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="20%" />
<TextView
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
<TextView
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:gravity="center"
android:text="25%" />
<TextView
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?attr/editTextBackground"
android:textColor="#000000" />
</TableRow>
</TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Output :

Setting the size of buttons in percentage

Please have a look at the following code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:layout_alignParentTop="true" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</RelativeLayout>
This generates the following output.
But this is not what I need. I need these 12 buttons to fill the entire screen, keep equal spaces between each other and to be equal in size as well. I don't need to set a fixed size lie hight=100, width=100, instead, it should adjust the size according to the device screen size. That means, each button could have 8.3% space in screen (100/12 = 8.3).
I tried this by setting the height of each button to 0dp and adding the android:layout_weight = 0.083. But this didn't work because no button were displayed after this.
How can I do this?

You cant have a dynamic layout which you want inside the xml..
In your activity/fragment where you load the layout.. you have to set the tableRow height yourself depending on the screen size
To get screensize you can use
DisplayMetrics metrics = new DisplayMetrics();
Activity aActivity = (Activity) container.getContext();
aActivity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
screen_Width = metrics.widthPixels;
screen_Height = metrics.heightPixels;
Now you can set each table row width to be totalHeight/NoOFRows - padding.
tableRow.setMinimumHeight(calculatedHeight);
similar calculation can be done to width to make them properly fill and maintain same size

Try the following layout.I have changed some weight values and made button height as fill_parent
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight=".3"
android:text="Button" />
</TableRow>
</TableLayout>
</RelativeLayout>
This is working on my device.Hope this works for u as well!

Button alignment is gone when app is displayed Horizontally

I have developed an app, which look like below, in vertical view.
This is the code of this app
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/fBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/sStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/cBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/cStr" />
<Button
android:id="#+id/aBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
<Button
android:id="#+id/lBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/lStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/oBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/oStr" />
<Button
android:id="#+id/tBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/tStr" />
<Button
android:id="#+id/eBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/eStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/dBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/dStr" />
<Button
android:id="#+id/hBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/hStr" />
<Button
android:id="#+id/aaBtn"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/aStr" />
</TableRow>
</TableLayout>
</RelativeLayout>
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="fStr">Fffffffff</string>
<string name="rStr">Rrrrrr</string>
<string name="sStr">Ssssss </string>
<string name="lStr">Lllll</string>
<string name="oStr">Oooooooooooo</string>
<string name="tStr">Ttttt</string>
<string name="eStr">Eeeeee</string>
<string name="dStr">Dddddddddd</string>
<string name="cStr">Cccccccc</string>
<string name="hStr">Hhhh</string>
<string name="aStr">Aaaaaaaaaa aaaa</string>
</resources>
This app has 2 issues.
The gap between button image and text is too much
When the app is in horizontal view, the entire alignment is messed up, and get displayed as below.
As you can see, there is not text!
How can I solve this issue?

Create a new folder under res folder named layout-land and put your layout(XML file) in that folder.
See this doc

Try this.. give table row width as match_parent and height as wrap_content and remove weight. then if you give weight for something you need to give 0dp for particular height or width
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeScreen" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/fBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="fStr" />
<Button
android:id="#+id/rBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="rStr" />
<Button
android:id="#+id/sBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="sStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/cBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="cStr" />
<Button
android:id="#+id/aBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="aStr" />
<Button
android:id="#+id/lBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="lStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/oBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="oStr" />
<Button
android:id="#+id/tBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
<Button
android:id="#+id/eBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/dBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
<Button
android:id="#+id/hBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
<Button
android:id="#+id/aaBtn"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:drawableTop="#drawable/ic_launcher"
android:layout_weight=".3"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="tStr" />
</TableRow>
</TableLayout>
</RelativeLayout>

This problem is due to the size that image if you take small size images then you face this problem.....if you want put big sized images then You have to change RelativeLayout to ScrolView
and then TableLayout height should be wrap_content.....

Layout spacing issue in a bigger size screen

Does anyone know why this is happening:
The letters boxes are not aligned correctly in the tablet screen which is 10" but it works just fine on 7" and 4.7" screen.
Here is my XML layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
android:id="#+id/alphabetPad" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/rowABCD"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnA"
android:layout_weight="1"
android:text="A"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnB"
android:layout_weight="1"
android:text="B"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/btnC"
android:layout_weight="1"
android:text="C"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/btnD"
android:layout_weight="1"
android:text="D"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/rowEFGH"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnE"
android:layout_weight="1"
android:text="E"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnF"
android:layout_weight="1"
android:text="F"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnG"
android:layout_weight="1"
android:text="G"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnH"
android:layout_weight="1"
android:text="H"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowIJKL">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnI"
android:layout_weight="1"
android:text="I"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnJ"
android:layout_weight="1"
android:text="J"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnK"
android:layout_weight="1"
android:text="K"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnL"
android:layout_weight="1"
android:text="L"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowMNOP">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnM"
android:layout_weight="1"
android:text="M"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnN"
android:layout_weight="1"
android:text="N"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnO"
android:layout_weight="1"
android:text="O"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnP"
android:layout_weight="1"
android:text="P"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowQRST">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnQ"
android:layout_weight="1"
android:text="Q"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnR"
android:layout_weight="1"
android:text="R"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnS"
android:layout_weight="1"
android:text="S"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnT"
android:layout_weight="1"
android:text="T"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowUVWX">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnU"
android:layout_weight="1"
android:text="U"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnV"
android:layout_weight="1"
android:text="V"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnW"
android:layout_weight="1"
android:text="W"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/btnX"
android:layout_weight="1"
android:text="X"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowYZ">
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnBlank"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnY"
android:layout_weight="1"
android:text="Y"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/btnZ"
android:layout_weight="1"
android:text="Z"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/btnBlank"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
</LinearLayout>
I am guessing the boxes are too big to fit. How can I make it so that no matter what screen size the app is being displayed on, the boxes always line up.
I tried changing the margin for each button, 1dp for larger screen and 2dp for smaller screen but that didn't help.
Help is greatly appreciated.

Just replace
android:layout_width = "wrap_content"
with
android:layout_width = "fill_parent"
Try the below layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
android:id="#+id/alphabetPad" >
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/rowABCD"
android:layout_weight="1">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnA"
android:layout_weight="1"
android:text="A"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnB"
android:layout_weight="1"
android:text="B"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/btnC"
android:layout_weight="1"
android:text="C"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/btnD"
android:layout_weight="1"
android:text="D"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/rowEFGH"
android:layout_weight="1">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnE"
android:layout_weight="1"
android:text="E"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnF"
android:layout_weight="1"
android:text="F"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnG"
android:layout_weight="1"
android:text="G"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnH"
android:layout_weight="1"
android:text="H"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowIJKL">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnI"
android:layout_weight="1"
android:text="I"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnJ"
android:layout_weight="1"
android:text="J"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnK"
android:layout_weight="1"
android:text="K"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnL"
android:layout_weight="1"
android:text="L"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowMNOP">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnM"
android:layout_weight="1"
android:text="M"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnN"
android:layout_weight="1"
android:text="N"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnO"
android:layout_weight="1"
android:text="O"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnP"
android:layout_weight="1"
android:text="P"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowQRST">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnQ"
android:layout_weight="1"
android:text="Q"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnR"
android:layout_weight="1"
android:text="R"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnS"
android:layout_weight="1"
android:text="S"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnT"
android:layout_weight="1"
android:text="T"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowUVWX">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnU"
android:layout_weight="1"
android:text="U"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnV"
android:layout_weight="1"
android:text="V"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnW"
android:layout_weight="1"
android:text="W"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/btnX"
android:layout_weight="1"
android:text="X"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:id="#+id/rowYZ">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnBlank"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnY"
android:layout_weight="1"
android:text="Y"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/btnZ"
android:layout_weight="1"
android:text="Z"
android:background="#drawable/letterstyle"
android:textColor="#FFFFFF"
android:layout_margin="2dp"
android:textSize="#dimen/btn_text"
android:textStyle="bold" />
<Button
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:id="#+id/btnBlank"
android:layout_weight="1"
android:text=""
android:visibility="invisible" />
</LinearLayout>
Please check the modified layout I just posted in my answer. It is working fine for me when I tested. When you are specifying layout_weight in a linear layout, it is always better to use layout_width or layout_height as fill_parent, as the LinearLayout adjusts the layout according to the layout_weight attribute, regardless of the content inside the layout.
Let me know if it works for you too!

You can use TableLayout with android:stretchColumns="*" to force all columns to have the exact same width.
Example
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:padding="5dp"
android:stretchColumns="*" >
<TableRow android:layout_weight="1">
<Button android:text="A"
android:layout_height="match_parent"/>
<Button android:text="B"
android:layout_height="match_parent"/>
<Button android:text="C"
android:layout_height="match_parent"/>
<Button android:text="D"
android:layout_height="match_parent"/>
<Button android:text="E"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<Button android:text="F"
android:layout_height="match_parent"/>
<Button android:text="G"
android:layout_height="match_parent"/>
<Button android:text="H"
android:layout_height="match_parent"/>
<Button android:text="I"
android:layout_height="match_parent"/>
<Button android:text="J"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<Button android:text="K"
android:layout_height="match_parent"/>
<Button android:text="L"
android:layout_height="match_parent"/>
<Button android:text="M"
android:layout_height="match_parent"/>
<Button android:text="N"
android:layout_height="match_parent"/>
<Button android:text="O"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<Button android:text="P"
android:layout_height="match_parent"/>
<Button android:text="Q"
android:layout_height="match_parent"/>
<Button android:text="R"
android:layout_height="match_parent"/>
<Button android:text="S"
android:layout_height="match_parent"/>
<Button android:text="T"
android:layout_height="match_parent"/>
</TableRow>
</TableLayout>

Multiple TableLayouts inside a LinearLayout - Android

I am attempting to place multiple TableLayouts inside of a LinearLayout. When I implemented the code and ran it, the display was my background image with nothing displayed on it. Not sure what happened.
Before I tried to do this, I had everything displaying correctly but it was so much text that it had to be extremely small to make everything fit. To fix this I want to do 3 TableLayouts with the middle one being a ScrollView (I will worry about implementing the ScrollView after I fix the problem at hand).
My question is how to make all 3 TableLayouts visible with each being a specific percentage of the screen.
Below is 100% of the code for this XML file.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
android:shrinkColumns="0"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="70dp"
android:paddingBottom="70dp"
android:background="#drawable/scroll" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="15" >
<TableRow
android:id="#+id/header"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TextView
android:id="#+id/category"
android:layout_height="wrap_content"
android:layout_width="0px"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="15sp"
android:paddingTop="10dp"
android:gravity="center_horizontal" />
<TableLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TableRow
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TextView
android:id="#+id/points"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:gravity="left"
android:textStyle="bold" />
</TableRow>
<TableRow
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TextView
android:id="#+id/percentage"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:gravity="left"
android:textStyle="bold" />
</TableRow>
<TableRow
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TextView
android:id="#+id/total_score"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:gravity="left"
android:textStyle="bold" />
</TableRow>
</TableLayout>
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#000001" />
<TableRow
android:id="#+id/row3"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<TextView
android:id="#+id/imageColumn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0" />
<TextView
android:id="#+id/questionColumn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="10sp"
android:textStyle="bold|italic"
android:gravity="center_vertical" />
<TextView
android:id="#+id/answerColumn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="10sp"
android:textStyle="bold|italic"
android:gravity="center_vertical" />
<TextView
android:id="#+id/verseColumn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="10sp"
android:textStyle="bold|italic"
android:gravity="center_vertical" />
</TableRow>
</TableLayout>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="70" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/q1Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q1Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q1Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q1Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row5"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q2Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q2Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q2Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q2Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row6"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q3Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q3Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q3Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q3Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row7"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q4Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q4Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q4Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q4Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row8"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q5Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q5Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q5Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q5Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row9"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q6Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q6Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q6Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q6Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row10"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q7Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q7Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q7Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q7Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row11"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q8Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q8Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q8Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q8Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row12"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q9Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q9Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q9Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q9Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#C2BEBF" />
<TableRow
android:id="#+id/row13"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2,3"
android:layout_weight="1" >
<ImageView
android:id="#+id/q10Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q10Question"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".45"
android:textSize="7sp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q10Answer"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/q10Verse"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:textSize="7sp"
android:layout_gravity="center_vertical" />
</TableRow>
</TableLayout>
</ScrollView>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="15" >
<TableRow
android:id="#+id/row14"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:stretchColumns="0,1"
android:layout_weight="1" >
<Button
android:id="#+id/mainmenuBtn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:textSize="7sp" />
<Button
android:id="#+id/highscoresBtn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:textSize="7sp" />
<Button
android:id="#+id/playBtn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".34"
android:textSize="7sp" />
</TableRow>
</TableLayout>
</LinearLayout>

Do you want the tables to be side by side, or on top of eachother? You have the orientation of your LinearLayout set to "vertical" now, but the width of each table as "0dip". I imagine you want them side by side, which means the orientation of the LinearLayout should be "horizontal", and keep your table widths as "0dip". If you do in fact want them on top of eachother, change the width for each table to "wrap_content" or "match_parent" and the height to "0dip".
Vertical example
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="15" >
</TableLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="70" >
</TableLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="15" >
</TableLayout>
</LinearLayout>
Horizontal Example
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TableLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
</TableLayout>
<TableLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
</TableLayout>
<TableLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
</TableLayout>
</LinearLayout>
Bottom table edit
<TableLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="15" >
<TableRow
android:id="#+id/row14"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1" >
<Button
android:id="#+id/mainmenuBtn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="7sp" />
<Button
android:id="#+id/highscoresBtn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="7sp" />
<Button
android:id="#+id/playBtn"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="7sp" />
</TableRow>
</TableLayout>

Develop Reference

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

The Gap between "Image" and "Text" of a button is too much - java

try to use android:drawablePadding, and android:paddingLeft and android:paddingRight refer to android:drawableLeft margin and/or padding

Related

How to decrease the space between column

Setting the size of buttons in percentage

Button alignment is gone when app is displayed Horizontally

Layout spacing issue in a bigger size screen

Multiple TableLayouts inside a LinearLayout - Android

Categories

Resources