Cant vertically center buttons

Question

I have 2 buttons and a TextView inside of a horizontal linear layout. All three views have weights. I have been unsuccessful in centering the two buttons vertically.

I have tried:

android:layout_gravity="center"

android:gravity="center"

Linear Layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#707070"
    >

    <Button
        android:id="@+id/ratioLBButton"
        android:text="LB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:onClick="ratioLBFunction"
        />

    <Button
        android:id="@+id/ratioKGButton"
        android:text="KG"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:onClick="ratioKGFunction"
        />

    <TextView
        android:text="Hello World"
        android:textSize="18sp"
        android:gravity="center"
        android:id="@+id/ratioOutput"
        android:background="#707070"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="5"
        />

</LinearLayout>

This is the parent Layouts that encompass the above views.

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
android:background="#989898"
>

This is a screenshot from my tablet. It is the exact same on my android phone.

Your code is showing the buttons next to each other. Are you trying to get them on top of each other? While keeping the horizontal bar? — nbroeking, Sep 27 '15 at 18:13
next to each other horizontally but centered in the linear layout vertically — th3ramr0d, Sep 27 '15 at 18:30
I put your code into android studio and the output looks just like your desired output. Can you give a little more information about what you are seeing — nbroeking, Sep 27 '15 at 19:33
it looks fine in the preview window. when i run it on my phone and tablet it isnt centered. — th3ramr0d, Sep 27 '15 at 19:37

score 1 · Answer 1 · answered Sep 27 '15 at 20:05

If you are using weight then you need to add android:weightSum="10" to the parent, that will help the parent to know what percentage of space it should assign to each each. the weight sum could be value. also all the child of the parent should. use android:layout_centerInParent="true" also make all child android:layout_width="fill_parent".

something like this:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="7">


<Button
    android:id="@+id/ratioLBButton"
    android:text="LB"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:onClick="ratioLBFunction"
    />

<Button
    android:id="@+id/ratioKGButton"
    android:text="KG"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:onClick="ratioKGFunction"
    />

<TextView
    android:text="Hello World"
    android:textSize="18sp"
    android:gravity="center"
    android:id="@+id/ratioOutput"
    android:background="#707070"
     android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="5"
    />

the sum of each child weight must be equal to the weightSum of the parent. Note: the smaller values will occupy more space

I added a weight sum, in this case 7, to the linear layout and nothing. I also used android:layout_centerInParent="true" and still nothing. The items are spaced horizontally just the way I want them. I need them to be vertically centered in the linear layout. — th3ramr0d, Sep 27 '15 at 20:35

score 0 · Answer 2 · answered Sep 27 '15 at 19:33

0

This may be a silly answer. But did you add xmlns:android="http://schemas.android.com/apk/res/android" in your <LinearLayout .....> starting tag? If not please add it. your xml works fine and I could not reproduce the issue.

answered Sep 27 '15 at 19:33

Joel Min

3,387
3
19
38

I do have that tag. This linearlayout is nested in another one. – th3ramr0d Sep 27 '15 at 19:38
can u also post the parent layout? it does affect how the child layout reacts – Joel Min Sep 27 '15 at 19:40
I added the parent layouts – th3ramr0d Sep 27 '15 at 19:46

Joaquim Ley · Answer 3 · 2015-09-27T20:21:01.357

I think your answer lies in the android:layout_weight and android:weightSumattributes. Both parent and child layouts. Meaning, if you have 3 views with a layout_weight="1" inside, it should be android:weightSum="3" on your parent as it shows:

Notice line:6

<?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="wrap_content"
    android:weightSum="3"
    android:background="#707070"
    android:orientation="horizontal">

    <Button
        android:id="@+id/ratioLBButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:onClick="ratioLBFunction"
        android:text="LB" />

    <Button
        android:id="@+id/ratioKGButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:onClick="ratioKGFunction"
        android:text="KG" />

    <TextView
        android:id="@+id/ratioOutput"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:background="#707070"
        android:gravity="center"
        android:text="Hello World"
        android:textSize="18sp" />

</LinearLayout>

My preview:

My preview shows the same thing, where the buttons are centered. I said that above. That's why I posted a screen shot of my device since that is not centered. And adding android:layout_weight="3" to my layout did nothing =( — th3ramr0d, Sep 27 '15 at 20:33
Well then why not use a RelativeLayout and center_vertical to parent? Have you tried that? — Joaquim Ley, Sep 27 '15 at 20:44
Rewriting my layout is a lot of work for something this small. Plus I'm still somewhat a beginner. I don't fully understand Relative Layouts. I like Linear Layouts because I know how to use them to make grids which is how I like my UI. — th3ramr0d, Sep 27 '15 at 20:56

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

Positive: I figured it out

Negative: I don't wanna do the fix

Is there a way to completely eliminate padding in a LinearLayout containing buttons?

Basically buttons have extra padding at the bottom. It sucks being somewhat OCD. I just want it to line up =(

edited May 23 '17 at 11:58

Community

1
1

answered Sep 27 '15 at 20:54

th3ramr0d

484
1
7
23

Cant vertically center buttons

4 Answers4