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.
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
I added the property
android:layout_marginBottom="45dp"
to theBottomNavigationView
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.The problem is that you have conflict constraints, you link the
WebView
bottom to top ofNavigation
and top of Navigation to bottom ofWebView
.Remove the link on
Navigation
to bottom ofWebView
.