What is the best way to create this Layout in Android?

Question

I have been struggling for hours to get this layout to work.

Here is my code:

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

    <fragment
        android:name="com.apps.foo.CleanPreviewFragment"
        android:id="@+id/clean_preview_fragment"
        android:layout_weight="0.5"
        android:layout_width="0dp"
        android:layout_height="match_parent">
    </fragment>

    <fragment
        android:name="com.apps.foo.pointop.DirtyPreviewFragment"
        android:id="@+id/filters_fragment"
        android:layout_weight="0.5"
        android:layout_width="0dp"
        android:layout_height="match_parent">
    </fragment>

    <fragment
        android:name="com.apps.foo.pointop.ProcessedPreviewFragment"
        android:id="@+id/processed_preview_fragment"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="match_parent">
    </fragment>

</LinearLayout>

Every fragment is a simple RelativeLayout (all have the same view):

<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.apps.<whatever the fragment name is>">
</RelativeLayout>

Now I want make it work like this:

1) No nested layout_weight
2) No Nesting at all (for example nest the 2 first fragments etc etc)
3) Not using code to do it programmatically after the view has rendered.

In my opinion the cleanest most readable way of doing this, would be to set the orientation of fragment 1 and fragment 2 to horizontal, and fragment 3 to vertical, but it does not work.

I've also checked this answer, but the guy, uses a layout_weight with a RelativeLayout. RelativeLayouts do ignore weights this will not work.

Any help will be appreciated?

nhaarman · Accepted Answer · 2015-07-23T20:39:17.700

2

You can add a dummy view of 0dp width and height in the center of the layout using a RelativeLayout, and position your Fragments accordingly:

<RelativeLayout 
  ... >

  <View
    android:id="@+id/center_anchor"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_centerInParent="true" />

  <fragment
    android:layout_toLeftOf="@id/center_anchor"
    android:layout_above="@id/center_anchor"
    ... />

  <fragment
    android:toLeftOf="@id/center_anchor"
    android:layout_below="@id/center_anchor"
    ... />

  <fragment
    android:toRightOf="@id/center_anchor"
    ... />

</RelativeLayout>

edited Jul 23 '15 at 20:39

answered Jul 23 '15 at 20:34

nhaarman

98,571
55
246
278

yes but like I mentioned it uses "android:layout_weight="1"" in a relative_layout. Isn't that against the rules? RelativeLayouts ignore weights right? So why is it even working for that guy? – Trt Trt Jul 23 '15 at 20:37
2

The `RelativeLayout` has a `LinearLayout` as a parent, so `layout_weight` will work. It's the parent view that acts upon the weight, and `LinearLayout` does support it. – nhaarman Jul 23 '15 at 20:39
Please have a look here, http://stackoverflow.com/a/14009266/990194 . Also another question, does it matter what my fragments layouts are? – Trt Trt Jul 23 '15 at 20:42
1

`RelativeLayout` does not pay attention to `android:layout_weight` attributes _of its children_. `LinearLayout` does, and in this case `RelativeLayout` is a child of `LinearLayout`. – nhaarman Jul 23 '15 at 20:51
2

@TrtTrt, some attr are applied to the view, others are applied to his parent. In case, putting layout_weight will only work if its parent is a LinearLayout, otherwise it won't work. LinearLayout will see if its children have a weight attr to make any size calculations, you can safely apply weight attr to any kind of view, if its view is inside a LinearLayout than you are using it correctly. – Murillo Ferreira Jul 23 '15 at 20:51

What is the best way to create this Layout in Android?

1 Answers1