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:

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

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>

Answer 1

just add these lines to your style

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