How can i make the three views always be in one line and also always have the same amount of space between them?

Question

my goal is to have the three views in one line no matter how big the display of the device is. Also I want those three views to have the same amount of space between them, so that it will look symmetrical. Are these two things possible and if so, how? Thank you in advance!

 <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"

    tools:context="com.juliandrach.eatfit.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">

        <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/profilbild"
            android:layout_margin="10dp"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Ernährungspläne"
            android:textAllCaps="true"
            android:textSize="21sp"
            android:layout_marginTop="15dp"
            android:textColor="@android:color/black"
            android:layout_weight="2"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Shop"
            android:textAllCaps="true"
            android:textSize="25sp"
            android:textColor="@android:color/black"
            android:layout_weight="1"
            android:layout_marginTop="15dp"/>
    </LinearLayout>
    (...)

use weightSum in linearlayout and add layout_weight to your three views . To know more check this link http://stackoverflow.com/questions/7452741/what-is-androidweightsum-in-android-and-how-does-it-work — YLS, Oct 26 '16 at 11:45

score 0 · Answer 1 · answered Oct 26 '16 at 11:47

Hi try to this code hope this can help you..

<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"
tools:context="com.juliandrach.eatfit.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:weightSum="1">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_margin="10dp"
        android:layout_weight=".33"
        android:background="@drawable/profilbild" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="15dp"
        android:layout_weight=".33"
        android:text="Ernährungspläne"
        android:textAllCaps="true"
        android:textColor="@android:color/black"
        android:textSize="21sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="15dp"
        android:layout_weight=".33"
        android:text="Shop"
        android:textAllCaps="true"
        android:textColor="@android:color/black"
        android:textSize="25sp" />
</LinearLayout></RelativeLayout>

Thank you! The problem with that code is though, that the views become unproportional. For example the imageView is stretched and the first textView is shortened and written in two lines :/ — Julian, Oct 26 '16 at 11:51

score 0 · Answer 2 · answered Oct 26 '16 at 11:54

you have to use wightsum as 3

each inner view as LayoutWidth as 1 will work for you

<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"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3"
        android:orientation="horizontal"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            android:layout_weight="1"
            android:layout_margin="10dp"
            />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="abc"
            android:textAllCaps="true"
            android:textSize="21sp"
            android:layout_marginTop="15dp"
            android:textColor="@android:color/black"
            android:layout_weight="1"
            android:id="@+id/textView" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="abc"
            android:textAllCaps="true"
            android:textSize="21sp"
            android:layout_marginTop="15dp"
            android:textColor="@android:color/black"
            android:layout_weight="1"
            android:id="@+id/textView1" />
    </LinearLayout>

</RelativeLayout>

please let me know if it not work for you.

Hey, thank you! The problem with that code is, that the views are unpropotional again. Is it possible that the imageView stays proportional (like 48/48) and the two textViews take as much place as they need from the rest without going to the second line? When I use your code and put in "Ernährungspläne" in the first textView, then it will use two lines. — Julian, Oct 26 '16 at 12:16
they has to take it because you need constant space between your 3 elements. you can have ellipses and make singleLine = true — Jitesh Mohite, Oct 26 '16 at 13:11

nzala · Accepted Answer · 2016-10-26T12:24:44.823

Final Check out

<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"

    tools:context="com.juliandrach.eatfit.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="3"
    android:orientation="horizontal"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@mipmap/ic_launcher"
        android:layout_weight="0"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ernährungspläne"
        android:textAllCaps="true"
        android:textSize="21sp"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:textColor="@android:color/black"
        android:layout_weight="1"
        android:id="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Shop"
        android:textAllCaps="true"
        android:textSize="21sp"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:textColor="@android:color/black"
        android:layout_weight="1"
        android:id="@+id/textView1" />

</LinearLayout>
</RelativeLayout>

shifted left

Thank you, that one is looking good! Is it possible to shift everything a little to the right, so that there isnt too much space left on the side while still having the same amount of space between the views? — Julian, Oct 26 '16 at 12:18

How can i make the three views always be in one line and also always have the same amount of space between them?

3 Answers3