How to place Button in the center of the screen in a LinearLayout?

Question

Here's my xml using a LinearLayout. Both the Toolbar and the Button are at the top of the screen. However I want the Button centrally horizontal and centrally vertical. Also the Button is floated to the left and not in the center.

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorVeryDark"
        android:elevation="4dp"

        android:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

    <Button
        android:id="@+id/button2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="text"
        android:textSize="22dp"
        android:layout_gravity="center_vertical"
        android:background="@color/colorPrimaryDark"
        />

</LinearLayout>

How would I do this?

Use layout_gravity = "center" property or you can use layout_gravity:"center_vertical|center_horizontal" — emaleavil, Apr 30 '17 at 10:36

score 3 · Accepted Answer · answered Apr 30 '17 at 11:57

Try this: use a RelativeLayout and use android:layout_centerInParent="true" for the Button

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar" />


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@color/colorPrimaryDark"
            android:text="text"
            android:textSize="22dp" />

    </RelativeLayout>

</LinearLayout>

Output:

score 0 · Answer 2 · answered Apr 30 '17 at 10:12

0

Unfortunately LinearLayouts are not the best for this. FrameLayout, RelativeLayout or ConstraintLayout will give you the flexibility to do what you want.

answered Apr 30 '17 at 10:12

Ivan Wooll

4,145
3
23
34

score 0 · Answer 3 · answered Apr 30 '17 at 10:14

try to use gravity

<Button
            android:id="@+id/okbutton"
            android:layout_width="wrap_content"
            android:layout_height="300dp"
            android:text="text"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:textSize="50sp" />

score 0 · Answer 4 · answered Apr 30 '17 at 10:22

0

Use a RelativeLayout then you add the code:

android:gravity="center"
android:layout_gravity="center_horizontal"

in your Button XML.

In alternative, you can use the "design" tool of AndroidStudio for layouts: you can add a button and then drag wherever you want in the preview.

However, there are tons of post like this: next time try to search better :D

answered Apr 30 '17 at 10:22

david.mar22

41
6

Just tried that, the button is now in the top left corner (behind the Toolbar). Any idea? – Zorgan Apr 30 '17 at 11:04
Can i see your XML? Just to check if everything is all right. – david.mar22 May 01 '17 at 14:58

score 0 · Answer 5 · edited Aug 01 '19 at 17:01

0

Add these two lines in you Button

android:gravity="center"
android:layout_gravity="center_horizontal"

refer this image for proper understanding of use of gravity

edited Aug 01 '19 at 17:01

Catarina Ferreira

1,824
5
17
26

answered Apr 30 '17 at 10:32

Puneet Verma

1,373
2
19
23

score 0 · Answer 6 · edited May 23 '17 at 12:34

0

Just use this line of code in your button xml design-

android:gravity="center"

For more ideas you can check this link- Center a button in a Linear layout

edited May 23 '17 at 12:34

Community

1
1

answered Apr 30 '17 at 10:34

Ana

174
2
8

How to place Button in the center of the screen in a LinearLayout?

6 Answers6