Develop Reference

Failed making scrollable a ConstraintLayout in an Android Fragment

Recently I tried to create a fragment and the LinearLayout is bigger than the screen and I need to use the ScrollView. I've tried different ways reading other questions in Stackoverflow and I couldn't resolve the issue.
This is my XML Code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="wrap_content">
<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=".ui.configuration.ConfigurationFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:ignore="MissingConstraints">
<TextView
android:id="#+id/text_configuration_first_tittle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/configuration_first_title"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Any idea?

Resolved... The scrollview was working.
I only need to add marginBotton with enough height size to considere the Botton Navigation Bar

ScrollView isn't placed below ToolBar

I faced with the following problem: ScrollView in my activity should be placed below ToolBar. Here's the layout of this activity:
<?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=".SongLyricsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000FF"
tools:ignore="MissingConstraints" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/lyrics_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
</android.support.constraint.ConstraintLayout>
But when I run the app, I see this:
I don't understand, why it happens, as I position it below the toolbar, so, what's the matter?

I solved this problem using a marginTop parameter (equals to toolbar height), like this:
<ScrollView
android:id="#+id/activity_show_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:background="#color/transparent_background"
>
This works for my app.

This is happening because your scroll views height is match_parent and not 0dp - so your scroll view will not respect your constraints and will spread all over your screen.
Please notice that you are using tools:ignore="MissingConstraints" and the tool attribute will only affect the preview so you will see your layout in a different way from the preview.
In addition, you were missing some constraint - app:layout_constraintTop_toTopOf="parent"
Now with that constraint, it should work:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0000FF"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="16dp">
<TextView
android:id="#+id/lyrics_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

you might try:
<LinearLayout>
vertical
<RelativeLayout>
<Toolbar>
someID
parent top
parent left
<Scrollview>
below someID
parent left

Fit entire screen (bottom and status bar) ViewPager

I am having trouble in filling entire screen with my background. I have my main_activity with green background to check if it fills entire screen and it works. The main activity properly fills entire screen as I want.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:background="#color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.viewpager.widget.ViewPager
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="start"
/>
<!--android:layout_marginTop="-20dp"
android:layout_marginBottom="-20dp"/-->
<com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
android:id="#+id/pager_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:dotsColor="#color/colorPrimaryDark"
app:dotsStrokeColor="#color/colorPrimaryDark"
app:dotsCornerRadius="8dp"
app:dotsSize="16dp"
app:dotsSpacing="4dp"
app:progressMode="true"
android:layout_marginTop="25dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Now I have my fragment with orange background. I have set width and height to match parent and also fitSystemWindows, same as in main activity, but it doesnt fit 100% - status bar and bottom bar are unaffected.
<?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/constraintLayout"
android:background="#drawable/pantry_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<TextView
android:id="#+id/label"
android:text="#string/fragment_pantry"
app:layout_goneMarginTop="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_constraintTop_creator="1"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginTop="75dp"
android:layout_marginBottom="#dimen/activity_vertical_margin"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The effect is visible on screen below. I tried a simple workaround with negative margins but I am afraid of how it will work on other devices.
PS: Phone has notch ... doubt that has anything to do with it.

try this code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="#+id/SliderDots"
android:orientation="horizontal"
android:gravity="center"
android:layout_marginBottom="20dp"
android:layout_gravity="center_horizontal|bottom|center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</FrameLayout>

Add these lines of code in your Activity on before setContentView(R.layout.activity_main);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main);

LinearLayout isn't shown when included in content layout

I have a activity_pic.xml layout which includes content_pic.xml to define the layout of my app. The activity_pic.xml is below:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.olivia.myapplication.PicActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_pic" />
</android.support.design.widget.CoordinatorLayout>
content_pic.xml is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
When I include the line <include layout="#layout/content_pic" /> within the AppBarLayout (that is, I move it up two lines) the button appears, and all the functionality of the button works. However when I put it after that, the button does not appear, and all I can see is the 'App Bar' bit of the layout.
Ok so the picture below shows how I would like it to look (and how the design view shows content_pic.xml)
And here is what it actually looks like
However, when I put the <include layout="#layout/content_pic" /> into the AppBarLayout I can see the button, as shown in the image below.
I have tried taking the content of content_pic.xml and including it directly instead of using the include statement, this still does not appear.
I've run out of ideas here - can anyone suggest what might be going wrong?

AppBarLayout works good if you us NestedScrollView or RecyclerView
so I suggest you change your content_pic.xml TO.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text"/>
<ImageView
android:id="#+id/image_view"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</LinearLayout>
I hope this will Help.
EDIT
You Just need to Change your content_pic.xml to this
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
<!-- Importent -->
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/pick_image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

RecyclerView and Toolbar, can't scroll bottom item into view

EDIT: See Using the Master/Detail template in ViewPager Fragments (download link) for full code
I have a toolbar and a recyclerView. When the layout is first inflated the last item of the recyclerView is out of the scroll-able region of the screen and is therefore not visible. After rotating the item appears. It is apparent that the toolbar is pushing the recyclerView outside the boundaries of the screen. If I add padding to the bottom of the recyclerView with the height of the toolbar the issue is resolved BUT only for the initial inflation of the layout. After rotation I am left with a gap on the bottom of the screen. I'm using sdk 23.
A possible workaround would be to programmatically remove the padding after the very first inflation of the layout. I assume I could use:
onCreateView(){ if (onSaveInstanceState != null) removePadding();}
However, I'd rather not have to do a dodgy work-around.
My app is basically exactly the same as the Master/Detail-flow template supplied in Android Studio, except that I use fragments and a single Activity. There is no such issue in the template.
Any ideas?
fragment_item_list.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/item_list" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
item_list.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView 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/item_list"
android:name="com.idragonit.scrolltabs.ItemListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:layoutManager="LinearLayoutManager"
tools:context="com.idragonit.scrolltabs.ItemListActivity"
tools:listitem="#layout/item_list_content" />
item_list_content.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:textAppearance="?attr/textAppearanceListItem" />
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:textAppearance="?attr/textAppearanceListItem" />
</LinearLayout>
snippet of ItemListFragment.java
Toolbar toolbar = (Toolbar) root.findViewById(R.id.toolbar);
toolbar.setTitle("List");

I added:
android:layout_gravity="fill_vertical"
android:layout_marginBottom="?attr/actionBarSize"
to item_list.xml. The issue persists. The first time the layout is inflated it shows the bottom element as expected. After rotating to landscape and back to portrait it leaves a margin the size of the actionBar at the bottom of the screen.
This issue does not happen in the Master/Detail-flow template available in Android Studio and the code for item_list.xml, item_list_twopane.xml and activity_item_list are exactly the same as the code used in item_list.xml, land/item_list.xml and fragment_item_list.xml in my project. Yet, as the attached images show, the preview of the AppBar shows the flexible space in the Android template but not my code.
EDIT: When I click on the reference for "?attr/actionBarSize" in the template it navigates to a different line in android SDK's values.xml, which starts with <declare-styleable name="AppCompatTheme">. The same line of code in my app references a different line starting with<declare-styleable name="Theme">.
Screenshots:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/item_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:scrollbars="vertical" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:src="#drawable/ic_add"
app:backgroundTint="#color/colorPrimary" />
</android.support.design.widget.CoordinatorLayout>

You must add
android:layout_paddingBottom="?attr/actionBarSize
Instead of
android:layout_marginBottom="?attr/actionBarSize
This works for me