Search code examples
androidandroid-constraintlayout

Place a view in front of other view when no space

I want to keep a label on top of a graph bar when there's space between bar height and its parent, but want to show the label in front of the graph bar when graph bar touches its parent's top and there's no space between the graph bar's top and parent.

The simple xml layout for placing the label above graph bar is as below (for a random height of 512dp to test):

<androidx.constraintlayout.widget.ConstraintLayout
....>
....
 <FrameLayout
    android:id="@+id/pragatiUchit"
    android:clickable="true"
    android:backgroundTint="?colorSecondaryVariant"
    android:background="@drawable/uchcha_vakriya"
    android:layout_width="match_parent"
    android:layout_height="512dp"
    app:layout_constraintBottom_toTopOf="@+id/tvDinaank"/>

<TextView
    android:id="@+id/tvUchit"
    android:text="100"
    android:background="#FF0000"
    android:textColor="?colorPrimary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="4dp"
    android:layout_marginBottom="4dp"
    app:layout_constraintBottom_toTopOf="@+id/pragatiUchit"
    app:layout_constraintStart_toStartOf="@+id/pragatiKul"
    app:layout_constraintEnd_toEndOf="@+id/pragatiKul"/>
....
</androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

When the graph bar goes to full height (match_parent), I want to place the label in front of the bar as below like label's top_to_top_of parent constraint, instead of clipping it off with its bottom_to_top_of graph bar constraint.

enter image description here

Is there any way in ConstraintLayout to achieve this dynamic behavior or declaring multiple constraint's and specifying their priority?

Solution

  • I got able to achieve this using CoordinatorLayout as below:

    <androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:animateLayoutChanges="true"
android:layout_width="36dp"
android:layout_height="match_parent"
android:layout_margin="4dp">

...
<FrameLayout
    android:id="@+id/pragatiUchit"
    android:clickable="true"
    android:backgroundTint="?colorSecondaryVariant"
    android:background="@drawable/uchcha_vakriya"
    android:layout_width="match_parent"
    android:layout_height="<dynamic by runtime value>"
    android:layout_gravity="top"
    app:layout_anchor="@id/tvDinaank"/>

<TextView
    android:id="@+id/tvUchit"
    android:textColor="?colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    app:layout_anchor="@id/pragatiUchit"
    app:layout_anchorGravity="top|center_horizontal"
    android:layout_gravity="top|center_horizontal"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>