Home > Enterprise >  Center and stretch button in TableRow
Center and stretch button in TableRow

Time:10-26

I have this code

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

<TableRow>
    <TextView
            android:layout_weight="0.5"
            android:text="Login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginStart="50dp"/>

    <EditText
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="25dp"
            android:layout_marginEnd="25dp"
    />
</TableRow>

<TableRow>
    <TextView
            android:layout_weight="0.5"
            android:text="Email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginStart="50dp"
    />

    <EditText
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="25dp"
            android:layout_marginEnd="25dp"
    />
</TableRow>

<TableRow>
    <Button
            android:text="Send"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
    />
</TableRow>

And it looks like this image1

I need to center this button and stretch to the size of other table rows, i.e. to the size of the authorization form. For example, the screenshot below

image2

I tried with android:stretchColumns="1" but it doesn't work

CodePudding user response:

I took a look at your code and was able to create what you are looking for in the following manner

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*"
android:gravity="center"
tools:context=".MainActivity">
<TableRow>
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginLeft="50dp"
        android:layout_weight="0.3"
        android:text="Login" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="25dp"
        android:layout_marginRight="25dp"
        android:layout_weight="1" />
</TableRow>

<TableRow>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_weight="0.3"
        android:text="Email" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="25dp"
        android:layout_marginRight="25dp"
        android:layout_weight="1" />
</TableRow>

<TableRow>
    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="50dp"
        android:layout_marginEnd="25dp"
        android:text="Send"
        android:layout_weight="1"/>
</TableRow>

As the documentation shows the stretchColumns attribute is "The zero-based index of the columns to stretch". By giving it the value * we say we want all columns to stretch evenly. And by playing with the layout weight we can change the size of the different views. Hope this helps you. IMO you should look at using Relative or Linear layouts for relatively simple UI's like these, or perhaps even the very forgiving Constraint layout.

  • Related