CODEWITHSUNDEEP
androidlayoutandroid-relativelayout
suku
suku

Reputation: 10937

Layout_Below is not getting executed properly in relativelayout

I have the following xml code. The imagebutton is not getting aligned below the textView with a margin of 5dp. I think I am making a mistake in understanding the various layout parameters. The relativelayout is a childview of a linearlayout having few other views.

        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="40">

        <com.github.lzyzsd.circleprogress.DonutProgress
            android:id="@+id/amain_dp"
            android:layout_width="240dp"
            android:layout_height="240dp"
            android:layout_centerInParent="true" />

        <TextView
            android:id="@+id/amain_tv_currentsteps"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="25sp" />

        <ImageButton
            android:id="@+id/amain_ib_whatsapp"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="5dp"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/amain_tv_currentsteps"
            android:background="@drawable/whatsapp_icon"/>

    </RelativeLayout>

This is the output I am getting:

enter image description here

EDIT: The code works properly if layout_weight parameter is removed and fixed layout_height parameter is provided. But would like to understand why the above code fails because of the layout_weight

EDIT: Complete xml code:

<ScrollView 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="in.jiyofit.basic_app.MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/amain_tv_target"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="20dp"
        android:layout_weight="10" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="40">

        <com.github.lzyzsd.circleprogress.DonutProgress
            android:id="@+id/amain_dp"
            android:layout_width="240dp"
            android:layout_height="240dp"
            android:layout_centerInParent="true" />

        <TextView
            android:id="@+id/amain_tv_currentsteps"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="25sp" />

        <ImageButton
            android:id="@+id/amain_ib_whatsapp"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginTop="5dp"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/amain_tv_currentsteps"
            android:background="@drawable/whatsapp_icon"/>

    </RelativeLayout>

    <FrameLayout
        android:id="@+id/amain_fl_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="30"
        android:layout_marginTop="20dp"/>

</LinearLayout>

Upvotes: 2

Views: 62

Answers (3)

Shaishav
Shaishav

Reputation: 5312

Given that your layout has following scheme:

<ScrollView>
    <LinearLayout>
        <TextView/>
        <RelativeLayout/>
        <FrameLayout/>
    </LinearLayout>
</ScrollView>

In the above hierarchy, all LinearLayout children have a layout weight property set which basically ask the parent to provide (layout_weight/weightSum) * parentHeight() space to it within the parent and the LinearLayout itself has a lauout_height set to wrap_content which basically asks the children to tell their heights so LinearLayout itself can scale accordingly. This is a circular dependency and hence the layout tool is having trouble figuring out the position.

In this scenario you have two option:

1 - Remove the ScrollView and set Linearlayout's height to match_parent. Every child element of the layout will stretch accordingly to take up screen space properly. Your layout will look like this:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="80">

    <TextView
        android:id="@+id/amain_tv_target"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="20dp"
        android:layout_weight="10"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="40">

        <com.github.lzyzsd.circleprogress.DonutProgress
            android:id="@+id/amain_dp"
            android:layout_width="240dp"
            android:layout_height="240dp"
            android:layout_centerInParent="true"/>

        <TextView
            android:id="@+id/amain_tv_currentsteps"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="25sp"/>

        <ImageButton
            android:id="@+id/amain_ib_whatsapp"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_below="@id/amain_tv_currentsteps"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"/>

    </RelativeLayout>

    <FrameLayout
        android:id="@+id/amain_fl_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:layout_weight="30"/>

</LinearLayout>

2 - Since you have a ScrollView in place, you can provide absolute height to each child of LinearLayout and let the LinearLayout height be wrap_content. The ScrollView will adequately scale your layout accordingly for different screens. Your layout may look something like this:

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="80">

        <TextView
            android:id="@+id/amain_tv_target"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginTop="20dp"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="400dp">

            <com.github.lzyzsd.circleprogress.DonutProgress
                android:id="@+id/amain_dp"
                android:layout_width="240dp"
                android:layout_height="240dp"
                android:layout_centerInParent="true"/>

            <TextView
                android:id="@+id/amain_tv_currentsteps"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:textSize="25sp"/>

            <ImageButton
                android:id="@+id/amain_ib_whatsapp"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_below="@id/amain_tv_currentsteps"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"/>

        </RelativeLayout>

        <FrameLayout
            android:id="@+id/amain_fl_container"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="20dp"/>

    </LinearLayout>

</ScrollView>

Just as a rule of thumb, make sure that the height/width of your LinearLayout if determinable before you supply layout_weight property to its children. Hope this helps.

Upvotes: 1

Charuka Silva
Charuka Silva

Reputation: 13153

in you top RelativeLayout give a size to it 0dp makes the issue because it (that rel has 0 height and ) your image view goes below it.

android:layout_height="match_parent"

Upvotes: 0

Eliahu Horwitz
Eliahu Horwitz

Reputation: 499

You need to use + like this:

 android:layout_below="@+id/amain_tv_currentsteps"

Upvotes: 0

Related Questions