Arranging layout using custom images as buttons

Question

I have images created in my res/drawable directory with appropriate hdpi, mdpi, xhdpi, and xxhdpi sizings, and I would like to use them instead of regular buttons. I've done that part, but I need some help with the layout and formatting. I'll write my questions first, and then I'll post code and two screenshots below. Any advice is appreciated. Thanks!

Details on my device and the images:

Nexus 5 running Lollipop.

hdpi A, B, C, D are 96x96. E is 72x72

mdpi A, B, C, D are 64x64. E is 48x48.

xhdpi A, B, C, D are 128x128. E is 96x96.

xxhdpi A, B, C, D are 192x192. E is 144x144.

Questions:

1) Why has button E on the last row stretched horizontally? Button E is a square with rounded edges, just like all the others, but it is scaled down. Why did it stretch, and how can I fix it?

2) How can I arrange the drawables with space between them that will adjust dynamically based on screen size to keep the proportions the same? (See Picture 2 below)

fragment_main.xml: (See Picture 1 below to see how this looks)

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragmentMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TableLayout
        android:id="@+id/fragmentMainTableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <TableRow
           android:gravity="center_horizontal"
            android:layout_weight="0">

            <Button
                android:id="@+id/buttonA"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/a_selector"/>

            <Button
                android:id="@+id/buttonB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/b_selector"/>

        </TableRow>

        <TableRow
            android:gravity="center_horizontal"
            android:layout_weight="0">

            <Button
                android:id="@+id/buttonC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/c_selector"/>

            <Button
                android:id="@+id/buttonD"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/d_selector"/>

        </TableRow>

        <TableRow
            android:gravity="center|bottom"
            android:layout_weight="0">

            <Button
                android:id="@+id/buttonE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/e_selector"/>

        </TableRow>

    </TableLayout>

</LinearLayout>

Picture 1, the current layout:

Current layout

Picture 2, the desired layout (but with button E properly shaped):

Desired layout

Yoganand.N · Answer 1 · 2014-12-03T06:06:16.043

For E to be shaped properly, try

<TableRow
        android:gravity="center"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

For spacing between images try using margin property. Below is the complete code with spacing:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">

<TableLayout
    android:id="@+id/fragmentMainTableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
        android:layout_weight=".5"
    android:gravity="bottom">

    <TableRow
       android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonA"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

        <Button
            android:id="@+id/buttonB"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

    <TableRow
        android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonC"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

        <Button
            android:id="@+id/buttonD"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

</TableLayout>
<TableLayout
    android:id="@+id/fragmentMainTableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
        android:layout_weight="0.5"
    android:gravity="center">
    <TableRow
        android:gravity="center"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonE"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

</TableLayout>

</LinearLayout>

Replace the image names

Your `layout_margin` suggestion works, thank you! However, I need to move button E farther down, nearer to the bottom of the screen. Right now, the other buttons are overlapping part of E. Would it be possible to use something like `Space` dynamically? Also, your suggestion regarding button E didn't have any noticeable effect, unfortunately. — pez, Dec 03 '14 at 05:58
could you tell me what device you are using to see the output and what is the size of the 5 images? — Yoganand.N, Dec 03 '14 at 06:03

M S Gadag · Accepted Answer · 2014-12-03T06:47:13.297

try this. hope it helps u...

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragmentMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TableLayout
        android:id="@+id/fragmentMainTableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" >

        <TableRow
            android:layout_weight="1"
            android:gravity="center|bottom"
            android:weightSum="4" >

            <Button
                android:id="@+id/buttonA"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />

            <Button
                android:id="@+id/buttonB"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />
        </TableRow>

        <TableRow
            android:layout_weight="0"
            android:gravity="center_horizontal"
            android:weightSum="4" >

            <Button
                android:id="@+id/buttonC"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />

            <Button
                android:id="@+id/buttonD"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />
        </TableRow>

        <TableRow
            android:layout_weight="1"
            android:gravity="center" >

            <Button
                android:id="@+id/buttonE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:background="@drawable/ic_launcher" />
        </TableRow>
    </TableLayout>

</LinearLayout>

convert ur image like this.

enter image description here

This answer works well as far as sizing E properly and moving it to the bottom of the page. Can you space A, B, C, D out equally? I've tried adding `android:layout_margin="10dp"` to each `Button`, and that spaces them out but puts too much space vertically between the row with A+B and the row with C+D — pez, Dec 03 '14 at 06:21
add this line to A,B,C and D button `android:layout_margin="5dp"` n try — M S Gadag, Dec 03 '14 at 06:25
@pez you can change android:gravity="center" to android:gravity="bottom" in 2nd TableLayout, this will push button to bottom — Chanchal Shelar, Dec 03 '14 at 06:28
This will work if you add `layout_marginRight,-Bottom,-End = "5dp"` to A, `layout_marginLeft,-Bottom,-Start = "5dp"` to B, `layout_marginRight, -End` = "5dp"` to C, and `layout_marginLeft,-Start = "5dp"` to D. — pez, Dec 03 '14 at 06:32
better convert ur images with transparent space with ur requirements — M S Gadag, Dec 03 '14 at 06:35
@MSGadag Is there a way around that? Adding only `layout_margin="5dp"` to ABCD results in [this](http://i.imgur.com/cBTdos4.png). They're closer on the vertical axis than they are on the horizontal one. It might be a good idea to simply add transparent space as you suggested. That would help with compatibility. — pez, Dec 03 '14 at 06:40
why dont you try like padding your E image android:paddingLeft="5dip" — Yoganand.N, Dec 03 '14 at 06:49

score 0 · Answer 3 · answered Dec 03 '14 at 05:50

Check with Below layout, i didnt changed much but when i tested it working as per your need.

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragmentMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TableLayout
        android:id="@+id/fragmentMainTableLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <Button
                android:id="@+id/buttonA"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/a_selector" />

            <Button
                android:id="@+id/buttonB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/b_selector" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <Button
                android:id="@+id/buttonC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/c_selector" />

            <Button
                android:id="@+id/buttonD"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/d_selector" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:gravity="center_horizontal">

            <Button
                android:id="@+id/buttonE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/e_selector" />
        </TableRow>
    </TableLayout>

</LinearLayout>

score 0 · Answer 4 · answered Dec 03 '14 at 06:27

Try this

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"

>
<TableLayout 
    android:id="@+id/fragmentMainTableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TableRow
        android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/a_selector"/>

        <Button
            android:id="@+id/buttonB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/b_selector"/>

    </TableRow>

    <TableRow
        android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/c_selector"/>

        <Button
            android:id="@+id/buttonD"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/d_selector"/>

    </TableRow>

    <TableRow
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/e_selector"/>

    </TableRow>

   </TableLayout>
  </LinearLayout>

Arranging layout using custom images as buttons

4 Answers4