Android：相对布局

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.

Answer 1

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.

Answer 2

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>

Answer 3

Try this way... Change the margins and weights as you need. You can customize the ratio of each listview by changing the weights.

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

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

        <ExpandableListView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_dark" />

        <ExpandableListView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark" />

    </LinearLayout>

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


        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:background="@android:color/holo_red_light" />
    </LinearLayout>


</LinearLayout>