CODEWITHSUNDEEP
androidandroid-layout
Mick Byrne
Mick Byrne

Reputation: 14484

Right-hand radius edge of button cut off in TableView

I have a button with a custom background drawable which has round corners. Looks fine normally, but when it appears in a TableLayout the right hand edge of the button is getting cut off.

Here's a relevant snippet of the layout XML which places the button in the table layout:

    <TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/rounded_box_nopadding" android:stretchColumns="1" android:shrinkColumns="1">
        <TableRow android:padding="10dp">
            <TextView android:text="@string/sign_in_email_label" android:textStyle="bold" android:textColor="#000000" android:paddingRight="10dp" />
            <TextView android:text="@string/sign_in_email_hint" />
        </TableRow>
        <TableRow android:layout_height="1dp">
            <View android:layout_width="fill_parent" android:layout_height="1dp" android:background="#dbe3e4" android:layout_span="2" />
        </TableRow>
        <TableRow android:padding="10dp">
            <TextView android:text="@string/sign_in_password_label" android:textStyle="bold" android:textColor="#000000" android:paddingRight="10dp" />
            <TextView android:text="@string/sign_in_password_hint" />
        </TableRow>
        <TableRow android:layout_height="1dp">
            <View android:layout_width="fill_parent" android:layout_height="1dp" android:background="#dbe3e4" android:layout_span="2" />
        </TableRow>
        <TableRow android:padding="10dp">
            <Button android:id="@+id/my_scoopons_sign_in_button" android:layout_height="wrap_content" android:text="@string/sign_in_button_label" android:textColor="@color/button_text_states" 
                android:textSize="20sp" android:textStyle="bold" android:shadowColor="#671610" android:shadowDy="-2" android:shadowRadius="1" android:background="@drawable/button_states"
                android:layout_span="2"/>
            </TableRow>
    </TableLayout>

And here's a screen shot illustrating the problem.

Android screenshot http://www.petrocky.com/images/device.png

Upvotes: 0

Views: 1379

Answers (3)

Mick Byrne
Mick Byrne

Reputation: 14484

I have managed to fix this by removing the padding off the <TableRow> element and added margin to the <Button>; i.e.:

<TableRow>
    <Button android:id="@+id/sign_in_button" android:layout_height="wrap_content" android:text="@string/sign_in_button_label"  
        android:background="@drawable/button_states"
        android:layout_span="2" android:layout_margin="10dp" />
</TableRow>

Because the button is inside the table, it has a width of fill_parent. The width of the parent cell is calculated to include the padding, but when rendered it appears too long. By using margin on the button, the problem is solved.

Upvotes: 1

Sunil Kumar Sahoo
Sunil Kumar Sahoo

Reputation: 53647

The issue was in button layout_span and also not having width of button

You have to set android:layout_height="wrap_content" and i think delete android:layout_span="2" I have modified your code.

hi Mick,

Try with the following code.

    <TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/rounded_box_nopadding" android:stretchColumns="1" android:shrinkColumns="1">
    <TableRow android:padding="10dp">
        <TextView android:text="@string/sign_in_email_label" android:textStyle="bold" android:textColor="#000000" android:paddingRight="10dp" />
        <TextView android:text="@string/sign_in_email_hint" />
    </TableRow>
    <TableRow android:layout_height="1dp">
        <View android:layout_width="fill_parent" android:layout_height="1dp" android:background="#dbe3e4" android:layout_span="2" />
    </TableRow>
    <TableRow android:padding="10dp">
        <TextView android:text="@string/sign_in_password_label" android:textStyle="bold" android:textColor="#000000" android:paddingRight="10dp" />
        <TextView android:text="@string/sign_in_password_hint" />
    </TableRow>
    <TableRow android:layout_height="1dp">
        <View android:layout_width="fill_parent" android:layout_height="1dp" android:background="#dbe3e4" android:layout_span="2" />
    </TableRow>
    <TableRow android:padding="10dp">
        <Button android:id="@+id/my_scoopons_sign_in_button" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="@string/sign_in_button_label" android:textColor="@color/button_text_states" 
            android:textSize="20sp" android:textStyle="bold" android:shadowColor="#671610" android:shadowDy="-2" android:shadowRadius="1" android:background="@drawable/button_states"
            />
        </TableRow>
</TableLayout>

Thanks Deepak

Upvotes: 0

Anup Rojekar
Anup Rojekar

Reputation: 1103

The android:layout_width is missing from that Button code. Might be the cause.

Upvotes: 0

Related Questions