Android ConstraintLayout - Mettre une vue au-dessus d'une autre vue

110

J'essaie d'ajouter un ProgressBarau-dessus d'un Button(les deux sont à l'intérieur 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"/>

Mais même après avoir appelé bringToFrontle ProgressBarin onCreate, il reste toujours derrière le Button.

ProgressBar progressBar = (ProgressBar)findViewById(R.id.progressBar);
progressBar.bringToFront();
Adam Johns
la source
c'est tellement bizarre, j'ai essayé de jouer un peu avec votre mise en page, même en inversant la chaîne pour que la barre de progression soit contrainte au texte d'édition et le bouton à la barre de progression mais le bouton semble toujours être en haut de la barre de progression
lelloman le
Êtes-vous capable d'utiliser un FrameLayout? Faites un essai, sachant que dans FrameLayout, le z-index est donné par l'ordre à l'intérieur de la mise en page (donc Button 1st, Progress 2nd)
razgraf
où est votre passwordEditText comme je l' ai vérifié sans l' application: layout_constraintTop_toBottomOf = « @ + id / passwordEditText » je peux voir la barre de progression sur u peut prévoir que passwordEditText
Pavan

Réponses:

168

Définissez une élévation sur le ProgressBar; 2dpsemble fonctionner.

android:elevation="2dp"

Vous pouvez également essayer de définir translationZcomme suggéré dans la réponse acceptée à une question similaire .

Je suis également tombé sur cette réponse comme alternative.

Chéticamp
la source
17
Mais elevationet translationZne sont que pour les API> = 21, qu'en est-il des API plus anciennes?
q126y
1
@ q126y Je ne pense pas que cela soit devenu un problème avant l'API 21, donc les API plus anciennes ne devraient pas en avoir besoin. Je l'ai essayé sur un émulateur exécutant l'API 17 et la barre de progression est apparue en haut comme prévu.
Cheticamp
@Cheticamp alors comment gérer ça? AS donne un avertissement qu'il ne fonctionne que de niveau API 21 et supérieur.
Ajay S
6
@ q126yViewCompat.setTranslationZ(view, 5)
Silvia H
2
ViewCompat.setElavation(view, 20f)vous aide
sagus_helgy
10

Nous devons utiliser android: elevation pour contrôler cela.

android:elevation="10dp"

Cet attribut d'élévation ne fonctionne qu'au niveau API> = 21. Mais en dessous, il se comportera normalement. Si nous ajoutons Progression sous la vue Button, cela montre la vue qui se trouve en bas en haut de l'autre vue.

Ishan Fernando
la source
6

Dans la plupart des cas, vous pouvez simplement définir la vue que vous voulez en haut après celle qui devrait apparaître en dessous.

Cristan
la source
Comment vous assurez-vous que coz le XML peut être accidentellement réorganisé
RamPrasadBismil
@Cristan, il vaut mieux fournir un extrait de code ou un exemple. Merci
blueware
1
Je me demande pourquoi ProgressBarn'est pas au-dessus du Buttonmême si ProgressBarest défini après Buttondans la question.
Michael Osofsky
Je pensais que c'était vrai aussi, mais peu importe où je place une vue d'image dans l'ordre de disposition des contraintes, elle apparaît toujours derrière un bouton
behelit
1

Dans la mise en page Contrainte, vous devez utiliser

traslationz

plus haut que la vue que vous souhaitez ci-dessous.

Waqas Yousaf
la source
0

Réponse mise à jour pour Android Sutdio 3.5:

Dans l'éditeur de mise en page mis à jour, il est maintenant beaucoup plus facile de choisir la vue qui sera devant, comme indiqué dans les notes de publication d'Android Studio.

.. De plus, une superposition bleue met désormais en évidence la cible de la contrainte. Cette mise en évidence est particulièrement utile lorsque vous essayez de contraindre un composant qui chevauche un autre.

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

Encore plus facile, si vous faites glisser la vue vers le haut (copier-coller ou depuis l'arborescence des composants dans l'éditeur de mise en page), elle aura une priorité inférieure (elle sera donc derrière les autres vues)

Refael
la source
0

Vous pouvez l'envelopper comme ci-dessous Utilisez framelayout comme parent et mettez la barre porogress en dehors de la disposition des contraintes. Cela va chevaucher le bouton

<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>
Rohan Sharma
la source
0

Le bouton par défaut a TranslationZ défini, vous avez donc deux options

1 - Rendre la barre de progression TranslationZ supérieure à l'élévation du bouton

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

2 - Faites le bouton TranslateZ à 0 pour que les vues apparaissent les unes au-dessus des autres dans l'ordre dans votre mise en page de contraintes, vous pouvez y parvenir en définissant le bouton Style sur

style="@style/Widget.AppCompat.Button.Borderless"
Mohammed Alaa
la source
0

Bien que android:elevation="4dp"ou traslationzfonctionnera, mais pour ce niveau d'API devrait au moins 21. Si pour une raison quelconque vous ne pouvez pas faire cela, assurez-vous que la vue que vous voulez en haut est mentionnée après les autres vues. Par exemple, si je veux progressBar par-dessus 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>
Abhi
la source