Develop Reference

View is not visible while using it with include tag

I am having a layout activity_main.xml which adds another layout (login_screen.xml signup_screen.xml) using include tag. The layout which is added using include tag has a view component which is declared using View. That View is visible in their respective layouts,(login_screen.xml signup_screen.xml), but while adding into activity_main.xml View becomes invisible. I tried copying the entire code and pasting it in activity_main.xml, at that time View visible.
What is the actual issue? Could someone please help me out?
activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/logo"/>
<TextView
android:id="#+id/app_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"/>
<include
layout="#layout/login_screen"
android:id="#+id/login_screen"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<include
layout="#layout/signup_screen"
android:id="#+id/signup_screen"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/as_guest"/>
</androidx.constraintlayout.widget.ConstraintLayout>
login_screen.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="2dp"
android:layout_height="match_parent"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Username" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hintt="Password"/>
</androidx.constraintlayout.widget.ConstraintLayout>
signup_screen.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="2dp"
android:layout_height="match_parent"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Username" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hintt="Password"/>
</androidx.constraintlayout.widget.ConstraintLayout>
EDIT: I have removed all the constraints here for making it easier to read, in my code, I have set the constraints properly and it's perfect.

Does it work if you set android:layout_width to match_parent on the <include /> tags?
What you're effectively saying right now is "ok, let the width match whatever constraints are set" but there aren't any constraints to match.
Note: For your current XML, you might as well use a LinearLayout with the android:orientation set to vertical - you don't have any constraints specified at the moment.

Right now, I am not sure what is the problem, but for your usecase, you can use ViewStub instead of include

Setting the constraints to the layout of the <include> tag works for me
<include
android:id="#+id/login_screen"
layout="#layout/login_screen"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<include
android:id="#+id/signup_screen"
layout="#layout/signup_screen"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
Are you changing your constraints anywhere in your activity?

ConstraintLayout inside DrawerLayout causes some problems

I am working on an app that uses a DrawerLayout. The fragment containing this layout also contains some scrollable content.
So the main layout of this fragment is a DrawerLayout, below is the include block for the app bar, then the ScrollView block, which contains a ConstraintLayout so that I can put all the content I need in the ScrollView. Here is the code in details :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
android:id="#+id/appBarMain"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ScrollView
android:id="#+id/scrollViewDashboard"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:id="#+id/lytDashboardContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="76dp">
<Button
android:id="#+id/btnAwaitingReview"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:background="#drawable/rounded_corners_color_primary"
android:text="42 avis en attente"
android:textAllCaps="false"
android:textColor="#color/grey"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.lsjwzh.widget.recyclerviewpager.RecyclerViewPager
android:id="#+id/rvpPlaceOfTheDay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnAwaitingReview"
app:rvp_singlePageFling="true"
app:rvp_triggerOffset="0.1" />
<TextView
android:id="#+id/lblDateNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="30dp"
android:text="Dimanche 31 Fevrier"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rvpPlaceOfTheDay" />
<View
android:id="#+id/separator"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginEnd="30dp"
android:layout_marginStart="30dp"
android:layout_marginTop="10dp"
android:background="#color/grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/lblDateNews" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvNews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/separator" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/fragment_dashboard_drawer" />
</android.support.v4.widget.DrawerLayout>
But there are two problems :
The first is that the NavigationDrawer button at the top left is no more clickable. I know that this is caused by the ConstraintLayout because I tried putting every element as a comment one by one, and it worked properly as long as I uncommented the ConstraintLayout, but I couldn't find a way to solve it.
And the second is that the ScrollView scrolls over the app bar as you can see on this screenshot. For this one I couldn't figure out the source of the problem...

I'm not 100% sure but my guess is:
<ScrollView
android:id="#+id/scrollViewDashboard"
android:layout_width="match_parent"
android:layout_height="match_parent">
It that won't help try wrapping ScrollView with eg. LinearLayout.
Hope it helps.

Thanks to Mike M. I solved my problems, so my mistake was to put my ScrollView after I included the app_bar_main, which ended up covering it, so the solution was to simply move the ScrollView in app_bar_main, after the AppBarLayout.

ConstraintLayout - element that fills remaining height does not resize

I'm working on a simple chatting app, which has a recyclerView to display messages and a LinearLayout to contain controls for sending new messages. The controls should take as much space as needed (when writing multiple lines of text, it gets bigger) and the recyclerView should take the rest.
I have encountered these issues with my code (see bellow):
When the keyboard pops up, the recyclerView is overlaped (should be resized to fit the remaining space)
Overlap when keyboard appears
When writing more lines of text, the recyclerView is again overlaped (should be resized to fit the remaining space)
Overlap when wirting longer text
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/line"
app:gone="#{!viewModel.loaded}"
app:itemBinding="#{viewModel.itemBinding}"
app:items="#{viewModel.items}" />
<!-- A horizontal line between the chatbox and RecyclerView -->
<View
android:id="#+id/line"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#dfdfdf"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/chatControls"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<LinearLayout
android:id="#+id/chatControls"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:minHeight="48dp"
android:background="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<EditText
android:id="#+id/messageEdit"
android:background="#android:color/transparent"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:maxLines="6"
android:text="#={viewModel.messageText}"
android:hint="#string/hint_write" />
<ImageButton
android:id="#+id/chatSendButton"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:src="#drawable/ic_menu_send"
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="bottom"
android:onClick="#{() -> presenter.sendMessage()}" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Thank you in advance for any ideas.

I've managed to get the right behaviour by setting stackFromEnd to true on recycler view's LinearLayoutManager.

Using ListView inside ConstraintLayout

I have read on Android Developers that ConstraintLayout can be used to design a responsive layout for an application. There is a parent ConstraintLayout which houses a toolbar and two other ConstraintLayouts. The first child ConstraintLayout is going to act as empty view for my ListView. The second ConstraintLayout holds my listview and a floating action button. Currently, the the listview appears under the Toolbar, rather than below it. Also as seen in the screenshot, the floating action button appears outside visible area.
See the screenshot below:
And this is the app layout when the list is empty:
This is the code for my 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"
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toBottomOf="#id/toolbar"
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/tv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/list_is_empty"
android:textSize="#dimen/large_text"
android:textStyle="bold"
/>
<ImageView
android:id="#+id/iv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tv_empty_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:contentDescription="#string/list_is_empty"
android:src="#drawable/emptybox" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/main_area"
android:layout_marginTop="50dp"
android:layout_marginBottom="?actionBarSize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintBottom_toBottomOf="parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
android:layout_marginLeft="#dimen/margin_side"
android:layout_marginStart="#dimen/margin_side"
android:layout_marginRight="#dimen/margin_side"
android:layout_marginEnd="#dimen/margin_side"
android:layout_marginTop="?attr/actionBarSize"
/>
<android.support.design.widget.FloatingActionButton
android:layout_below="#+id/listview"
android:id="#+id/fab"
android:layout_width="#android:dimen/notification_large_icon_width"
android:layout_height="#android:dimen/notification_large_icon_height"
android:layout_gravity="end|bottom"
android:src="#drawable/plus"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

While using ConstraintLayout you have to add constraints for 'constraintTop',constraintRight,constraintBottom,constraintLeft or constraintStart and constraintEnd. only if you constraint all your four sides the constraint layout (or Constraint Start or End with other References) works well. Otherwise the layout will not work correctly
For Further Reference https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0
https://developer.android.com/training/constraint-layout/index.html

There are a couple of things that you can improve with the XML and make the design easier.
First, the main layout will match the screen, to have the preview correctly simulate that, you can set its width/height to match_parent
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
Then, Android Studio should be giving you warnings/errors and saying The view is not constrained horizontally/vertically. In ConstraintLayout, you have to use constraints to specify how your views are placed. If you don't, by default they will position at 0/0 and most probably will look different when it runs on the device:
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="0dp" />
Now, you should be able to that the main_area overlaps with the toolbar. To fix it, you can change main_area height to match the constrains:
android:id="#+id/main_area"
android:layout_height="0dp"
You should be able to obtain a design similar to what you intended.

Here is your desired result, I've made some changes like margins, src just to make it work in my studio, so you'll have to choose whatever you were using, just replace mine with your src's and margins etc...
<?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"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="56dp"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<android.support.constraint.ConstraintLayout
app:layout_constraintTop_toBottomOf="#+id/toolbar"
android:id="#+id/empty_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/tv_empty_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
android:text="list_is_empty"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<ImageView
android:id="#+id/iv_empty_view"
android:layout_width="20dp"
android:layout_height="20dp"
app:layout_constraintTop_toBottomOf="#+id/tv_empty_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#fff222" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/main_area"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ListView
android:id="#+id/listview"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.design.widget.FloatingActionButton
android:layout_marginEnd="30dp"
android:layout_marginBottom="30dp"
android:id="#+id/fab"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Here's the output:

I was also facing the same issue.
I made a mistake of keeping layout_width of ListView as fixed width. I changed it to match_constraint and it's coming correctly without any cut.
For height I was facing similar issue so I changed it to match_constraint and it worked.

Layout being measured twice, what could be the issue?

I am using the following layouts:
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ProgressBar
android:visibility="invisible"
android:id="#+id/progress"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/llSearch"
android:visibility="visible"
android:background="#50AAAAAA"
android:paddingTop="10dp"
android:gravity="center_vertical"
android:paddingBottom="10dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="72dp">
<ImageView
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:src="#drawable/abc_ic_search_api_mtrl_alpha"
android:layout_width="40dp"
android:layout_height="40dp" />
<EditText
android:textColor="#android:color/white"
android:textColorHint="#android:color/white"
android:background="#android:color/transparent"
android:visibility="visible"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:visibility="invisible"
android:layout_marginTop="72dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.RecyclerView
android:visibility="gone"
android:layout_marginTop="72dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.myapp.custom.RevealView
android:id="#+id/reveal"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</merge>
When running the app through DDMS, I've noticed that the layout ends up being measured twice, why is this and how can I prevent overdraw?
What's also strange is that I can't figure out where the other LinearLayouts are coming from.

Measuring twice isnt overdraw. Depending on the type of layout you're using Android might need to measure it twice because of the relationship between child views require it. This can happen with layouts like LinearLayout or RelativeLayout. For exact reason you need to check the source of those, but its hardly an issue (usually).
But if you have something like a recycleview you should avoid using big nested layouts inside.