How to draw 3 button with equal vertical distance between them in android?

Question

I need to have equal vertical distance between each button from top to bottom irrespective of screen size. Here is the code for same :

Design should work on all types of screen sizes.

No static values to be used.

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>
</LinearLayout>

@FaizMir As you can see in layout image they are not equidistant from each other — Aman Saxena, Sep 19 '18 at 10:23
but the image you posted in that the button have same equidistance — Faiz Mir, Sep 19 '18 at 10:25
@FaizMir No, distance between top of the screen and button1 is not same as distance between button1 and button2 and same applies with button3 — Aman Saxena, Sep 19 '18 at 10:28
@AmanSaxena - have you tried ConstraintLayout ? https://stackoverflow.com/questions/37518745/evenly-spacing-views-using-constraintlayout — Krzysztof Kubicki, Sep 19 '18 at 10:28
That would make the button1 look smaller because you have navigation bar — Ivan, Sep 19 '18 at 10:28
@AmanSaxena check this https://medium.com/@nomanr/constraintlayout-chains-4f3b58ea15bb — AskNilesh, Sep 19 '18 at 10:31
@KrzysztofKubicki yes but with constraints layout static values in dp will be added and code becomes somewhat hardcoded — Aman Saxena, Sep 19 '18 at 10:32
@AmanSaxena - Maybe data binding will solve that for you? So that you can calculate the dimensions inside `ViewModel` and pass them to your view? I'm shooting blindly here :) sorry — Krzysztof Kubicki, Sep 19 '18 at 10:48

score 5 · Answer 1 · answered Sep 19 '18 at 10:27

5

One potential way is to use a ConstraintLayout instead of a LinearLayout. This will allow you to chain these 3 buttons together which would cause them to be equidistant.

See this article for more details on how to create chains of widgets

answered Sep 19 '18 at 10:27

StuStirling

15,601
23
93
150

score 4 · Accepted Answer · answered Sep 19 '18 at 10:31

You can achieve it with ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"
            app:layout_constraintBottom_toTopOf="@+id/btn2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            app:layout_constraintBottom_toTopOf="@+id/btn3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn1" />

        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/btn2" />
    </android.support.constraint.ConstraintLayout>

Eren Utku · Answer 3 · 2018-09-19T10:51:35.190

Easy and you do not need to use constraint layout. Just change button1's parent LinearLayout height to layout_height="wrap_content".

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">
<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

score 0 · Answer 4 · answered Sep 19 '18 at 12:19

ConstrainLayout is the best solution in this case. But if you still want to use linearLayout than you can try this.

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:text="Button 2" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:text="Button 3" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>

</LinearLayout>

How to draw 3 button with equal vertical distance between them in android?

4 Answers4