Zahid H
Reputation: 245
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.
Upvotes: 1
Views: 85
Answers (2)
user1952459
Reputation:
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!
Upvotes: 3
Brian Attwell
Reputation: 9299
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>
Upvotes: 1
Related Questions
- android Layout Spacing
- How to make layout consistent for small and large screens ?There's is always some whitespace left
- Android: designing layout issues
- Android Layout and positioning issue
- issue with android layout for different screen sizes
- linear layouts not spacing correctly
- Wrong layout on (x)large display
- Large screens layout not as expected
- Android LinearLayout Spacing
- Unwanted Margin in Layout