Home » Android » Android – Constraint Layout inside another Constraint Layout background not showing

Android – Constraint Layout inside another Constraint Layout background not showing

Posted by: admin May 14, 2020 Leave a comment

Questions:

I’m working on an Android activity in which I want to have a header, and the content below the header. I want to have background image that is streched just on the content, but not on the header.

enter image description here

From the picture you can see that my image is streched also on the logo part of the screen, which I don’t want.

Here is the xml of my current layout: 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_11"
    tools:context=".login.LoginActivity"
    >

    <ImageView
        android:id="@+id/logo"
        android:layout_width="381dp"
        android:layout_height="156dp"
        android:src="@drawable/logo"
        tools:ignore="ContentDescription"
        app:layout_constraintTop_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="-480dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        app:layout_constraintHorizontal_bias="0.47" />

    <ImageView
        android:id="@+id/emptyImage"
        android:layout_width="384dp"
        android:layout_height="445dp"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:background="@color/TICK_BACKGROUND"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo"
        app:layout_constraintVertical_bias="0.0"
        app:srcCompat="@drawable/empty" />

    <EditText
        android:id="@+id/login_usernameTextField"
        android:layout_width="291dp"
        android:layout_height="63dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="80dp"
        android:background="@drawable/rounded_text_edit_shape"
        android:ems="10"
        android:hint="Username"
        android:inputType="textPersonName"
        android:textColor="@color/INPUT_TEXT_COLOR"
        android:textColorHint="@color/iron"
        android:textCursorDrawable="@null"
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <EditText
        android:id="@+id/login_passwordTextField"
        android:layout_width="291dp"
        android:layout_height="63dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="-38dp"
        android:background="@drawable/rounded_text_edit_shape"
        android:ems="10"
        android:hint="Password"
        android:textCursorDrawable="@null"
        android:inputType="textPassword"
        android:textColor="@color/INPUT_TEXT_COLOR"
        android:textColorHint="@color/iron"
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_usernameTextField"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <Button
        android:id="@+id/login_loginButton"
        android:onClick="loginButtonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="30dp"
        android:background="@drawable/rounded_button_shape"
        android:text="Log In"
        android:textColor="@color/white"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_passwordTextField"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintVertical_bias="0.28"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

</android.support.constraint.ConstraintLayout>

I thought about making a parent Layout and inside that Layout add a header and another layout that contains the content. And then set the background inside the content layout like like this: android:background="@drawable/background_11"

Here is the code I tried: 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent" android:layout_height="match_parent">




    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        app:srcCompat="@drawable/logo_2"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="-1dp"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0" />

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/background_11"
        app:layout_constraintTop_toBottomOf="@id/logo"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

However, my background is not showing up. Here are the reuslts:
enter image description here

How to&Answers:

You can use a ConstraintLayout in an other ConstraintLayout but you need to respect some rules. All direct childs of a ConstraintLayout should have constraint on left,top, right and bottom.

I think that without the constraint left and right of your inner ConstraintLayout, he have a width and height equals to 0dp , he is not displayed.

Have you try to add constraint left and rigth to your inner ConstraintLayout ?

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        app:srcCompat="@drawable/logo_2"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="-1dp"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0" />

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/background_11"
        app:layout_constraintTop_toBottomOf="@id/logo"
        android:layout_marginLeft="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent">

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Hope this helps.

Answer：

I made it work by making a constraint layout inside the Linear Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="146dp"
        app:srcCompat="@drawable/netset_logo_2" />

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/background_11">

    </android.support.constraint.ConstraintLayout>
</LinearLayout>

enter image description here

Still I don’t understand why doesn’t my first solution work. Why can’t you add a constraint layout inside the constraint layout?

Answer：

There is no problem adding a constraint layout inside of another constraint layout if you satisfy all constraints.

This would work:

<android.support.constraint.ConstraintLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/background_11"
    android:layout_marginLeft="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/logo"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>

But also:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:background="@drawable/background_11"
    android:layout_marginLeft="8dp"
    app:layout_constraintTop_toBottomOf="@id/logo"
    app:layout_constraintBottom_toBottomOf="parent">
</android.support.constraint.ConstraintLayout>

If it is the right approach using a ConstraintLayout for the purpose of setting a background image is another question.

Since you are only using the ConstraintLayout to use the background property, you can skip that layout completely and use a View directly.
Since all views inherit from View, but just add a lot of logic on top of it, in this use case a View is enough to satisfy the needs.

<View
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/background_11"
    android:layout_marginLeft="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/logo"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">
</View>

Answer：

Well naturally, you made the constraint layout take the entire screen, and the Logo take a smaller subset of it.
so you have the logo on your screen, and beneath it the background.
you might want to set the “background” on a different sub layout inside the main constraint layout.

something like this 

<constraintlayout
width:match_parent
height:match_parent>
    <logo here/>
    <constraintlayout
    background_here>
    <constraintlayout/>
<constraintlayout/>

hope it makes sense.

More Answers>

Tags: ,

© 2014 - All Rights Reserved - Powered by ExceptionsHub | SiteMap