Foreground overlapping in constraintlayout

I have two constraintlayouts nested in another constraintlayout. I've set a foreground image for the parent constraintlayout but the image overlaps on the other two layouts as you can see in the image

I've searched online but I can't find how to solve this problem

This is my xml file so far:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:forceHasOverlappingRendering="false"
    android:foreground="@drawable/deviworkslogo_only_gears_white"
    android:foregroundGravity="center"
    android:foregroundTint="#E6E6E6"
    android:foregroundTintMode="src_in">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:background="#D31212"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <Button
            android:id="@+id/homeBtn"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginEnd="30dp"
            android:foreground="@drawable/ic_home_black_24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/libraryBtn"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/libraryBtn"
            android:layout_width="60dp"
            android:layout_height="60dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/settingsBtn"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginStart="30dp"
            android:foreground="@drawable/ic_settings_black_24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/libraryBtn"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="250dp"
        android:layout_height="0dp"
        android:background="#3973AF"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

What I want to obtain is that the foreground image remains behind the nested constraintlayouts

Solution

If you want the image to remain behind the nested ConstraintLayouts you probably want to use the android:background attribute instead of android:foreground.

In the code you provided, in the parent ConstraintLayout, you have the following line:

android:foreground="@drawable/deviworkslogo_only_gears_white"

You need to switch to use background instead of foreground if what you want is for the image to be behind the nested ConstraintLayouts.

From the quick description of android:foreground attribute we can read the following: "Defines the drawable to draw over the content. This can be used as an overlay. The foreground drawable participates in the padding of the content if the gravity is set to fill."