View not being to front on CoordinatorLayout

Question

I have a layout which works fine. One view is in front, another in the back. I'm using CoordinatorLayour because I'm using a FAB. The front view is a map and the back view is a view showing data when the FAB button is clicked.

For this I've seen those links on SO:

BringToFront doesn't work inside a coordinator layout

Position view below another view in CoordinatorLayout in android

Placing/Overlapping(z-index) a view above another view in android

Based on the answers I did a simple code. But the front view insists to be in front. Is there something I missing?:

    final RelativeLayout rev = findViewById(R.id.bg_detail);
        final RelativeLayout orange_map = findViewById(R.id.orange_map);
        floatingActionButtonEdit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                rev.bringToFront();
                rev.getParent().requestLayout();
                rev.invalidate();
            }
        });

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:fitsSystemWindows="true""
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">

<LinearLayout
    android:id="@+id/linearlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/toolbar_base"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/orange_map"
        android:background="@android:color/holo_orange_light">
        <!--fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" /-->
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/bg_detail">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.6"
                    android:orientation="vertical"
                    android:background="@android:color/holo_red_dark"
                    android:visibility="invisible"
                    android:id="@+id/dummy"/>
                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.4">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@android:color/white"
                        android:paddingBottom="@dimen/activity_vertical_margin"
                        android:paddingLeft="@dimen/activity_horizontal_margin"
                        android:paddingRight="@dimen/activity_horizontal_margin"
                        android:paddingTop="@dimen/activity_vertical_margin">
                        ...
                    </RelativeLayout>
                </ScrollView>
            </LinearLayout>
    </RelativeLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/floatingactionbutton_edit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:src="@drawable/ic_assignment_white_24dp"
    app:layout_anchor="@id/dummy"
    app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

What are you trying to achieve? What is the current behavior and what is the expected behavior? — azizbekian, Nov 22 '17 at 13:30
@azizbekian to bring background view which contains data to front. Just like that — learner, Nov 22 '17 at 13:33

score 0 · Answer 1 · answered Nov 22 '17 at 13:39

The Android documentation for View#bringToFront says:

Change the view's z order in the tree, so it's on top of other sibling views. This ordering change may affect layout, if the parent container uses an order-dependent layout scheme (e.g., LinearLayout). Prior to KITKAT this method should be followed by calls to requestLayout() and invalidate() on the view's parent to force the parent to redraw with the new child ordering.

Meaning, you wanna do:

rev.bringToFront();
rev.getParent().requestLayout();
rev.getParent().invalidate();

score 0 · Answer 2 · answered Nov 22 '17 at 16:56

Solved. I just need to substitute LinearLayout to FrameLayout. After that I changed visibility of inner RelativeLayout to invisible and when I click a button it shows the hidden layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include layout="@layout/toolbar_base"/>
    <FrameLayout
        android:id="@+id/linearlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/orange_map"
            android:background="@android:color/holo_orange_light">

            <fragment
                android:id="@+id/map"
                android:name="com.google.android.gms.maps.SupportMapFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.6"
                    android:orientation="vertical"
                    android:background="@android:color/holo_red_dark"
                    android:visibility="invisible"/>
                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.4"
                    android:background="@android:color/white">
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:paddingBottom="@dimen/activity_vertical_margin"
                        android:paddingLeft="@dimen/activity_horizontal_margin"
                        android:paddingRight="@dimen/activity_horizontal_margin"
                        android:paddingTop="@dimen/activity_vertical_margin">

                        ...
                    </RelativeLayout>
                </ScrollView>
            </LinearLayout>
        </RelativeLayout>
    </FrameLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
    android:id="@+id/floatingactionbutton_edit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:src="@drawable/ic_assignment_white_24dp"
    app:layout_anchor="@id/dummy"
    app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

score -1 · Answer 3 · answered Nov 22 '17 at 14:50

Problem with the RelativeLayout with id orange_map. It is covering the whole screen. If you don't want it to visible when you click on the FAB, try to hide it using

orange_map.setVisibility(View.GONE);

If you want it to visible, try to change its height to wrap_content using

orange_map.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT));

in this case RelativeLayout with id bg_detail shown up.

The map, which is currently orange for test purposes must always be in the background. Seems if I change to WRAP_CONTENT it shrinks. — learner, Nov 22 '17 at 15:02

View not being to front on CoordinatorLayout

3 Answers3