Develop Reference

Android Tabs and CoordinatorLayout, need to add a row of textViews

Android Studio 3.5.1. Working with the Tabbed Activity template. I really don't understand the CoordinatorLayout stuff.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ChecklistActivity">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This works great. Using Tabs with ListView on each tab, etc.
But, at the bottom of the screen, I want to add a row of TextViews that contain different status info. (e.g. Time since start, Counts, etc.) So I put a LinearLayout at the bottom of the XML. And added a few TextViews. It shows in Design View in Studio. But at the TOP. But when I launch the App on my phone, I don't see it anywhere.
So in short, how do I work with this XML (CoordinatorLayout) to add such a 'status bar' to my view at the bottom of the screen?

Use a RelativeLayout as the first child inside the CoordinatorLayout. Have the property android:layout_height="wrap_content" and android:layout_alignParentBottom="true" to the TextViews. The rest, i.e. ViewPager and TabLayout can remain as they are.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ChecklistActivity">
<!-- You could even use a ScrollView -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/lilayTextViews"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<LinearLayout
android:id="#+id/lilayTextViews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<!-- TextViews go here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text 1"/>
</LinearLayout>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Buttons not clickable in the upper half

The following buttons display_current_month and display_current_year in a fragment nested in coordinator layout are not clickable in the upper half.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_custom_calendar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp">
<Button
android:id="#+id/display_current_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"/>
<Button
android:id="#+id/display_current_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/display_current_month"
android:layout_marginTop="15dp"/>
<LinearLayout
android:id="#+id/calendar_days_of_week"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/display_current_month"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
The coordinator layout :
<android.support.design.widget.AppBarLayout
android:id="#+id/reminders_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/shape_rounded_rectangle">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/reminders_collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="#+id/calendar_view"
android:layout_width="match_parent"
android:layout_height="380dp"
android:layout_margin="5dp"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Attached screenshot with actual buttons. Any help is much appreciated.
P.S. The buttons seem to have a bottom padding, which allows the buttons to be clicked with ~ 10 dp below their border.

your view pager is located under your toolbar, that's why you can't click on your buttons and your toolbar will get your screen's touchs.
you can put below code inside your ViewPager tag in your xml.
android:layout_marginTop="?android:attr/actionBarSize"

By default buttons are clickable and should get click events callback in java file as well untill you are not setting clickListener dynamically to null.

Layout not adjusting in Landscape mode

I am working on a app in which layout structure is as follows -
Activity A - This activity is a Tab Layout Activity which uses viewpager for tabs and code is given below.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_marginTop="24dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
The fragment that is added to the viewpager has a common layout for all tabs and code is given below.
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="#color/background_app"
tools:context="com.peacecorps.pcsa.safety_tools.SafetyPlanActivity">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/primary_text_default_material_dark"
android:textSize="20sp"
android:textStyle="bold"
android:text="#string/safety_plan_subtitle"/>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/safety_plan_pager"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="320dp" />
<Button
android:id="#+id/actionButton"
style="#style/NavigateButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="#string/see_action"
android:layout_marginTop="10dp" />
</LinearLayout>
As you can see this fragment again contains a viewpager.This viewpager will always be populated by a fragment below.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include android:id="#+id/text_to_show"
layout="#layout/textview"/>
</ScrollView>
where textview is
<?xml version="1.0" encoding="utf-8"?>
<!--This is the common layout used for TextViews-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primary_text_default_material_dark"
android:textSize="#dimen/abc_text_size_medium_material"
android:layout_gravity="center_horizontal"
android:background="#drawable/bg_textview_rounded_rectangle"
android:padding="#dimen/textview_padding"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:autoLink="web|email"
android:textColorLink="#color/text_color_link"
/>
Here textview contains text of different amount which is set dynamically in java for different tabs.
The problem I am facing is that only part of UI is available in landscape mode and some part is lost which is not scrollable too.Please help me, I am stuck on this for a really long time.

The problem you are facing is because you have 2 scrolling behavior. When the phone is on portrait mode it has a lot of space that 320dp height ViewPager won't be able to occupy all the spaces available, but when the phone is on landscape mode 320dp height ViewPager will occupy the whole screen so the layout will only scroll the second view pager, that means that the whole screen on landscape mode will only have access on the second ViewPager.
Remember that the ones on the bottom are the first to be accessed. That means that a view that is on the bottom have a higher z-index - Code Reference not the actual view.

Where do I put my own xml code in activity_main using Androids default tab application

This is the activity_main.xml layout for Androids default tab application:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!-- When I add my own view here and use match_parent, it fills ENTIRE screen, even over the Toolbar. The ViewPager right above does not do this. Why? -->
</android.support.design.widget.CoordinatorLayout>
I am trying to add my own buttons/textviews/etc to my activity_main.xml but I do not know where to add them. The android.support.v4.view.ViewPager uses match_parent although it does not fit the whole screen, it expands across the entire screen besides the Toolbar area at the top. However, whenever I add my own view underneath the android.support.v4.view.ViewPager, lets say RelativeView and set it to match_parent, it expands OVER the Toolbar. This led me to believe that I should put my contents inside the ViewPager tags but that does not work either.
Where should I put my views so that they are not overlapping the Toolbar?

You can wrap your ViewPager in an RelativeLayout and you can add the view child also.
Here is the code snippet which may help you-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button"
android:background="#color/colorNeutral"
android:layout_above="#+id/button2" />
<Button
android:layout_marginBottom="56dp"
android:layout_alignParentBottom="true"
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable too" />
</RelativeLayout>

Set layout below navigationBar in coordinatorLayout android

The question is simple: How to set (any) layout bellow navigation bar in a coordinatorLayout?
If I use a frameLayout in a RelativeLayout, the RelativeLayout height fill the whole screen include the navigationBar.
Here is my code:
<RelativeLayout
android:id="#+id/drawer_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
android:minHeight="?android:attr/actionBarSize"
app:popupTheme="#style/MaterialDrawerTheme.Light.DarkToolbar"
app:theme="#style/ToolbarTheme">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:textColor="#color/icons" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
And the problem (after I added a fragment the frameLayout):
image 1
And the Android Studio preview screen:
image 2
(Sorry for the images, currently i haven't got enough repulation to post directly here :( )

Change android:fitsSystemWindows to false:
android:fitsSystemWindows="false"