Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

z order in issue in ConstraintLayout Android

Tags:

android

I am trying to design a Signup screen using ConstraintLayout everything went smooth except the Z order. When the user clicks on Signup I need to show a FrameLayout on top of everything but it is not working. Please check the screenshot. 

<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: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>

With ProgressBar gone With ProgressBar shown

like image 251
Sai Avatar asked Jul 04 '17 06:07

Sai

People also ask

What is Z index in Android?

Z-Index for Annotation Stacking Order on Android The annotation z-index defines the stacking order of annotations on a page.

How can we solve missing constraints in constraint layout?

To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections. You can also visit the source code for the unit tests for this check to see additional scenarios.

How do you use chain in ConstraintLayout?

Creating a chain is really easy, we can click and drag to select views or press ctrl and select views from Component Tree. And then right click on selected views in Editor Or Component Tree to apply constraints. You can see that in action in following screen records.

How do I change ConstraintLayout?

Open the layout file (activity_main. xml) in Android Studio and click the Design tab at the bottom of the editor window. In the Component Tree window, right-click LinearLayout and then choose Convert layout to ConstraintLayout from the context menu.

1 Answers

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 62
motis10 Avatar answered Sep 18 '22 23:09

motis10
Sign in to Comment

Related questions

What is XML property xmlns:app?
app:layout_scrollFlags="scroll|enterAlways" doesn't works with LinearLayout
If I set minAPI to 21, do I need AppCompat?
how to create test class and folder from android studio?
Cross compiling "Hello World" on Mac for Android
How to avoid writing duplicate boilerplate code for requesting permissions?
Android Studio: Need to know which folders/files to backup
Android Studio modifies ./idea/vcs.xml at startup
Android nfcA.connect(), nfcA.transceive(), nfcA.setTimeout() and nfcA.getMaxTransceiveLength()
Moshi's Custom Adapter with RxAndroid & Retrofit & Kotlin
What errors get detected in "build" in Android Studio - role of Gradle
Dagger 2: Component depends on more than one scoped component
How to display HTML-formatted output files in Travis?
Android - Where and how securely is fingerprint information stored in a device
jQuery - Allow Autoshow Keyboard on Mobile
Android set max width in percentage of a TextView in LinearLayout of vertical orientation
failed because: de.measite.minidns.hla.ResolutionUnsuccessfulException: Asking for xxxx. IN AAAA yielded an error response NX_DOMAIN
Android: java.lang.IllegalArgumentException: Service not registered
Room persistent library with new Thread and data-binding issue
Android Studio 3 + Gradle 4.0 + shrinkResources + libraryProject = Unable to find a matching configuration in project

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!