android how to align buttons?

Question

i have three buttons so some size, now i need to put the 4th button below the 2nd button and aligned center of the 4th button with the center of the 2nd button.

i am having a little trouble doing that, any ideas?

 

!---!---!---!
!   !   !   !
!---!---!---!
  !-------!
  !       !
  !-------!

i have been playing around with gravity and align center and stuff but still could not find what i need. This thing is not letting me post without a few more lines. I wonder if adding this line would make a difference?

Answer 1

Most of the other solutions posted rely on simply centering the fourth button in the screen, but don't address how to achieve this if the second button isn't centered.

ConstraintLayout is the perfect layout to use as the parent to accomplish this. The most important thing that ConstraintLayout lets you do is center one view based on another, regardless of the position of the "anchor" view.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/two"
        android:text="ONE"/>

    <Button
        android:id="@+id/two"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/one"
        app:layout_constraintRight_toLeftOf="@+id/three"
        android:text="TWO"/>

    <Button
        android:id="@+id/three"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/two"
        app:layout_constraintRight_toRightOf="parent"
        android:text="THREE"/>

    <Button
        android:id="@+id/four"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/two"
        app:layout_constraintLeft_toLeftOf="@+id/two"
        app:layout_constraintRight_toRightOf="@+id/two"
        android:text="FOUR"/>

</android.support.constraint.ConstraintLayout>

Answer 2

Please try this code, this will solve your problem. happy to help

 <LinearLayout 
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:orientation="vertical" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

<LinearLayout
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Button" />
</LinearLayout>

</LinearLayout>

Answer 3

Maybe you can try this:

Create two LinearLayouts with the same width. Put the first three buttons in the first LinearLayout and the 4th in the second one. Add android:gravity="center" to the second LinearLayout.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:id="@+id/layout1">

        <Button
            android:id="@+id/button1"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="B1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="B2" />
        <Button
            android:id="@+id/button3"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:text="B3" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="150dp"
        android:layout_height="wrap_content" 
        android:layout_below="@id/layout1"
        android:gravity="center"
        >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2" 
            android:layout_gravity="center"
            />

    </LinearLayout>

</RelativeLayout>

Answer 4

Can you try something like this

<LinearLayout
 android:weightSum="3">
 <Button
  android:layout_weight="1"/>
 <Button
  android:layout_weight="1"/>
 <Button
  android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
 android:weightSum="3">
 <Button
  android:layout_gravity="center_horizontal"
  android:layout_weight="2"/>
</LinearLayout>

Obviously fill in the requisite tag requirements

Answer 5

Here is the code

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

    <LinearLayout
        android:id="@+id/top_buttons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="First" />

        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Second" />

        <Button
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Third" />
    </LinearLayout>

    <Button
        android:id="@+id/button_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/top_buttons"
        android:layout_centerHorizontal="true"
        android:text="Forth" />
</RelativeLayout>