View is getting hidden when another view is clicked

Question

My problem - In my layout when a button is pressed the view that is above is getting hidden.

Let's take a simple layout for example:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layoutDirection="ltr"
  android:orientation="vertical">

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    android:text="This is view"
    android:textColor="#ffffff"
    android:background="#000000"
    app:layout_constraintBottom_toTopOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/button"
    app:layout_constraintTop_toBottomOf="@+id/button" />

This layout will look like this (the black view will be above the 2 buttons):

My problem is that when I click one of the buttons that are below the black view it will get hidden:

Is there any way to keep the button animation but prevent the situation that the black view is getting hidden by the button click event?

this is a very interesting question, I thought it might be possible by changing the `translationZ` or `elevation` properties but it doesn't seem to work, hope you find an answer, +1 from me — a_local_nobody, Aug 10 '19 at 08:30

score 2 · Accepted Answer · answered Aug 10 '19 at 10:12

2

The problem is with the default animation that Android uses to animate the buttons. After clicking a button by default its Z property (this is the elevation of the button) is increased to allow for the cool shadow effects. You can check more on elevation and translationZ in this article:

Mastering Shadows in Android

In order to fix your problem you can do the following:

In your XML file use android:stateListAnimator="@null" on the button that you want to stay in background. There is a very good post on this issue which you can also check:

Android 5.0 android:elevation Works for View, but not Button?

answered Aug 10 '19 at 10:12

Yordan Lyutskanov

61
4

Thank you for the answer but adding `android:stateListAnimator="@null"` will cause the button to lose its background, this will make it look like there is no button at all to click. – Tamir Abutbul Aug 10 '19 at 10:20
It shouldn't do that. I tested it and it works as required. The problem with the stateListAnimator is that your android:elevation properties get ignored. You can try to define elevation 0 on the button you want to stay on the bottom and you will see that nothing happens. It is also possible to define your own stateListAnimator in XML and use `android:stateListAnimator="@anim/my_animator"` to assing it to your buttons. Just check the link 2nd link provided as @alanv gives a very good answer to that same question. – Yordan Lyutskanov Aug 10 '19 at 10:46
@ Yordan Lyutskanov you are correct, it was my mistake – Tamir Abutbul Aug 10 '19 at 10:57

score 1 · Answer 2 · answered Aug 10 '19 at 08:50

This way you will be able to do. Convert button to TextView.

May be The reason is because of drawable with ripple effect applied to button.

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="ltr"
    android:orientation="vertical">



<TextView
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:text="Button"
        android:background="#DDDDDD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

<TextView
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="5dp"
        android:text="Button"
        android:background="#DDDDDD"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintTop_toTopOf="parent" />

<Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="This is view"
        android:textColor="#ffffff"
        android:background="#000000"
        app:layout_constraintEnd_toEndOf="parent" android:layout_marginRight="8dp"
        android:layout_marginStart="8dp" app:layout_constraintStart_toStartOf="parent"
        android:layout_marginLeft="8dp" android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent"/>

or

android:background="@android:color/transparent" // to button and button2

or

android:background="@null"

Hope this will help you.

Thank you for the answer but I don't want to use textViews, I want to understand why this is happening when using buttons and how can I fix this. You're second and third alternatives just cause my buttons to lose the background, I want to have a custom background on my buttons so I don't think it will work. — Tamir Abutbul, Aug 10 '19 at 09:06
Giving the custom background on buttons will not work. I am trying to find the solution, if you get any please post it. — Rajnish suryavanshi, Aug 10 '19 at 09:26

View is getting hidden when another view is clicked

2 Answers2