Develop Reference

How can I prevent the truncation of a listview by the layout header?

I cannot see the first row of my listview. I am assuming the screen page's header is overlapping with the listview.
My fragment file is follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
android:background="?attr/layout_background_color">
<LinearLayout
android:id="#+id/colors_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<ListView
android:id="#+id/colors_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Any advice tips will be very helpful.
Edit: I am including my activity file 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinator_layout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".views.activities.ColorActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<fragment
android:id="#+id/color_fragment"
android:name="com.microsoft.skype.teams.views.fragments.ColorFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.constraint.ConstraintLayout>
As a hack I am currently adding an extra row of data. Adding the extra row of data is clearly something I wish to avoid.

The issue is your toolbar is taking the height of your first row. To get out of this do something like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
android:background="?attr/layout_background_color">
<LinearLayout
android:id="#+id/colors_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize" // added this line now your
android:orientation="vertical" listview will start below
android:visibility="visible"> toolbar
<ListView
android:id="#+id/colors_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Android element is hidden under bottom dock

So I just created a new basic activity:
activity_chat.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"
tools:context="com.example.nika.chatapp.Chat">
<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_chat" />
</android.support.design.widget.CoordinatorLayout>
content_chat is a layout inside coordinator layout which has
height="match_parent" and I have an element at the bottom of it and it's
hidden beneath bottom deck.
Is there a way to solve this problem ?
content_chat.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.nika.chatapp.Chat"
tools:showIn="#layout/activity_chat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>

Remove app:layout_behavior="#string/appbar_scrolling_view_behavior" from the RelativeLayout in content_chat.xml
Also as another commenter noted, you will want to add a top-margin to your RelativeLayout via android:layout_marginTop="?attr/actionBarSize", so it plays nicely with the AppBarLayout

ViewPager goes below the display?

So I'm trying to make an app have a Tabbed Activity and I'm using this code for the ViewPager.
activity_result_screen_tab.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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.proyo.wshindsight.ResultScreenTab">
<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">
<TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:id = "#+id/toolbartext"
android:text = "Results"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_gravity="center"
android:fontFamily="sans-serif-medium"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
/>
</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" />
</android.support.design.widget.CoordinatorLayout>
The code below is one of the tabs in that Activity.
fragment_text.xml:
<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"
tools:context="layout.TextFragment"
android:id="#+id/framelayout">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:orientation="vertical"
android:id="#+id/vlayout">
</LinearLayout>
</ScrollView>
</FrameLayout>
And in fragment_text.xml TextViews are dynamically added to the LinearLayout.
Now here's the problem. When enough TextViews are added, so that we reach the bottom of the display, it will not show a few of them. The ScrollView works just normally, but I think the ViewPager is not working correctly.
Here's a picture of how it it looks like. It should continue till 15, like the one above it, but for some reason it stops at 10.
Here's a picture of the same page, with scrollbar. If you look at the scrollbar, it is already at the bottom of the screen, while it still scrolls on till 10.
Finally, when checking out the Preview option in Android Studio on the ViewPager component, it also showed that it's going below the screen.
So I highly suspect the fault being in activity_result_screen_tab.xml, but I really wouldn't know what could be wrong there.
EDIT: Still don't have an answer, someone answered to change the layout_heights of fragment_text, but that didn't help either.

View covering action toolbar?

I am trying to create a tool bar associated with an EditText on my scren. Below are the contents of my xml file that I am trying to create:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tool="http://schemas.android.com/tools"
tool:context=".CreatePost"
android:id="#+id/create_post">
<include layout="#layout/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/create_post_toolbar"/>
<!-- Edit text for typing status. Light gray placeholder. -->
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="#d3d3d3"
android:layout_below="#id/create_post_toolbar"
android:hint="Update your friends!"
android:padding="10dp"
android:gravity="top"
android:background="#android:color/transparent"
android:inputType="textMultiLine"
android:id="#+id/type_status"/>
</RelativeLayout>
app_bar.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"
tools:context=".CreatePost">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar_universal"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
However, when I do this, my EditText covers my toolbar. Here is an image to show what happens:
I don't really understand why this is happening, is there anyway to align my EditText so it doesn't cover the toolbar? Thanks!
UPDATE: after adding in Arya's code into mine, my image looks like so, which makes the ActionBar too high. Any ideas on how to fix it?

Your layout, in its current definition, does not make much sense. I think the problem here is that the CoordinatorLayout has been assigned fitsSystemWindows=true. This makes it report its bottom from the very top of the status-bar. On the other hand, the RelativeLayout expects the bottom value from the bottom of the status-bar. This makes your EditText overlap the Toolbar by 25dp - the standard height of a status-bar. You can kind of confirm this by assigning android:fitsSystemWindows="true" to your RelativeLayout with id create_post. In this case, the bottom for CoordinatorLayout will be reported correctly, and the EditText will not overlap the Toolbar.
Usually, the CoordinatorLayout is set to be the parent, and the content (in your case the RelativeLayout) resides as a child of the CoordinatorLayout:
<?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=".CreatePost">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_universal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/create_post">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="#d3d3d3"
android:hint="Update your friends!"
android:padding="10dp"
android:gravity="top"
android:background="#android:color/transparent"
android:inputType="textMultiLine"
android:id="#+id/type_status"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
If you have a specific reason for placing the CoordinatorLayout inside a RelativeLayout, please do share.

<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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/tabheader"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>

<android.support.design.widget.AppBarLayout
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">

Android app toolbar not hiding in scroll

Here is what I tried, the frame layout is fragment.. and that fragment displays a list on screen. when scrolling that list i want toolbar to hide... the code below is not working, what am i doing wrong. i am trying to follow tutorials
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
android:background="#color/purple2"
android:minHeight="56dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/ToolbarTitle" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/line1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:orientation="vertical" >
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp" />
< /LinearLayout>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>

You are missing the indicator of what is the scroll to follow.
Add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your ListView and everything should work.
* EDIT *
Upon further investigation I've discovered that basically the problem is the ListView. It doesn't implement NestedScrollingChild and hence the scrolling behaviour will not work.
The best you can do is transform that ListView into a RecyclerView with a LinearLayoutManager (which basically will look the same).
Other option is to add in Java code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
listView.setNestedScrollingEnabled(true);
}
but of course it will only work on Lollipop.