Button alignment is gone when app is displayed Horizontally

Button alignment is gone when app is displayed Horizontally - java

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

Related

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

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>

Buttons are not in same size

I have created an application with buttons of "same size" and I added images to it which are also in the same size. Following is my 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: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/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" />
</TableRow>
</TableLayout>
</RelativeLayout>
But the problem is, it does not generate what I expected. Following is how it get displayed in eclipse editor
Following is how it get displayed in emulator
As you can see, first column and third column are bigger than the second column. But what I expected is columns in same size.
Following is my strings.xml file in case it is helpful
<?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="cStr">Ccccccc</string>
<string name="aStr">Aaaaaaa</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>
How can I solve this issue?

Try setting the layout_width to 0dp, that's fixed this issue for me before.

Change all the Button android:layout_width to fill_parent
android:layout_width="fill_parent"

try this way :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buttonssssssssssssssssssssssss" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buttonssssssssssssssssssssssss" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buttonssssssssssssssssssssssss" />
</LinearLayout>

Change the layout:width attribute of the table row with fill parent
android:layout_width="fill_parent"

I think you can solve this issue adding
<LinearLayout
android:layout_width="fill_parent"
android:orientation="horizontal"
and into your LinearLayout(here) you can add your blocks with: android:layout_width="0.0dip"
if you want to put some margin between the blocks... use: android:layout_marginLeft="sizehere.0dip" android:layout_marginRight="sizehere.0dip"
</LinearLayout>

Well I agree and recommend the use of layout_weight where you have to make a distribution or divide width among the view objects.
Also looking at your code I would suggest using lesser views as you are using TableLayout that is not actually required if you just use a LinearLayout with three buttons and use the above mentioned property properly.
I am also not sure why you actually need RelativeLayout in this case. If you go by hierarchy-viewer tool from android-sdk then you will come to know the lesser the number of views you are using a layout the low memory your screen will use and hence responsive.
The latter one is just a suggestion

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!

How to cause table cells to use all screen height in TableLayout?

I am new to Android development.
I have an activity in which I would like to set a few buttons in two table rows. but currently they use only a small portion of it
Here is the XML for the layout for this activity:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableRow>
</TableLayout>
Thanks for any help!

try to use android:layout_weight="1" in table row
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
see this
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ffff0000">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ff00ff00">
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#ff00ff">
</TableRow>
</TableLayout>

Its like this....
Either goto the GUI tool to edit the XML properties in Eclipse and set the layout property
layout weight to 1.
OR goto the XML page, and do the following to the Table row android:layout_weight="1"
android:layout_width="wrap_content" and android:layout_height="wrap_content"

How to properly distribute 4 buttons on an android layout

Im trying to distribute 4 image buttons into the 4 possible screen corners (regardless of res) of an android layout. I want the image background to be static (ie 50x50 dip) and I would also like to have the android.gesture.GestureOverlayView layer on full-screen in the background. Im having a hard time figuring this out and Im very newby on droid dev.
working with eclipse+AVD 2.1.1
many thanks!!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#6495ED"
android:gravity="fill"
android:launchMode="singleInstance"
android:orientation="vertical" >
<!-- ICON -->
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TableLayout
android:id="#+id/tableLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:stretchColumns="*">
<TableRow
android:id="#+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<!-- SETTINGS -->
<Button
android:id="#+id/button1"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_gravity="left"
android:layout_weight="1"
android:background="#drawable/options"
android:clickable="true"
android:minHeight="50dp"
android:minWidth="50dp"
android:visibility="visible" />
<!-- LIST -->
<Button
android:id="#+id/button4"
android:layout_width="0dip"
android:layout_height="50dip"
android:layout_gravity="right"
android:layout_weight="1"
android:background="#drawable/list"
android:clickable="true"
android:maxHeight="50dp"
android:maxWidth="50dp"
android:visibility="visible" />
</TableRow>
<!-- GESTURE (GOES FULL SCREEN ON BACKGROUND -->
<android.gesture.GestureOverlayView
android:id="#+id/gestureOverlayView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</android.gesture.GestureOverlayView>
<TableRow>
<!-- SEARCH -->
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="#drawable/find"
android:clickable="true"
android:maxHeight="50dp"
android:maxWidth="50dp"
android:visibility="visible" />
<!-- CLOSE -->
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/close"
android:gravity="right|top"
android:clickable="true"
android:Height="50dp"
android:Width="50dp"
android:visibility="visible" />
</TableRow>
</TableLayout>
</LinearLayout>

RelativeLayout is the key:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#6495ED">
<android.gesture.GestureOverlayView
android:id="#+id/gestureOverlayView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</android.gesture.GestureOverlayView>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#F00" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#F00" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#F00" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#F00" />
</RelativeLayout>

Using Relative layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:background="#6495ED"
android:layout_height="fill_parent"
tools:ignore="HardcodedText" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.gesture.GestureOverlayView
android:id="#+id/gestureOverlayView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</android.gesture.GestureOverlayView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="Button3" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="Button4" />
</RelativeLayout>

Develop Reference

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

Button alignment is gone when app is displayed Horizontally - java

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

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

Related

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

Buttons are not in same size

Setting the size of buttons in percentage

How to cause table cells to use all screen height in TableLayout?

How to properly distribute 4 buttons on an android layout

Categories

Resources