In my activity I have three elements, one of which is a CoordinatorLayout which wraps a bottom sheet. The CoordinatorLayout is the last view in the activity layout, so based on that, I would assume that it also should be on top of every other view, however, that is not the case.
As you can see from the recording below, when the bottom sheet is expanded it goes behind all the other elements. What I would like to have instead, is for the bottom sheet to cover all the over elements (i.e: have a higher z-index).
activity_bottom_sheet.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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".BottomSheetActivity">
<Button
android:id="#+id/test_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text, hello world"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/test_button" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<include layout="#layout/bottom_sheet_layout" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
bottom_sheet_layout.xml itself
<?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/bottom_sheet_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4ccc"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="62dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp"
android:text="Download"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp"
android:text="Upload"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp"
android:text="Foreload"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="6dp"
android:text="Unload"
android:textSize="16sp" />
</LinearLayout>
and the setup:
val bottomSheetLayout = findViewById<View>(R.id.bottom_sheet_layout)
val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetLayout)
bottomSheetBehavior.isFitToContents = false
bottomSheetBehavior.halfExpandedRatio = 0.5f
Any ideas how I could solve this issue?
Related
I'm still trying to understand ConstraintLayout.
Let's say I have this activity:
Which consists of a RecyclerView and 3 Buttons. The RecyclerView may contains lots of items. Those 3 Buttons stay on the bottom of the screen.
The code:
<?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:layout_width="match_parent"
android:layout_height="fill_parent"
tools:context=".ScanResultActivity">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toBottomOf="#id/btn_buy_more" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="#id/btn_checkout" />
</android.support.constraint.ConstraintLayout>
And the result:
Why only 1 button is visible there?
First issue, your RecyclerView's height was set to match_parent, and it was not constrained to the top of the view.
Second issue, your buttons are constrained on the bottom, when it should be their top that is constrained to the bottom of the element above them.
Here is your layout file reworked :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ScanResultActivity">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0"
app:layout_constraintBottom_toTopOf="#id/btn_buy_more"/>
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toTopOf="#id/btn_checkout" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toTopOf="#id/btn_logout" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
The result :
There is only one button visible because it is over the others as it is set to align Bottom to Bottom.
If you want to set one button above the other you should use Bottom to Top constraint.
I do not know the exactly order you want to set this up, but it should be something like this:
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view" />
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toTopOf="#id/btn_buy_more" />
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toTopOf="#id/btn_checkout" />
</android.support.constraint.ConstraintLayout>
Set Your Buttons in LinearLayout
Like the Following Code
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.RecyclerView
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="#+id/recycler_view">
<Button
android:id="#+id/btn_buy_more"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Buy More"
app:layout_constraintBottom_toBottomOf="#id/recycler_view"/>
<Button
android:id="#+id/btn_checkout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Checkout"
app:layout_constraintBottom_toBottomOf="#id/btn_buy_more"/>
<Button
android:id="#+id/btn_logout"
android:layout_width="match_parent"
android:layout_height="35dp"
android:text="Logout"
app:layout_constraintBottom_toBottomOf="#id/btn_checkout"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I hope it's Works....
I am trying to add PieChart from MPAndroidChart and seekBar under it.
But still no luck, chart is visible, but other content is noT visible, despite it visible when I open design tab during xml configuration.
I already have tried to set a barrier and with groups with weights but still.
Could please anyone give any advice how to properly align chart to be able to see other widgets on view.
Here is my xml example:
<?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/linearLayout3"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toTopOf="#+id/seekBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
ANSWER
The first and correct version of answer from Ashish Kudale is: Use LinearLayout with weight:
<LinearLayout
android:id="#+id/chartContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"/>
<android.support.v7.widget.AppCompatSeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Use LinearLayout Insted of ConstraintLayout.
Try this.
<?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/linearLayout3"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/pieChart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text" />
</LinearLayout>
</LinearLayout>
What it does is places all items in the screen and remaining place is occupied by item which has android:layout_weight="1"
I have a Fragment composed of three subfragments :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<fragment
android:id="#+id/header"
class="xxx.xxx.xxx.HeaderFragment"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<fragment
android:id="#+id/content"
class="xxx.xxx.xxx.ContentFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/footer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header" />
<fragment
android:id="#+id/footer"
class="xxx.xxx.xxx.FooterFragment"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxHeight="64dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
</android.support.constraint.ConstraintLayout>
This way, the ContentFragment fills the space between HeaderFragment and FooterFragment, as shown in the picture below :
green = header
blue = content
red = footer
Now I would like to add two views to the ContentFragment layout (one TextView and one ScrollView), so that those views take the whole blue space available.
Here is the layout for ContentFragment :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/lightBlue">
<TextView
android:background="#color/white"
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="#id/right"
app:layout_constraintStart_toStartOf="#id/left"
app:layout_constraintTop_toTopOf="parent"/>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:background="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#id/right"
app:layout_constraintStart_toStartOf="#id/left"
app:layout_constraintTop_toBottomOf="#+id/textView">
<TextView
android:id="#+id/veryLongTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</ScrollView>
<android.support.constraint.Guideline
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.05" />
<android.support.constraint.Guideline
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.95" />
</android.support.constraint.ConstraintLayout>
This is what I get instead :
Can someone explain why there is some space between the bottom of the scrollview and the bottom of the blue part ? It is not what I have defined in the constraints, which is rendered like this in Android Studio :
I am still unsure why this is happening. My guess is that Android cannot compute the right height for the ContentFragment at runtime, because the problem disappears if I define the fragments height using Guidelines as shown below :
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<fragment
android:id="#+id/header"
class="xxx.xxx.xxx.HeaderFragment"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/topLimit"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<fragment
android:id="#+id/content"
class="xxx.xxx.xxx.ContentFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomLimit"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/topLimit" />
<fragment
android:id="#+id/footer"
class="xxx.xxx.xxx.FooterFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/bottomLimit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<android.support.constraint.Guideline
android:id="#+id/topLimit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<android.support.constraint.Guideline
android:id="#+id/bottomLimit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.85" />
</android.support.constraint.ConstraintLayout>
Which is rendered like this :
I need to achieve the following view
I tried using constraint layout:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/segmentedButton">
</FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</Buttons>
</android.support.constraint.ConstraintLayout>
It works well when there are many items, but when there are just 2-3, it shows them in the middle.
Also, I tried using LinearLayout but no luck.
you can use RelativeLayouttoo to get your desired results. By using the below code you can show the items on top if they are 2 or 3 left.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/segmentedButton"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<Button
android:id="#+id/segmentedButton"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
try with linear layout, weight property should push the button to align at the end of parent
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_weight="1"
>
</FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
>
</Buttons>
</LinearLayout>
I supposed here that Buttons stand for a custom Button you made
Just add Top Constraint to your FrameLayout, should fix your issue.
Your final layout will be 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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/segmentedButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"></FrameLayout>
<Buttons
android:id="#+id/segmentedButton"
android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"></Buttons>
</android.support.constraint.ConstraintLayout>
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/segmentedFrame"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/segmentedButton"
android:background="#drawable/bg_scan_edittext">
</FrameLayout>
<Button
android:id="#+id/segmentedButton"
android:layout_width="wrap_content"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/segmentedFrame"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</Button>
</android.support.constraint.ConstraintLayout>
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.