I'm trying to create an app which uses a DrawerLayout to show several options which are used to influence the results presented do the user. Here's an emulator capture that shows the current result:
Now, I'm also using a Toolbar with the only purpose of showing the open menu button on the top left of the screen:
In order to achieve this, I've followed the steps described on the official documentation. Here's the XML for my main activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/toolbar"
android:fitsSystemWindows="true">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:background="#FFE7E8ED">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:titleTextColor="@color/colorWhite" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swiper"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/lista"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="true"></android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.constraint.ConstraintLayout>
</FrameLayout>
<!-- Container for contents of drawer - use NavigationView to make configuration easier -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer_viewer" />
</android.support.v4.widget.DrawerLayout>
I've added a SwipeRefreshLayout to let the users refresh the data that is shown in the RecyclerView. In this case, I've got nested RecyclerViews because the data I need to show is grouped by category:
category A
news 1
news 2
category B
news 3
....
Now, my problem is that when the app loads, it will "jump" to the cardview that wraps the list of news. This image shows the problem I'm facing:
The red box shows where the beginning of the category item is (just some plain text). Just to make my point clear, here's another screen capture of the layout tool:
As you can see, the title is there, but it gets scrolled up behind the toolbar. It's as if the inner list promotes itself for the top of the screen...
Just to be thorough, I'm also showing the layouts I'm using in the top RecyclerView's item template:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/catalog_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="20dp"
android:textAlignment="inherit"
android:textAppearance="@android:style/TextAppearance.Material.WindowTitle"
android:textColor="@android:color/darker_gray"
android:textSize="16sp"
android:textStyle="bold" />
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:cardElevation="4dp">
<android.support.v7.widget.RecyclerView
android:id="@+id/lista_noticias"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:clipToPadding="false">
</android.support.v7.widget.RecyclerView>
</android.support.v7.widget.CardView>
</LinearLayout>
And here is the template I'm using for the inner RecyclerView's item template
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="140dp"
android:maxHeight="140dp"
android:minHeight="140dp"
card_view:cardCornerRadius="0dp"
card_view:contentPadding="2dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/logo"
android:layout_width="73dp"
android:layout_height="73dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:adjustViewBounds="false"
android:scaleType="fitXY"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toTopOf="parent"
card_view:srcCompat="@mipmap/ic_launcher" />
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="center_vertical"
android:lines="1"
android:textAppearance="@android:style/TextAppearance.Material.Title"
android:textSize="16sp"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toEndOf="@+id/logo"
card_view:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/description"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_below="@id/title"
android:layout_marginBottom="32dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:gravity="top|center_vertical"
android:lines="3"
android:text="Name"
android:textAppearance="@android:style/TextAppearance.Material.SearchResult.Subtitle"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toEndOf="@+id/logo"
card_view:layout_constraintTop_toBottomOf="@+id/title"
card_view:layout_constraintVertical_chainStyle="spread_inside" />
<TextView
android:id="@+id/publishDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:text="10/10/2018 13:50"
android:textAppearance="@android:style/TextAppearance.Material.Small"
android:textSize="10sp"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
As I said, it's as if the news lists scrolls the UI so that it shows the first item. I've also noticed that if there aren't enough items for getting a scroll on the first group, then everything works out great. Here's an image that shows that:
However, as soon as I pick one category that has more news than available screen space, then it will simply position the view on the first item of the inner list.
Can someone please tell me what I'm missing?
Thanks guys!
Luis
