Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ConstraintLayout: z-index issue

I am using ConstraintLayout for activity:

<?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"
    tools:context="com.site.path.to.AuthenticationActivity">

    <EditText
        android:id="@+id/login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:inputType="none"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <EditText
        android:id="@+id/password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login"/>

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Log in"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password"/>

    <FrameLayout
        android:visibility="gone"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/default_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

FrameLayout should hide all content of the page when visible. But it hides all content except button. Why the button doesn't hide? How to fix it?

gonevisible

like image 846
BArtWell Avatar asked May 29 '17 10:05

BArtWell


People also ask

Is ConstraintLayout better than RelativeLayout?

ConstraintLayout has flat view hierarchy unlike other layouts, so does a better performance than relative layout. Yes, this is the biggest advantage of Constraint Layout, the only single layout can handle your UI. Where in the Relative layout you needed multiple nested layouts (LinearLayout + RelativeLayout).

What is Z index in Android?

In a FrameLayout , the z-index is defined by the order in which the items are added, for example: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:layout_width="wrap_content" android:layout_height=" ...

What are ConstraintLayout constraints?

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).

Can we use LinearLayout in ConstraintLayout?

Most of what can be achieved in LinearLayout and RelativeLayout can be done in ConstraintLayout.

What is constraintlayout and how to use it?

This one is what makes ConstraintLayout that powerful. You can position elements relatively with each other (just like in RelativeLayout). Constraints could be either another view or directly the parent. Let’s see it in action. With the help of these constraint properties, you can align elements the way you like without having nested layouts.

Why don’t the elements have z-index values?

Even if elements don’t have their z-index set, there is a rhyme and reason to which ones will be on top. In our case, none of the elements have a z-index value. So their stacking order is determined by their order of appearance.

What is relative positioning in constraintlayout?

Relative positioning is one of the basic building blocks of creating layouts in ConstraintLayout. Those constraints allow you to position a given widget relative to another one. You can constrain a widget on the horizontal and vertical axis: Horizontal Axis: left, right, start and end sides

What is “gone margin” in constraintlayout?

“Gone Margin” is introduced with ConstraintLayout to solve this issue. Imagine that you have a hierarchy as shown above. You want to make A’s visibility GONE. When A is GONE, B will automatically slide to A’s position. In order to prevent that you can give gone_margin to the related direction.


1 Answers

Editted:

Try to set android:stateListAnimator="@null" to the Button/AppCompatButton

In Lollipop (Android 5.0 (API 21)) and above, Buttons have a default elevation which causes them to always draw on top.

<?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/background_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:tint="#80000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/logo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="24dp"
        android:src="@drawable/logo"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/background_image"
        app:layout_constraintVertical_bias="0.049"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="7dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="7dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:fontFamily="sans-serif-light"
        android:text="There is More"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toTopOf="@+id/scrollView2"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/logo"
        app:layout_constraintTop_toTopOf="@+id/logo"
        app:layout_constraintVertical_bias="1.0"
        tools:ignore="HardcodedText" />

    <ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginStart="32dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo"
        app:layout_constraintVertical_bias="0.050000012">

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

            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_first_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeEditTextLight">

                <EditText
                    android:id="@+id/input_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Name"
                    android:inputType="textPersonName"
                    android:theme="@style/ThemeEditTextLight" />

            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeEditTextLight">

                <EditText
                    android:id="@+id/input_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Email"
                    android:inputType="textEmailAddress"
                    android:theme="@style/ThemeEditTextLight" />

            </android.support.design.widget.TextInputLayout>


            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeEditTextLight">

                <EditText
                    android:id="@+id/input_phone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Phone"
                    android:inputType="phone"
                    android:theme="@style/ThemeEditTextLight" />

            </android.support.design.widget.TextInputLayout>

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

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/input_layout_password"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:theme="@style/ThemeEditTextLight">

                    <EditText
                        android:id="@+id/input_password"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Password"
                        android:inputType="textPassword"
                        android:theme="@style/ThemeEditTextLight" />

                </android.support.design.widget.TextInputLayout>

            </LinearLayout>

        </LinearLayout>
    </ScrollView>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/sign_up_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:backgroundTint="#2a98f0"
        android:stateListAnimator="@null"
        android:elevation="0dp"
        android:paddingBottom="16dp"
        android:paddingTop="16dp"
        android:text="Sign up"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/scrollView2"
        app:layout_constraintVertical_bias="0.100000024" />

    <TextView
        android:id="@+id/or_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:text="or\nSign up with social sites"
        android:textColor="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/imageView6"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />


    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/or_tv"
        app:layout_constraintVertical_bias="0.8"
        app:srcCompat="@drawable/ic_google_plus" />


    <FrameLayout
        android:id="@+id/progressBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ProgressBar
            android:id="@+id/progressBarChild"
            style="?android:attr/progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />
    </FrameLayout>


</android.support.constraint.ConstraintLayout>

This worked for me.

like image 152
motis10 Avatar answered Sep 29 '22 15:09

motis10