CODEWITHSUNDEEP
androiduser-interface
Leon Zaii
Leon Zaii

Reputation: 163

how to make buttons align at the middle? android studio

how do I make those buttons stay align at the middle? this is my interface.

enter image description here

here is my following code. I shouldn't use margin. is there any way to make it align at the middle?

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:gravity="center|bottom"
        android:orientation="horizontal">

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

            <TableRow>

                <Button
                    android:id="@+id/Db_New"
                    android:layout_width="250dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:text="NEW" />

                <Button

                    android:id="@+id/Db_Save"
                    android:layout_width="250dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:enabled="false"
                    android:text="SAVE" />
            </TableRow>

            <TableRow>

                <Button
                    android:id="@+id/Db_Print"
                    android:layout_width="250dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:text="PRINT" />

                <Button
                    android:id="@+id/Db_Back"
                    android:layout_width="250dp"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:text="BACK" />
            </TableRow>
        </TableLayout>
    </LinearLayout>

this is already staying in bottom. Only What I need it make it to look better. please help. Thanks in advance

UPDATE

How to make the white space gone?

enter image description here

Upvotes: 0

Views: 503

Answers (6)

Parul
Parul

Reputation: 397

Try this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center|bottom"
    android:orientation="vertical">

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

        <TableRow
            >

            <Button
                android:id="@+id/Db_New"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:text="NEW" 
                android:layout_weight="0.5"/>

            <Button

                android:id="@+id/Db_Save"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:enabled="false"
                android:text="SAVE"
                android:layout_weight="0.5"/>
        </TableRow>

        <TableRow>

            <Button
                android:id="@+id/Db_Print"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:text="PRINT"
                android:layout_weight="0.5"/>

            <Button
                android:id="@+id/Db_Back"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:text="BACK"
                android:layout_weight="0.5"/>
        </TableRow>
    </TableLayout>
</LinearLayout>

Upvotes: 0

Umair
Umair

Reputation: 6426

You need to use either RelativeLayout or LinearLayout. I have used LinearLayout. Use this code to align your buttons.

    <LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center|bottom"
    android:orientation="horizontal"
    android:baselineAligned="false">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:gravity="center"
        android:orientation="vertical">

        <Button
            android:id="@+id/Db_New"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="NEW" />

        <Button
            android:id="@+id/Db_Print"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="PRINT" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:gravity="center"
        android:orientation="vertical">

        <Button

            android:id="@+id/Db_Save"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:enabled="false"
            android:text="SAVE" />

        <Button
            android:id="@+id/Db_Back"
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="BACK" />

    </LinearLayout>
</LinearLayout>

Upvotes: 1

Mahdi-Malv
Mahdi-Malv

Reputation: 19278

As we know TableRow is a child of LinearLayout, So it is possible to do what you want using LinearLayout attribute android:layout_weight so we should have sth like:

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableRow
        android:weightSum="2">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="new"/>


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="save"/>
    </TableRow>

    <TableRow
        android:weightSum="2">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="print"/>


        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="back"/>
    </TableRow>

Upvotes: 0

Chirag Savsani
Chirag Savsani

Reputation: 6142

Just add replace android:layout_width="250dp" button code with 

android:layout_width="0dp"
android:layout_weight="1"

It will center all the Button with fixed width.

Upvotes: 0

Yongho
Yongho

Reputation: 21

I recommend you to use RelativeLayout instead of TableLayout. Like this.

<RelativeLayout>
  <newButton /> -> gravity:center and width:match_parent
  <saveButton /> -> alignParentsRight:true
</RelativeLayout>

Upvotes: 0

leonardkraemer
leonardkraemer

Reputation: 6813

You can use android:stretchColumns="*" and set your buttons width to android:layout_width="wrap_content"

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*">

    <TableRow>

        <Button
            android:id="@+id/Db_New"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="NEW" />

        <Button

            android:id="@+id/Db_Save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:enabled="false"
            android:text="SAVE" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/Db_Print"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="PRINT" />

        <Button
            android:id="@+id/Db_Back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:text="BACK" />
    </TableRow>
</TableLayout>

Upvotes: 0

Related Questions