Android Studio - Element is hidden behind smartphone

Question

I added a button to my webview, but the button is partially hidden behind the smartphone.

I draw a red rectangle into the following screenshot, this is the real size of the display, why is the webview area bigger than the display size?? I have to move the button way higher so that it is not out of display.

In xCode (iOS) there is "safe area" which is visible area of the display without status bar and bottom bar, is there something similar in Android Studio?

How can I fix this?

I am running Android Studio 3.4.2

activity_fullscreen.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="visible"
    tools:context="de.blizz_z.onlineshop.FullscreenActivity">

    <Button
        android:id="@+id/backButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginBottom="20dp"
        android:text="Zurück"
        app:layout_constraintBottom_toBottomOf="@+id/blizzView"
        app:layout_constraintStart_toStartOf="@+id/blizzView" />

    <WebView
        android:id="@+id/blizzView"
        android:layout_width="412dp"
        android:layout_height="844dp"
        android:keepScreenOn="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </WebView>

the reason is not all android device have height = 844dp. in this case, look like your phone have height less than this value — Linh, Jul 19 '19 at 09:48

score 2 · Accepted Answer · answered Jul 19 '19 at 09:52

You have set the size of the WebView to an arbitrary amount, which probably makes it extend past your device's screen. The Button constraints are set correctly but since the bottom of the WebView is off the screen, so is the button.
Try changing

    android:layout_width="412dp"
    android:layout_height="844dp"

to

    android:layout_width="match_parent"
    android:layout_height="match_parent"

This will fit the WebView onto the full screen on every device and constrain the Button to the bottom-left corner of the WebView.

score 1 · Answer 2 · answered Jul 19 '19 at 09:56

You're setting your WebView to be a specific height and width, which is bad practice if you want to support multiple devices. In your XML:

<Button
    android:id="@+id/backButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginLeft="32dp"
    android:layout_marginBottom="20dp"
    android:text="Zurück"
    app:layout_constraintBottom_toBottomOf="@+id/blizzView"
    app:layout_constraintStart_toStartOf="@+id/blizzView" />

<WebView
    android:id="@+id/blizzView"
    android:layout_width="412dp"
    android:layout_height="844dp"
    android:keepScreenOn="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</WebView>

You're setting your WebView to a height of 844dp, which means it'll overscroll when a device has a smaller height than this. Likewise, your Button is constrained to the WebView, when it should be relative to the parent view as it's floating over the WebView. So in my opinion you should change the XML to this (removing my comments when pasting):

<Button
    android:id="@+id/backButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginLeft="32dp"
    android:layout_marginBottom="20dp"
    android:text="Zurück"
    app:layout_constraintBottom_toBottomOf="parent" <!-- Constrain to parent, not WebView -->
    app:layout_constraintStart_toStartOf="parent"   <!-- Constrain to parent, not WebView --> />

<WebView
    android:id="@+id/blizzView"
    android:layout_width="match_parent"   <!-- Change from fixed dimension to "match_parent" -->
    android:layout_height="match_parent"  <!-- Change from fixed dimension to "match_parent" -->
    android:keepScreenOn="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

</WebView>

Lazy boy · Answer 3 · 2019-07-19T09:48:50.200

0

May be the project's screen size is differ from your's phone's resolution

Try to declare new layout dimension for the webview, or you may set the button visibility to none when opening the webview

btn.setVisibility(View.GONE);

edited Jul 19 '19 at 09:48

answered Jul 19 '19 at 09:46

Lazy boy

24
3

The layout should always fit the display of any android device. – Black Jul 19 '19 at 09:47

score 0 · Answer 4 · answered Jul 19 '19 at 09:47

0

If you want to make your button over your WebView, use FrameLayout as parent and then do something like this:

<FrameLayout>
<WebView/>
<Button/>
</FrameLayout>

answered Jul 19 '19 at 09:47

Alex

962
4
15

I already tried FrameLayout, but then I was unable to move the button position. https://stackoverflow.com/questions/57108594/cant-change-position-of-elements-in-webview/57109153#57109153 – Black Jul 19 '19 at 09:48
You can change it's position by using android:layout_gravity="right" (In this example the button will go to the right of the screen) – Alex Jul 19 '19 at 09:52
and if I need the button to be on a custom position? – Black Jul 19 '19 at 09:54
1

Well you can use another parent for the Button (LinearLayout, RelativeLayout, ConstraintLayout etc.) it really depends where you want to place the button. What is important is to be able to get that floating effect the webView needs to be the first child of FrameLayout. Hope that helps! – Alex Jul 19 '19 at 09:58

Android Studio - Element is hidden behind smartphone

4 Answers4