CODEWITHSUNDEEP
androidandroid-layout
Julio César
Julio César

Reputation: 13306

Android view on top of Button and EditText doesn't obscure them

This one was a bit unexpected for me. I have the following layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <Button
    android:id="@+id/MyButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/Hello" />
  <EditText
    android:id="@+id/MyEditText"
    android:layout_below="@id/MyButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/Hello" />
  <LinearLayout
    android:layout_centerInParent="true"
    android:layout_width="100dp"
    android:layout_height="match_parent"
    android:background="#ffffffff">
  </LinearLayout>
</RelativeLayout>

And I was expecting the LinearLayout to obscure part of both views (The button and the EditText. The result in the emulator is exactly that:

emulator screenshot

However on the device (A Moto G 3rd Generation), the button is shown on top of the LinearLayout:

result on the device

Furthermore, I can still tap the button and the EditText on the parts that should be obscured by the LinearLayout on both, the device and the emulator.

clicking on the controls behind the linear layout

My questions then are: How can I make the linear layout appear on top of the button on the device? And how can I prevent taps on the LinearLayout from being redirected to the button and edit text?

Thank you.

Just in case, I'm using Xamarin for Android but it shouldn't be relevant.

Upvotes: 1

Views: 401

Answers (1)

Nathanael
Nathanael

Reputation: 711

How can I make the linear layout appear on top of the button on the device?

Elevation is what's causing the Button to appear in front of the LinearLayout. Views with a higher elevation appear in front. It works in the emulator because there you're using a pre-Material design version of Android.

See: http://developer.android.com/training/material/shadows-clipping.html

"To set the elevation of a view in a layout definition, use the android:elevation attribute. To set the elevation of a view in the code of an activity, use the View.setElevation() method."

How can I prevent taps on the LinearLayout from being redirected to the button and edit text?

By using android:clickable="true" on LinearLayout. Reason is, if LinearLayout is not clickable, the clicks are eventually dispatched to views that are further back.

Upvotes: 2

Related Questions