Added fragment shows under elevated views in fragment below?

Question

So I was having an issue adding my fragment for dialog to my activity. The fragment is a regular fragment added using

supportFragmentManager.beginTransaction().add(...).commit()

The problem is the fragment is added to the activity, but the activity's toolbar and floating action button will show on top of the fragment. I know this is because those two views are elevated to 4dp and it can be solved by changing the fragment elevation to < 4dp. My question is, is there a better way to do this? IS there a way to add a fragment on top of an activity? Or is this the way it has to be done?

Activity

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

<TextView
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:elevation="4dp"
    android:gravity="center"
    android:text="@string/app_name"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
    app:layout_constraintTop_toTopOf="parent" />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"/>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_margin="24dp"/>

Dialog Fragment

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scrim"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="24dp"
android:background="#40000000">

<FrameLayout
    android:elevation="4dp"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:layout_height="250dp"/>

score 0 · Answer 1 · answered Jul 25 '18 at 21:13

0

When the activity started, try using visibility to hide the views, its the simplest way to do it, floatingActionButton.setVisibility(View.GONE);

answered Jul 25 '18 at 21:13

Ali A. Ali

1
1

score 0 · Answer 2 · answered Jul 25 '18 at 21:29

In order to hide the floatingActionButton, add the following in your fragment onCreateView:

//Global Variable
private View view;

@Override
public View onCreateView(@NonNull LayoutInflater layoutInflater, ViewGroup container, Bundle savedInstanceState) {
if (view != null) {
        ViewGroup group = (ViewGroup) view.getParent();
        if (group != null) {
            group.removeView(view);
        }
    } else {
floatingActionButton = view.findViewById(R.id. floatingActionButton);
floatingActionButton.hide();

...

return view;
}

in your xml:

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

//If this is your toolbar, why are you instantiating a textview and not a toolbar???
<TextView
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:elevation="4dp"
    android:gravity="center"
    android:text="@string/app_name"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
    app:layout_constraintTop_toTopOf="parent" />

// get rid off below toolbar so that the container will cover the whole height and width of the screen
<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"/>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_margin="24dp"/>

Although I'm sure your answer is fine, it doesn't answer my question. My question is trivial in that I want to better understand how things work. I'm guessing the fragment manager just adds the fragment's view to the bottom of the ViewGroup which is why it is on top of any views with the same elevation, but below the views in that ViewGroup with an elevation higher than that of the fragment. Maybe my question is a bad one, but I was wondering if there was already a solution where adding the fragment flattens the ViewGroup in terms of elevation so the fragment is on top or something... — Darryl Johnson, Jul 25 '18 at 23:57

portfoliobuilder · Accepted Answer · 2019-07-23T23:08:41.747

The provided answer is more of a hack than a solution. Hiding, displaying, re-hiding and re-displaying as users navigate back and forth between fragments is a pain. A better solution would be to have a RelativeLayout (if using multiple fragments displayed at once) or LinearLayout/FrameLayout parent with your ConstraintLayout inside of it.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/rl_container"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<TextView
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:elevation="4dp"
    android:gravity="center"
    android:text="@string/app_name"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
    app:layout_constraintTop_toTopOf="parent" />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"/>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_margin="24dp"/>

    </android.support.constraint.ConstraintLayout>

</RelativeLayout>

Don't forget to include your id e.g. rl_container that serves as the reference to your container for your fragments. Remember, ConstraintLayout is a flat hierarchy. So using it as a container will always have issues with any views that are "elevated" (android:elevation="xdp") or dialogs or anything else that isn't flat. Cheers!

Added fragment shows under elevated views in fragment below?

3 Answers3