ConstraintLayout de Android: coloque una vista encima de otra vista


106

Estoy tratando de agregar ProgressBara encima de a Button(ambos están dentro de a ConstraintLayout).

<Button
    android:id="@+id/sign_in_button"
    android:layout_width="280dp"
    android:layout_height="75dp"
    android:layout_marginBottom="75dp"
    android:layout_marginTop="50dp"
    android:text="@string/sign_in"
    android:textColor="@color/white"
    android:textSize="22sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/passwordEditText"
    app:layout_constraintVertical_bias="0.0"/>

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@+id/sign_in_button"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/sign_in_button"
    android:layout_marginBottom="8dp"
    app:layout_constraintVertical_bias="0.5"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="@+id/sign_in_button"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="@+id/sign_in_button"/>

Pero incluso después de llamar bringToFrontal ProgressBarin onCreate, siempre permanece detrás del Button.

ProgressBar progressBar = (ProgressBar)findViewById(R.id.progressBar);
progressBar.bringToFront();

esto es tan extraño, intenté jugar un poco con su diseño, incluso invirtiendo la cadena para que la barra de progreso se limite al texto de edición y el botón a la barra de progreso, pero el botón parece estar siempre en la parte superior de la barra de progreso
lelloman

¿Puede utilizar un FrameLayout? Pruébelo, sabiendo que en FrameLayout, el índice Z viene dado por el orden dentro del diseño (por lo tanto, Botón primero, Progreso segundo)
razgraf

¿Dónde está su passwordEditText como verifiqué sin la aplicación: layout_constraintTop_toBottomOf = "@ + id / passwordEditText" puedo ver la barra de progreso en la parte superior puede u proporcionar esa contraseñaEditText
Pavan

Respuestas:


168

Establezca una elevación en ProgressBar; 2dpparece funcionar.

android:elevation="2dp"

También puede intentar configurar translationZcomo se sugiere en la respuesta aceptada a una pregunta similar .

También encontré esta respuesta como alternativa.


17
Pero elevationy translationZson solo para API> = 21, ¿qué pasa con las API más antiguas?
q126y

1
@ q126y No creo que esto se haya convertido en un problema hasta la API 21, por lo que las API más antiguas no deberían necesitar esto. Lo probé en un emulador que ejecuta API 17 y la barra de progreso apareció en la parte superior como se esperaba.
Cheticamp

@Cheticamp entonces ¿Cómo manejar esto? AS está dando una advertencia de que solo funciona con el nivel de API 21 y superior.
Ajay S

6
@ q126yViewCompat.setTranslationZ(view, 5)
Silvia H

2
ViewCompat.setElavation(view, 20f)te ayuda
sagus_helgy

9

Necesitamos usar Android: Elevation para controlar esto.

android:elevation="10dp"

Este atributo de elevación solo funciona en el nivel de API> = 21. Pero a continuación se comportará normalmente. Si agregamos Progreso debajo de la vista Botón, muestra la vista que está en la parte inferior en la parte superior de la otra vista.


6

En la mayoría de los casos, simplemente puede definir la vista que desea en la parte superior después de la que debería aparecer debajo.


¿Cómo se asegura de que porque el xml pueda reorganizarse accidentalmente
RamPrasadBismil

@Cristan, es mejor proporcionar un fragmento de código o un ejemplo. Gracias
blueware

1
Me pregunto por qué ProgressBarno está encima del Buttonaunque ProgressBarse define después Buttonen la pregunta.
Michael Osofsky

Pensé que esto también era cierto, pero no importa dónde coloque una vista de imagen en el orden de diseño de restricción, siempre aparece detrás de un botón
behelit

1

En el diseño de restricción, debe usar

traslationz

superior a la vista que desea a continuación.


0

Respuesta actualizada para Android Sutdio 3.5:

En el editor de diseño actualizado, ahora es mucho más fácil elegir qué vista estará al frente, como se muestra en las notas de la versión de Android Studio.

.. Además, una superposición azul ahora resalta el objetivo de la restricción. Este resaltado es particularmente útil cuando se intenta restringir a un componente que se superpone con otro.

https://developer.android.com/studio/releases

Aún más fácil, si arrastra la Vista hacia arriba (copiar y pegar o desde el Árbol de componentes en el editor de diseño) tendrá una prioridad menor (por lo que estará detrás de las otras vistas)


0

Puede ajustarlo como se muestra a continuación. Use framelayout como padre y coloque la barra de porogress fuera del diseño de restricción. Este botón se superpondrá

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 //your all view inside it with button
 <Button/>......
  .........
 </androidx.constraintlayout.widget.ConstraintLayout>

 <ProgressBar
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</FrameLayout>

0

El botón tiene configurado TranslationZ por defecto, por lo que tiene dos opciones

1 - hacer que la barra de progreso TranslationZ sea mayor que la elevación del botón

ViewCompat.setTranslationZ(progressBar, 5)// to support older api <21

2 - haga que el botón TranslateZ esté en 0 para que las vistas aparezcan una encima de la otra en su diseño de restricción, puede lograr esto configurando el botón Style to

style="@style/Widget.AppCompat.Button.Borderless"

0

Aunque android:elevation="4dp"o traslationzfuncionará, pero para ese nivel de API debería al menos 21. Si por alguna razón no puede hacer eso, asegúrese de que la vista que desea en la parte superior se mencione después de otras vistas. Por ejemplo, si quiero progressBar encima de ImageView:

<?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:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".ImageActivity">

<ImageView
   android:id="@+id/image_view"
   android:layout_width="0dp"
   android:layout_height="0dp"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintDimensionRatio="6:4"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />

<ProgressBar
   android:id="@+id/progress_bar"
   style="?android:attr/progressBarStyle"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.