Hi i want to design like below image where front is recylerview with grid and behind that there is another background .How to create this kind of layout.Currently i am using below code to achieve this kind of design but as i know its not good practice for different screen size.Is there another way to do this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="70dp"
android:layout_marginTop="40dp"
android:background="#color/white" />
<include
layout="#layout/recyclerview_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true" />
</RelativeLayout>
You can set the background to the RecyclerView either from layout xml or from activity source code.
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:background="#drawable/sample_drawable"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp" />
or
recyclerView.background = ContextCompat.getDrawable(this,R.drawable.sample_drawable)
Design your parent layout like this :
<android.support.constraint.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:background="#android:color/white">
<!-- Main background which is to be replaced with your image-->
<ImageView
android:id="#+id/main_background"
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_toTopOf="parent"
android:background="#android:color/holo_blue_light"/>
<!-- Sub view with white background -->
<View
android:id="#+id/sub_background"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#android:color/white"/>
<!-- Background as Transparent-->
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Also make your child item's background as transparent.
Hope this helps.
Related
I am new to constraint layout and I am trying to add my button below recyclerview, but I am not able to do that in constraint layout.
How I can achieve this functionality in constraint layout.
I am also share image for better understanding.
Try this sample code:
<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">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The important point is that the ListView's height must be 0 and app:layout_constraintBottom_toTopOf="#+id/button" and app:layout_constraintTop_toTopOf="parent" .
Try something like this:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/myButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
what I want to achive
A scrollView which expends the free vertical space only if needed and a button which is appended on bottom of that scrollView but not hidden by the footer when the amount of the items in the scroll view increases.
whats the problem
scrollView android:layout_height = wrap content:
the button stays at the bottom of the scrollView. But then, if the ScrollView extends, the button is hidden behind the footer.
scrollView android:layout_height = 0dp:
the button stays visible while the scrollView extends the screen height. But then the button position is fixed because the scrollView is not resizing according to the amount of items.
But I didn't find a way to meet both criterias.
question
how do I set the constraints of this Layout to get the expected behaviour (see first image below)?
design to achive
current XML Layout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.Light">
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/shadeOfGrey2"
android:gravity="center"
android:text="header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/addItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintVertical_bias="0"
app:layout_constraintVertical_chainStyle="packed">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/addItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button 01"
app:layout_constraintBottom_toTopOf="#id/footer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/nestedScrollView" />
<TextView
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/shadeOfGrey2"
android:gravity="center"
android:text="footer"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
current Android layout
I think I got it down to what you're expecting now. Could you verify?
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.Light">
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/shadeOfGrey2"
android:gravity="center"
android:text="header"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/addItem"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintVertical_bias="0"
app:layout_constraintVertical_chainStyle="packed">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:itemCount="8"
tools:listitem="#android:layout/simple_list_item_2" />
</androidx.core.widget.NestedScrollView>
<Button
android:id="#+id/addItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button 01"
app:layout_constraintBottom_toTopOf="#+id/footer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nestedScrollView"
app:layout_constraintVertical_bias="0" />
<TextView
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/shadeOfGrey2"
android:gravity="center"
android:text="footer"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Just keep in mind that your approach above won't be recycling any views in the RecyclerView adapter, so if the data is big then performance might become a concern.
Screenshots from Android Studio:
I am trying to make a Dialog that looks like this
Here, the elements in orange rectangles are fixed header and footer sections of the Dialog. The elements inside blue rectangle are placed dynamically depending on what content is to be shown.
Here it the XML for this.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<!-- some views -->
</LinearLayout>
<LinearLayout
android:id="#+id/body_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toBottomOf="#id/header_section"
app:layout_constraintBottom_toTopOf="#id/footer_section"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/footer_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<!-- some views -->
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
It works fine when I place other views inside the blue area, but when a RecyclerView is placed inside it and items are dynamically added to it, it grows in size and overlaps the text in header section and pushes the footer section to bottom. How can I make the RecyclerView cover only the blue area?
Use height 0dp in body section so it will fit between header and footer
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<!-- some views -->
</LinearLayout>
<LinearLayout
android:id="#+id/body_section"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintTop_toBottomOf="#id/header_section"
app:layout_constraintBottom_toTopOf="#id/footer_section"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
</LinearLayout>
<LinearLayout
android:id="#+id/footer_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<!-- some views -->
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
I use ScrollView to tackle this,
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHeight_min="100dp"
app:layout_constraintHeight_max="250dp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:paddingHorizontal="8dp"
android:paddingVertical="8dp"
/>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
The main attributes are these 3
app:layout_constraintHeight_min="100dp"
app:layout_constraintHeight_max="250dp"
app:layout_constrainedHeight="true"
In my android app, I am having following framelayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragments.AppointmentFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
<com.github.jhonnyx2012.horizontalpicker.HorizontalPicker
android:id="#+id/datePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/datePicker" />
</RelativeLayout>
</FrameLayout>
My HorizontalPicker is rendered correctly, however, recycler_view (RecycleView) content is being overlapped in HorizontalPicker.
I have tried various suggestions offered in Stakeoverflow, however nothing works.
Can somebody help me reolving the issue. I have also tried setting the android:layout_height="0dp" as suggested in other such issue, however it stops displaying the content of Recyclerview.
Just try with the following. It may work.
<android.support.v7.widget.RecyclerView
android:layout_below="#+id/datePicker"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/datePicker" />
I've researched through this quite heavily and am at a loss on what to do - I have some content in a fragment that is being clipped off by the BottomNavigation bar in the activity and am not sure what to do. I've tried adding app:layout_behavior="#string/appbar_scrolling_view_behavior" to the NestedScrollView but the bottom piece of the content (the names of the locations) is still being cut off - there's probably an easy fix for this but I can't figure it out. The XML for my main activity and the "home" fragment is as follows:
activity_home.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/home_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#color/navbarBackground"
app:menu="#menu/bottom_nav_menu" />
</LinearLayout>
home_fragment.xml
<?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/home_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<ImageView
android:id="#+id/tokyo_placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/main_screen_placeholder" />
<ImageView
android:id="#+id/airplane_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_background"
app:layout_constraintBottom_toBottomOf="#+id/tokyo_placeholder"
app:layout_constraintLeft_toLeftOf="#+id/tokyo_placeholder"
app:layout_constraintRight_toRightOf="#+id/tokyo_placeholder"
app:layout_constraintTop_toTopOf="#+id/tokyo_placeholder"
app:srcCompat="#drawable/icons8_airplane_48"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="1" />
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="0dp"
android:layout_height="286dp"
android:layout_marginBottom="#dimen/app_bar_height"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#id/bottom_nav"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tokyo_placeholder"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/destination_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/featured_destinations_headline"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/featured_destinations_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/destination_headline" />
<TextView
android:id="#+id/saved_trips_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/featured_destinations_recycler_view"
android:fontFamily="sans-serif"
android:text="#string/saved_trips"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/saved_trips_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/saved_trips_headline" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>
app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:background="#fff"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
As an example to show what I mean, here is the content when the navigation bar is moved out of the way and here is the content with the bar in the way. I'm thinking that the problem is some sort of margin/padding issue, but can't quite figure out what to fix.
Edit: I've create a repository with the relevant code (and a workable emulator example) here - please be aware that the code is written in Kotlin, but I don't imagine the issue lies witihn any of the actual code, but more within the layout
I'm not sure what is the expected behavior, I cannot understand that just by reading your question. Having applied this patch, which just includes home_fragment.xml layout changes:
<?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/home_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<FrameLayout
android:id="#+id/header_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/tokyo_placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart"
app:srcCompat="#drawable/main_screen_placeholder"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/airplane_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:background="#drawable/circle_background"
app:srcCompat="#drawable/icons8_airplane_48"
tools:ignore="ContentDescription" />
</FrameLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
android:paddingLeft="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header_container">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/destination_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/featured_destinations_headline"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/featured_destinations_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/destination_headline"
app:layout_constraintBottom_toTopOf="#id/saved_trips_headline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/destination_headline" />
<TextView
android:id="#+id/saved_trips_headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="#string/saved_trips"
android:textAllCaps="true"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/featured_destinations_recycler_view" />
<android.support.v7.widget.RecyclerView
android:id="#+id/saved_trips_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/app_bar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/saved_trips_headline" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>
Then you'll get this output:
#Tai M.
The problem seems to be the hardcoded height of the NestedScrollView. Since you are already using ConstraintLayout, you can easily lay this view without having to add another Relative layout.
If you want to have the Header images one on top of the other, please wrap those in a FrameLayout. Assign an id to the container and add:
app:layout_constraintTop_toBottomOf="#+id/headerImageContainer"
to the NestedScrollView.
Then you can probably get rid of the RelativeLayout and replace it with another ConstraintLayout to structure the rest of the views using constraints only.
Also, by material design definition, the height of the BottomNavigationView is 56dp which you can assign directly rather than making it wrap content in the
activity_home.xml
<ConstraintLayout ...>
<FrameLayout ...>
<ImageView .../>
<ImageView .../>
</FrameLayout>
<NestenScrollView ... wrap_content>
<ConstraintLayout ...>
<TextView .../>
<RecyclerView .../>
<!-- Assign constraints accordingly -->
<TextView .../>
<RecyclerView .../>
</ConstraintLayout>
</NestenScrollView>
</ConstraintLayout>
Hope this helps.