how to make buttons align at the middle? android studio

Question

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

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?

you have pasted only the code for buttons.can post the full code ?. — Sabarinathan, Oct 01 '18 at 06:49
I wanted to put full code, but it keep saying I put mostly code... @Sabarinathan — Leon Zaii, Oct 01 '18 at 06:51
@LeonZaii check my answer. You don't need to use TableLayout to keep the views more align. :) — Umair, Oct 01 '18 at 06:58

score 1 · Accepted Answer · answered Oct 01 '18 at 06:57

1

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>

answered Oct 01 '18 at 06:57

Umair

6,366
15
42
50

Wow, like this also works. But the buttons look a bit small. – Leon Zaii Oct 01 '18 at 07:05
@LeonZaii small in terms of height ?. If that is the case use height as "match_parent" instead of "wrap_content" – Umair Oct 01 '18 at 07:07
Okay. Thanks for helping me @Umair – Leon Zaii Oct 01 '18 at 07:09
@LeonZaii happy to help. Happy coding :) – Umair Oct 01 '18 at 07:11
Can you help me to check the latest problem? @Umair – Leon Zaii Oct 01 '18 at 07:13
@LeonZaii sure what is the latest problem. ? – Umair Oct 01 '18 at 07:14
I have updated the latest problem above, how to make it stick together instead of separate with white space... XD – Leon Zaii Oct 01 '18 at 07:17
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181054/discussion-between-umair-and-leon-zaii). – Umair Oct 01 '18 at 07:19
friend, I changed the color already. But when the button is disable. the color still the same, where to change color ? @Umair – Leon Zaii Oct 02 '18 at 03:48
@LeonZaii when you disable the button then you can change the button color in code. put an if else condition and set the background through code in that if./else condition. – Umair Oct 02 '18 at 05:56
can I use if else at XML ? @Umair – Leon Zaii Oct 02 '18 at 05:59
@LeonZaii no you cannot :) – Umair Oct 02 '18 at 06:01
So where to put if and else to change the color haha? – Leon Zaii Oct 02 '18 at 06:28
write if(Db_Save.isEnabled()){how to type background change color? } – Leon Zaii Oct 02 '18 at 06:44
@LeonZaii take a look at this: https://stackoverflow.com/questions/13842447/android-set-button-background-programmatically – Umair Oct 02 '18 at 07:59

score 0 · Answer 2 · answered Oct 01 '18 at 06:50

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>

score 0 · Answer 3 · answered Oct 01 '18 at 06:51

0

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

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

answered Oct 01 '18 at 06:51

Yongho

21
5

score 0 · Answer 4 · answered Oct 01 '18 at 06:52

0

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.

answered Oct 01 '18 at 06:52

Chirag Savsani

6,020
4
38
74

score 0 · Answer 5 · answered Oct 01 '18 at 06:55

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>

score 0 · Answer 6 · answered Oct 01 '18 at 07:08

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>

how to make buttons align at the middle? android studio

6 Answers6