Android: Allow margin/padding in TableLayout to give some separation between widgets

Question

I have defined six buttons in TableLayout as:-

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:padding="5dp"
        android:text="Btn1" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

</TableLayout>

whose display is like this:

enter image description here

here I want separation between all these buttons. When I apply padding or margin then the button which is in right side not fit into the screen and some portion is cut.

Here I given padding 20 to the first row and margin 20 to the second row then it looks like:-

enter image description here

code:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:padding="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_margin="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:padding="5dp"
        android:text="Btn1" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:text="Btn1" />
</TableRow>

</TableLayout>

How to solve this issue?

Style:-

<style name="CustomStyleButton2" parent="@android:style/Widget.Button">
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#dedfdc</item>
    <item name="android:gravity">center</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">0.6</item>
    <item name="android:background">@drawable/custom_button2</item>
    <item name="android:padding">10dip</item>
</style>

background:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#151515" />
            <stroke android:width="1dp" android:color="#FFFFFF" />
            <corners android:radius="3dp" />
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient android:angle="270" android:endColor="#2E2E2E" android:startColor="#585858" />
            <stroke android:width="1dp" android:color="#FFFFFF" />
            <corners android:radius="3dp" />
            <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
        </shape>
    </item>
</selector>

@niteshgoel... sorry nitesh ...i am using kathir code ...this style is also used in other layout. therefore if I made any change in style then it will effect on another layout... — Vinit ..., Dec 31 '13 at 12:01
i have just given you the correct solution according to your question.you can create a different style if you want to. else its good you can use anything you want...thanks.. — nitesh goel, Dec 31 '13 at 12:13
@niteshgoel ..thanx for you effort.... I checked your code(in sample project). It's working...thanx again ... — Vinit ..., Dec 31 '13 at 12:38

score 3 · Accepted Answer · answered Dec 31 '13 at 10:09

3

enter image description here just add these lines to your style

<item name="android:layout_marginRight">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>

answered Dec 31 '13 at 10:09

nitesh goel

6,338
2
29
38

this is what you want...?? – nitesh goel Dec 31 '13 at 10:12

score 2 · Answer 2 · edited Dec 31 '13 at 10:01

You should use weights properly, as in set weightSum to TableRow and layout_weight to each button.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="2"
    android:padding="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />
</TableRow>

    <TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="2"
    android:layout_margin="20dp" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:padding="5dp"
        android:layout_weight="1"
        android:text="Btn1" />
</TableRow>

<TableRow
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weightSum="2" >

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />

    <Button
        style="@style/CustomStyleButton2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_span="1"
        android:layout_weight="1"
        android:text="Btn1" />
</TableRow>

</TableLayout>

Also, if you want separation between all the buttons, set margin to each button instead of the table row.

....till some problem is there...not able to give some separation between two buttons(left-right button) — Vinit ..., Dec 31 '13 at 10:06

kathir · Answer 3 · 2013-12-31T10:12:07.160

Instead table layout , Use three Linear Layout as i specified below.

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

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ffffff" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/action_back"
        android:gravity="center"
        android:paddingLeft="20dp"
        android:padding="3dp" >

        <Button
            android:id="@+id/button1"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:background="@drawable/d" />

        <View
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:background="#ffffff" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="TextView"
            android:visibility="invisible" />

        <View
            android:layout_width="1dp"
            android:layout_height="30dp"
            android:layout_marginRight="5dp"
            android:background="#ffffff" />

        <Button
            android:id="@+id/button2"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:background="@drawable/b" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000066" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000066" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000066" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />
    </LinearLayout>

</LinearLayout>

After that android:drawableTop="@drawable/d" i put image to be drawn. by specifring that you can design your buttons with watever you want. And now you can align padding in for linearlayout.

Edited:

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





    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />


        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:drawableTop="@drawable/d"
            android:text="Button" />

        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#000066" />

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#000066" />

</LinearLayout>

Screen shot:http://s1288.photobucket.com/user/csevoice1/media/untitled_zps659b57d7.png.html

hope its wat you need.

There is no use to do that, `TableRow` extend `LinearLayout`. — Adinia, Dec 31 '13 at 09:58
@kathir...this code work ...but I think we achieve this by TableLayout. — Vinit ..., Dec 31 '13 at 10:08
yes correct. But than table row , its easy to design wat ever we want dude. — kathir, Dec 31 '13 at 10:13

Android: Allow margin/padding in TableLayout to give some separation between widgets

3 Answers3