Home > Software design >  Android: ConstraintLayout height is bigger than emulator screen's height
Android: ConstraintLayout height is bigger than emulator screen's height

Time:12-14

I have a problem with ConstraintLayout height in any AndroidStudio emulator. When I run the app in several devices, I am seeing well all the layout rendering. But, when I run the app in the emulator, the bottom menu is out of range.

My activity_main.xml has a ConstraintLayout with a WebView and a BottomNavigationView. This is my template:

template code and design image

<androidx.constraintlayout.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <WebView
        android:id="@ id/main_webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@ id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_action_bar"
        app:elevation="16dp"
        app:itemIconTint="@color/color_iconos_bottom_bar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_webview" />

</androidx.constraintlayout.widget.ConstraintLayout>

When I run my app in the emulator, the menu is out of the screen. I can see the top part of the menu, but the icons are below the screen limit. When I do a click in that small region of the menu, I can navigate. So, in conclusion, the menu is there, but out of the limits.

emulator rendering image

When I run the app in the device, I can see the menu perfectly fitted. I downloaded the same model and SDK version emulator than the devices that I have, but I am still seeing it wrong.

So, the problem is that the ConstraintLayout height is bigger than the emulator screen's height. Can you give me any solution to this problem?

CodePudding user response:

I think the problem is caused by that. app:elevation="16dp"

CodePudding user response:

The problem is that you have conflict constraints, you link the WebView bottom to top of Navigation and top of Navigation to bottom of WebView.

Remove the link on Navigation to bottom of WebView.

  • Related