Develop Reference

Android layout problem, ImageView not appearing in desired place (between two other Views)

I'm new to android development and I'm trying to make a screen (a layout) that resembles this: a spinner, and two text fields on top, a thumbnail (ImageView) just below on the left side, and a fragment container view below that I will use to show a different page. Right now I'm not looking for beautiful design, I just want to make android display it like this.
The problem is that, even though on the design tab of android studio the thumbnail is shown in the correct place, on runtime is completely wrong:
Here is the Component Tree and the layout's xml in case it's useful:
<androidx.coordinatorlayout.widget.CoordinatorLayout 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/activity_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NoteActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:theme="#style/Theme.NoteKeeper.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.NoteKeeper.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_note" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:layout_gravity="bottom|center">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center|left"
android:layout_marginStart="4dp"
app:layout_constraintBottom_toTopOf="#+id/fragmentContainerView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView2"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="367dp"
android:layout_gravity="bottom|center"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:navGraph="#navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginBottom="16dp"
app:srcCompat="#android:drawable/ic_menu_camera" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
EDIT:
In the end, I had to use constraint layout like this:
<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:id="#+id/activity_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".NoteActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarContentNoteLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:theme="#style/Theme.NoteKeeper.AppBarOverlay"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.NoteKeeper.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/include"
layout="#layout/content_note"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarContentNoteLayout" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include"
tools:srcCompat="#tools:sample/avatars" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#AC1A1A"
android:backgroundTint="#C51111"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:navGraph="#navigation/nav_graph" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#android:drawable/ic_menu_camera" />
</androidx.constraintlayout.widget.ConstraintLayout>
Added tint so that the fragment view would show the borders

The problem is you are using layout_gravity in your xml code that works in some view groups like FrameLayout but it doesn't work in ConstraintLayout. And the second fact is you don't need to use nested ConstraontLayouts and one will handle All of your ui requirements. So for the first one that is AppBar you can use app:layout_constraintTop_toTopOf="parent" and for content note, you can constraint it to bottom of the appBar as well. Like this: app:layout_constraintTop_toBottomOf="#+id/appBar" and also for the image thumbnail use this: app:layout_constraintTop_toBottomOf="#+id/contentNote" together with app:layout_constraintStart_toStartOf="parent" and for the last one as fragmentContainer you can use this app:layout_constraintTop_toBottomOf="#+id/imageView".
This way all of them will be constrainted to each other and works well. And for any other constraints for them related to the parent layout, you can add their constraints as well.

Your constraints are wrong in the ImageView.
Try getting rid of the following line
app:layout_constraintTop_toTopOf="parent"
in your ImageView as this line of code is trying to pull the top of your image all the way to the top of the parent.
Lmk if that works. Otherwise, I can send you a complete layout code snippet instead.

Android: Intellij Buttom nav template creates unused space, hides nodes under it

I created an Android project in Intellij with the buttom nav template.
I can not use a certain space on the top (see screenshot) which corelates in size with the buttom nav bar, even though the constrains seem to be right.
As well it hides/converes elements which are placed under it, actually there is a TextView and a spinner.
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu"/>
<fragment
android:id="#+id/nav_host_fragment_activity_main"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:defaultNavHost="true"
app:navGraph="#navigation/mobile_navigation"
android:scrollbars="vertical" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/nav_view" android:layout_marginBottom="40dp"
android:paddingBottom="40dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

You have to remove the fragment height from wrap_content to 0dp i.e match_constraint (match_parent)
match_constraint or 0dp : The view expands as much as possible to meet the constraints on each side (after accounting for the view's margins).
Chain: A chain is a group of views that are linked to each other with bi-directional position constraints. The views within a chain can be distributed either vertically or horizontally. For your case we need a Vertical Chain. See video
And last I remove the android:paddingTop="?attr/actionBarSize" from you ConstraintLayout
Try the below code:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/nav_host_fragment_activity_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
app:defaultNavHost="true"
android:name="androidx.navigation.fragment.NavHostFragment"
app:layout_constraintBottom_toTopOf="#+id/nav_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nav_host_fragment_activity_main"
app:menu="#menu/bottom_nav_menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Remove
android:paddingTop="?attr/actionBarSize"
from your root ConstraintLayout.

How to set height of ScrollView in Android?

I am very new in Android development I have designed the xml below
I started with creating a ConstraintView inside of that I created a ConstraintView with some fixed height and ScrollView.
I am facing problem to set the height of Scrollview. How to set ScrollView should start just below to ConstraintView
<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"
tools:context=".activity.MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/CL1"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#color/color_primary"
app:layout_constraintBottom_toTopOf="#+id/scrollView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.0">
</androidx.constraintlayout.widget.ConstraintLayout>
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="match_parent"
android:layout_height="550dp"
android:background="#color/color_primary_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

I am not sure what is your end layout goal here, but you can simply set a top to bottom constraint on your ScrollView like you have done on your RecyclerView. So just add the following in your ScrollView XML
app:layout_constraintTop_toBottomOf="#+id/CL1"
So your XML becomes
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="match_parent"
android:layout_height="550dp"
app:layout_constraintTop_toBottomOf="#+id/CL1"
android:background="#color/color_primary_dark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
android:fillViewport="true">

FAB doesn't stick to bottom|end when using ViewPager

I'm using a fragment with a ViewPager+TabLayout:
<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=".ui.view.InventoryOverviewFragment">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="scrollable"
app:tabTextColor="#android:color/white" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
The ViewPager in turn hosts three different options you can click on (goods received, goods sold, inventory levels). Two of these fragments contain a recyclerView and should have a FAB (goods received and goods sold).
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.view.InventoryReceivedFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewReceived"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/addReceived"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="24dp"
android:src="#drawable/ic_add_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
It is supposed to be on the bottom right corner when I test it on my device, however, the FAB is always on the top right corner. As shown in the code, I've also tried using a constraintLayout where the constraints for bottom and end are set, but no luck...
Could someone pls help me out with this? It's driving me crazy ^-^

You make the ViewPager height to match the constraints wit 0dp, and you didn't add any constraints that controls its height; so add app:layout_constraintBottom_toBottomOf="parent" to the ViewPager so that it always has the entire height of the parent so that the underlying tabs will take the entire height as well.
If it didn't work, then make the ViewPager height as match_parent

You need to give viewpager bottom constraint.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="scrollable"
app:tabTextColor="#android:color/white" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

Overflowing layout inside constraint layout

I have two layouts inside a constraint layout.
One is reserved for the actual screens, and the other is reserved for the bottom toolbar
the problem is the actual screen is flowing under the toolbar and i want them to be next to each other.
What do I need to change in this layout ?
<?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/mainScreen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:background="#ff00ff00" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_navigation_menu" />
</android.support.constraint.ConstraintLayout>

You forget to add where should be place navigation bottom view, try this.
<FrameLayout
android:id="#+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:background="#ff00ff00" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimaryDark"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mainFrame"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_navigation_menu" />

I realise this is a bit old and probably solved, but thought it was worth answering for those who stumble across it...
The problem here is that the FrameLayout is set to wrap_parent which means it will only grow as large as it needs to in order to display its content.
You can use a contraint weight to have it grow as large as it can, something like this:
<?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/mainScreen"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintVertical_weight="1"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:background="#ff00ff00" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/steel"
app:itemIconTint="#color/colorPrimary"
app:itemTextColor="#color/colorPrimaryDark"
app:layout_constraintTop_toBottomOf="#+id/mainFrame"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/menu_main_drawer" />
with the important part being android:layout_height="0dp" and app:layout_constraintVertical_weight="1", and also adding the suggestion posted by Hemant.

All you need to do is set the height of the frame layout to 0dp -> Constraint layout takes it at match_constraint.