Button not getting proper width android

Question

I have a TableLayout with rows containing Button. I want all the buttons to be of the same width but they act like their width is match_parent when they are rendered even though I've given them a specific width. They are not handled anywhere in Java, so the problem should lie in the XML only.

Here's my XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mridulahuja.kudamm.activities.ComponentDetailsActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/light_green_background"
        android:scaleType="fitXY"
        android:alpha="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp"
        android:background="@null"
        android:scrollbars="vertical"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.mridulahuja.kudamm.tools.ExpandableTextView
                    android:id="@+id/txtComponentInfo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="5dp"
                    android:text="component info"
                    android:textColor="#000000"
                    android:textSize="20sp" />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

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

            </TableRow>


            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center">

                <Button
                    android:id="@+id/btnDataAtAGlance"
                    android:layout_height="wrap_content"
                    android:layout_width="250dp"
                    android:gravity="center"
                    android:textSize="18sp"
                    android:textColor="#ffffff"
                    android:background="@drawable/green_button_style"
                    android:text="Data at a glance"
                    />

            </TableRow>


            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

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

            </TableRow>


            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center">

                <Button
                    android:id="@+id/btnDimensionsAtAGlance"
                    android:layout_height="wrap_content"
                    android:layout_width="250dp"
                    android:gravity="center"
                    android:layout_gravity="center"
                    android:padding="10sp"
                    android:textSize="18sp"
                    android:textColor="#ffffff"
                    android:background="@drawable/green_button_style"
                    android:text="Dimensions at a glance"
                    />

            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

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

            </TableRow>


            <TableRow
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center">

                <Button
                    android:id="@+id/btnDownloadPdfCatalogue"
                    android:layout_height="wrap_content"
                    android:layout_width="250dp"
                    android:gravity="center"
                    android:layout_gravity="center"
                    android:padding="10sp"
                    android:textSize="18sp"
                    android:textColor="#ffffff"
                    android:background="@drawable/green_button_style"
                    android:text="PDF Catalogue"
                    />

            </TableRow>

        </TableLayout>

    </ScrollView>

</RelativeLayout>

This is the view rendered on Android Studio:

And this is the view rendered on mobile: (see the first button => this is happening will all buttons when I make their XML similar)

Why is this happening?

the `dp` value change from device to another, you have to make multiple dimens.xml files for each density . — , Oct 02 '17 at 18:51
Is it necessary using table structure? You may have to use another view elements, like Constraints / RelativeLayout. These are easier to manipulate your widgets. — Franklin Hirata, Oct 02 '17 at 18:54
@Ibrahim this is happening even I give it a width of `50dp` which is very less — mrid, Oct 02 '17 at 18:55

score 1 · Answer 1 · answered Oct 02 '17 at 18:55

1

dp will vary from device to device. As a workaround, what you can do is, set the width of all the buttons to match_parent and add marginLeft and marginRight on each. Or Use multiple dimens.xml files for various densities, as suggested by Ibrahim in the comment.

answered Oct 02 '17 at 18:55

Suhayl SH

1,213
1
11
16

margin also use dp – Davi Oct 08 '17 at 19:22

Davi · Answer 2 · 2017-10-03T01:57:24.143

Remove the android:layout_gravity="center" from each button, you have already specified android:gravity="center" for the TableRow (which is doing the same thing).

By android:layout_gravity="center" you are saying the button should be centered inside its parent, and by android:gravity="center" you are saying the child of this element(which is the button) should be centered inside it. Mr. Android was confused, so it changed the width you set to wrap_content and centered the button.

Note: Your first button doesn't specify layout_gravity and that is why it is displayed as expected

Button not getting proper width android

2 Answers2