Android: Relative Layout

Question

Been using android for about 3 months and always hardcode the width and height of elements in a layout, I know this is considered bad to do so I want to get a better understand of how to use relative layouts to position elements. I have looked at the documentation of relative layout but from my understanding, I cannot get it to work the way I would like. I come asking if anyone can provide help (not just suggesting documentation I have read it) with how I need to use relative layout. This is so I can have something basic to refer to in future work to help with my positioning.

The following is 3 elements contained on a relative layout, 2 expandable lists and 1 listview:

The listviews are all over the place in this example I would like to know how to position them something like this:

this is the current xml, what would I need to add and change to gain this type of layout?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_food_bible"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#606E7F"
tools:context="com.example.mr_br.project.food_bible">

<ExpandableListView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/exlistVtype"
    android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"/>
<ExpandableListView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/exlistVpref"
    android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" android:layout_marginLeft="114dp"
    android:layout_marginStart="114dp"/>
 <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="244dp"
        android:id="@+id/listVresult" android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" android:layout_alignParentStart="true"/>
</RelativeLayout>

Thank you for any help.

See the answer I just posted. Accept it if you got what you wanted and if you need more clarification you can comment. Thanks — Swarnveer, May 14 '17 at 09:01
just a quick question when I add the changes you made, the layout does not really change, for example, the expandable list views are still stretched all the way to the bottom of the layout as seen in the first image even when I add the android:layout_below="@id/exlistVtype" to the list. Adding this line I thought the layout would resemble more of the second image. — George Brooks, May 14 '17 at 09:08
Changes aren't reflected because ExpandableListViews still holding the area with wrap_content. If you make its height hardcoded like 20dp or something then it will take limited space. The reason list view is not showing because it is not finding any space. — Swarnveer, May 14 '17 at 09:12
Linear Layout comes handy when you want to distribute screen evenly. For example if you want ExpandableViews and List View to take screen evenly then weightsum and layout_weight comes handy with Linear Layout — Swarnveer, May 14 '17 at 09:15
Thank you for the help and advice, my application is looking much better. — George Brooks, May 14 '17 at 09:17
And if you still want to use RelativeLayout with wrap_content in ExpandableListViews then you can add a Scroll view. — Swarnveer, May 14 '17 at 09:18

user3324792 · Answer 1 · 2017-05-14T10:21:54.390

With RelativeLayout, your main tools at hand are:

1)android:layout_above ="@+id/theIdOfWhatYouWantBelowCurrentView"

2)android:layout_alignBottom = "@+id/IDofWhatYouWantTouchingBottomOfThisView

3)android:layout_alignLeft = "@+id/IDofWhatYouWantTouchingLeftOfThisView"

4)android:layout_below = "@+id/theIdOfWhatYouWantAboveCurrentView"

ETC. ETC. Check this: https://www.tutorialspoint.com/android/android_relative_layout.htm

So when using RelativeLayout, you specify the position of all the views relative to each other using the syntax given above. That's basically all to it.

score 1 · Accepted Answer · answered May 14 '17 at 08:58

Just don't use drag and drop and type the code by yourself. Use Ctrl + space and the list with all the attributes will show. Now you just need to know what you what to do. In your example you need one view "android:layout_toRightOf" other so just type right and android studio will automatically show you the attribute that you want. In case of placing a view below another view you can use "android:layout_below". You can read all the attributes here

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_food_bible"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#606E7F"
    tools:context="com.example.mr_br.project.food_bible">

<ExpandableListView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/exlistVtype"
    android:layout_alignParentTop="true" 
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"/>
<ExpandableListView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/exlistVpref"
    android:layout_toRightOf="@id/exlistVtype"
    android:layout_alignParentTop="true" 
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" android:layout_marginLeft="114dp"
    android:layout_marginStart="114dp"/>
<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="244dp"
    android:layout_below="@id/exlistVtype"
    android:id="@+id/listVresult" android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true"/>
</RelativeLayout>

To maintain even good hierarchy you can put your 2 ExpandableListView to Linear Layout with horizontal orientation and use layout_below in the ListView and give the id of the linear layout in it. — Swarnveer, May 14 '17 at 09:04

Android: Relative Layout

2 Answers2