Button overlaps TabLayout in ConstraintLayout

Question

In Constraintlayout i am using guideline to show tablayout and a view, tablayout covers 10% and view covers rest of 90% of screen. On tab click i want to show some buttons coming from bottom to 55% of screen for which i am using another guideline (for widgets) at 55%.

Here is the xml:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/cl"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#D3D3D3"
            app:layout_constraintBottom_toTopOf="@+id/glTabLayout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:text="Button"
            android:drawableTop="@mipmap/ic_launcher"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/imageView"
            app:layout_constraintTop_toBottomOf="@+id/glWidgets" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/ic_launcher"
            app:layout_constraintLeft_toRightOf="@+id/button"
            app:layout_constraintRight_toLeftOf="@+id/textView"
            app:layout_constraintTop_toBottomOf="@+id/glWidgets" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/test"
            android:textColor="#ff0000"
            app:layout_constraintLeft_toRightOf="@+id/imageView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/glWidgets" />

        <android.support.constraint.Guideline
            android:id="@+id/glTabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.90" />

        <android.support.constraint.Guideline
            android:id="@+id/glWidgets"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.55" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/glTabLayout"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget" />

    </android.support.constraint.ConstraintLayout>

</layout>

At start when tab is selected widgets will show like first screenshot. But on other tab click i want these widgets to slide/animate to bottom for which i am changing guideline (for widgets) from 55% to 90% so that it hides behind the tablayout.

Code to animate/update guideline:

    ConstraintLayout constraintLayout = binding.cl;
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(constraintLayout);
    constraintSet.setGuidelinePercent(binding.glWidgets.getId(), percent);
    TransitionManager.beginDelayedTransition(constraintLayout);
    constraintSet.applyTo(constraintLayout);

Now imageview, textview or other normal views hide below the tablayout But Button overlaps the tablayout. I want button to come under the tablayout when animated. Screenshots are attached for better understanding:

Have you checked elevation settings of a button? Also, Z-translation is a subject to check — Nikita Khlebushkin, Mar 09 '18 at 20:11
Another thing: try to add `android:stateListAnimator="@null"` to your Button, its default value causes the Button to be drawn after "static" elements — Nikita Khlebushkin, Mar 09 '18 at 20:14
@NikitaKhlebushkin Aadding android:stateListAnimator="@null" to Button worked. thanks — Nouman Bhatti, Mar 10 '18 at 12:41

score 0 · Answer 1 · answered Mar 09 '18 at 18:42

0

Have you tried typecasting the button into a textView whenever you are on that mode where you want to show tabs on top of views?

If you do not need much from the Button class this can be an alternative:

Using a layout (relative or Linear) that contains a textview and an imageview instead of a button.

answered Mar 09 '18 at 18:42

Red M

2,609
3
30
50

second option is not feasible because i dont want to use viewgroups and nested layouts, but yes using TextView instead of Button can also do the trick but in that way i will only mimic the characteristics of Button that also miss the purpose. As i want to use Button's features – Nouman Bhatti Mar 09 '18 at 19:00

Button overlaps TabLayout in ConstraintLayout

1 Answers1