Android ConstraintLayout - Umieść jeden widok na innym widoku

110

Próbuję dodać ProgressBarna górze a Button(oba znajdują się wewnątrz 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"/>

Ale nawet po wywołaniu bringToFrontna ProgressBarIN onCreate, to zawsze pozostaje tył Button.

ProgressBar progressBar = (ProgressBar)findViewById(R.id.progressBar);
progressBar.bringToFront();
Adam Johns
źródło
to jest takie dziwne, próbowałem trochę pobawić się twoim układem, nawet odwracając łańcuch, aby pasek postępu był ograniczony do tekstu edycji, a przycisk do paska postępu, ale przycisk wydaje się być zawsze na górze paska postępu
lelloman
Czy możesz używać FrameLayout? Spróbuj, wiedząc, że w FrameLayout indeks Z jest podany w kolejności wewnątrz układu (czyli Button 1st, Progress 2nd)
razgraf
gdzie jest twój passwordEditText jak i sprawdzane bez aplikacji: layout_constraintTop_toBottomOf = „@ + id / passwordEditText” widzę pasek postępu na górze u można przewidzieć, że passwordEditText
Pavan

Odpowiedzi:

168

Ustaw elewację na ProgressBar; 2dpwydaje się działać.

android:elevation="2dp"

Możesz także spróbować ustawić translationZzgodnie z przyjętą odpowiedzią na podobne pytanie .

Trafiłem też na tę odpowiedź jako alternatywę.

Cheticamp
źródło
17
Ale elevationi translationZsą tylko dla API> = 21, co ze starszymi interfejsami API?
q126y
1
@ q126y Nie sądzę, aby stało się to problemem przed API 21, więc starsze interfejsy API nie powinny tego potrzebować. Wypróbowałem to na emulatorze z API 17 i pasek postępu pojawił się na górze zgodnie z oczekiwaniami.
Cheticamp
@Cheticamp so Jak sobie z tym poradzić? AS ostrzega, że ​​działa tylko na poziomie API 21 i wyższym.
Ajay S
6
@ q126yViewCompat.setTranslationZ(view, 5)
Silvia H
2
ViewCompat.setElavation(view, 20f)pomaga
sagus_helgy
10

Musimy użyć android: elevation, aby to kontrolować.

android:elevation="10dp"

Ten atrybut podniesienia uprawnień działa tylko na poziomie API> = 21. Ale poniżej będzie działał normalnie. Jeśli dodamy Progress poniżej widoku przycisku, pokaże się widok, który znajduje się na dole u góry drugiego widoku.

Ishan Fernando
źródło
6

W większości przypadków możesz po prostu zdefiniować widok, który chcesz umieścić na górze, po tym, który powinien pojawić się poniżej.

Cristan
źródło
Jak zapewnić, że coz xml może przypadkowo zmienić
układ
@Cristan, lepiej podać fragment kodu lub przykład. Dzięki
blueware
1
Zastanawiam się, dlaczego ProgressBarnie jest na szczycie, Buttonmimo że ProgressBarjest zdefiniowane Buttonw pytaniu.
Michael Osofsky
Myślałem, że to też prawda, ale bez względu na to, gdzie umieszczę widok obrazu w porządku układu ograniczeń, zawsze pojawia się on za przyciskiem
behelit
1

W układzie Constraint należy użyć

traslationz

wyżej niż widok, który chcesz poniżej.

Waqas Yousaf
źródło
0

Zaktualizowana odpowiedź dla Androida Sutdio 3.5:

W zaktualizowanym Edytorze układów znacznie łatwiej jest wybrać, który widok będzie z przodu, jak pokazano w informacjach o wersji Android Studio

.. Ponadto niebieska nakładka podkreśla teraz cel ograniczenia. To wyróżnienie jest szczególnie przydatne podczas próby ograniczenia do komponentu, który zachodzi na inny.

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

Jeszcze łatwiej, jeśli przeciągniesz widok w górę (skopiuj wklej lub z drzewa komponentów w edytorze układu), otrzyma on niższy priorytet (więc będzie znajdował się za innymi widokami)

Refael
źródło
0

Możesz zawinąć jak poniżej Użyj framelayout jako rodzica i umieść pasek porogress poza układem ograniczeń. Ten przycisk będzie się nakładał

<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
źródło
0

Przycisk domyślnie ma ustawioną opcję TranslationZ, więc masz dwie opcje

1 - spraw, aby pasek postępu TranslationZ był większy niż wysokość przycisku

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

2 - ustaw przycisk Przekształć w Z na 0, aby widoki pojawiały się nad sobą w porządku w układzie ograniczeń, możesz to osiągnąć, ustawiając styl na przycisk

style="@style/Widget.AppCompat.Button.Borderless"
Mohammed Alaa
źródło
0

Chociaż android:elevation="4dp"lub traslationzbędzie działać, ale dla tego poziomu API powinien wynosić co najmniej 21. Jeśli z jakiegoś powodu nie możesz tego zrobić, upewnij się, że widok, który chcesz na górze, jest wymieniony po innych widokach. Na przykład, jeśli chcę, aby progressBar znajdowała się na górze 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
źródło