skip to Main Content

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?

2

Answers


  1. Chosen as BEST ANSWER

    I added the property android:layout_marginBottom="45dp" to the BottomNavigationView element, and now the menu appears in the emulator. But in the device there is a black range below the menu. It seems that the ConstraintLayout's height is 45dp's bigger than the emulator screen height.


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search