AppBarLayout Cuts the Top of the First RecyclerView Item

Question

I have an activity with appbarlayout and recyclerview. What happens when I run my code is that the top of the first recyclerview item is cut off and looks like this:

I have searched for a solution, but most of them say use this line of code: app:layout_behavior="@string/appbar_scrolling_view_behavior, which does not work for me for some reason.

This is my contacts.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".navdraweractivities.ContactsListActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:popupTheme="@style/AppTheme.PopupOverlay">

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/contacts_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="?attr/actionBarSize"
        android:clipToPadding="false"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</RelativeLayout>

EDIT:

Napster's answer gives this:

EDIT 2:

I used this tutorial to add translucent status bar, and after adding it I had recyclerview to fill the entire screen and the first item was seen behind status bar:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    getSupportActionBar().setDisplayShowHomeEnabled(true);
    setContentView(R.layout.navdrawer_contacts_list);
    setStatusBarTranslucent(true);
    ...

protected void setStatusBarTranslucent(boolean makeTranslucent) {

    Rect rectangle = new Rect();
    Window window = getWindow();
    window.getDecorView().getWindowVisibleDisplayFrame(rectangle);
    int statusBarHeight = rectangle.top;
    int contentViewTop =
            window.findViewById(Window.ID_ANDROID_CONTENT).getTop();
    int titleBarHeight= contentViewTop - statusBarHeight;

    View v = findViewById(R.id.appbar);
    if (v != null) {
        int paddingTop = Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT ? getStatusBarHeight() : 0;
        TypedValue tv = new TypedValue();
        getTheme().resolveAttribute(android.support.v7.appcompat.R.attr.actionBarSize, tv, true);
        paddingTop += TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
        v.setPadding(0, makeTranslucent ? paddingTop : 0, 0, 0);
    }

    Log.i("*** Elenasys :: ", "StatusBar Height= " + statusBarHeight + " , TitleBar Height = " + titleBarHeight);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        if (makeTranslucent) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        } else {
            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }
}

public int getStatusBarHeight() {
    int result = 0;
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0) {
        result = getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}
}

My updated xml file:

<?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:id="@+id/bellow_actionbar"   
    android:layout_height="match_parent"
    tools:context=".navdraweractivities.ContactsListActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:popupTheme="@style/AppTheme.PopupOverlay">

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView    
        android:id="@+id/contacts_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

But I still get the top of the first recyclerview item cut off.

Napster · Answer 1 · 2018-01-14T14:48:59.250

0

Convert the main root layout from RelativeLayout to CoordinatorLayout. This is what your layout will look like

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
  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=".navdraweractivities.ContactsListActivity">

  <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:popupTheme="@style/AppTheme.PopupOverlay">

  </android.support.design.widget.AppBarLayout>

  <android.support.v7.widget.RecyclerView
    android:id="@+id/contacts_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

And remove android:paddingTop="?attr/actionBarSize" this line from RelativeLayout to remove the extra space

edited Jan 14 '18 at 14:48

answered Jan 14 '18 at 14:33

Napster

1,353
1
9
11

I have tried this, but what I got is too mach space.I added another image in my question. – Banana Jan 14 '18 at 14:39
remove android:paddingTop="?attr/actionBarSize" this line to remove the extra space – Napster Jan 14 '18 at 14:46
When I remove that line of code I get the first image again... The top of the fist item is cut off – Banana Jan 14 '18 at 14:48
With the `CoordinatorLayout` not without it – Napster Jan 14 '18 at 14:48
Yes, with coordinatorLayout – Banana Jan 14 '18 at 14:50
Have you added any padding programmatically, because the above xml works for me and doesn't show any extra space – Napster Jan 14 '18 at 15:01
I have updated my code above, and I still have the same problem. – Banana Jan 14 '18 at 16:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163150/discussion-between-napster-and-kemo). – Napster Jan 14 '18 at 17:01

score 0 · Accepted Answer · answered Jan 23 '18 at 08:38

I played around and it works now. I am still not sure why it did not work from the start.

This is what it looks like now:

Contacts activity:

super.onCreate(savedInstanceState);
    setContentView(R.layout.navdrawer_contacts_list);
    setStatusBarTranslucent(true);

    // show dialog
    pDialog = new ProgressDialog(this);
    pDialog.setMessage(getString(R.string.loading));
    pDialog.show();

    toolbar = findViewById(R.id.contactsListToolbar);
    setSupportActionBar(toolbar);

    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    getSupportActionBar().setDisplayShowHomeEnabled(true);

Contacts 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".navdraweractivities.ContactsListActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/contactsListToolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ppdColorOrange"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ToolbarWhiteBackArrow">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/contactsListTextView"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/contacts"
            android:textColor="@color/white" />
    </RelativeLayout>
</android.support.v7.widget.Toolbar>

<android.support.v7.widget.RecyclerView
    android:id="@+id/contacts_list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="@color/list_divider"
    android:dividerHeight="1dp"
    android:listSelector="@drawable/list_row_selector" />

</LinearLayout>

AppBarLayout Cuts the Top of the First RecyclerView Item

2 Answers2