RecyclerView doesn't animate when it's inside a NestedScrollView - java

My RecyclerView doesn't animate when scrolling. I've narrowed down the problem to the NestedScrollView that the RecyclerView is in. When the RecyclerView is outside the NestedScrollView it animates fine. But when it's in the NestedScrollView it doesn't. How can I animate the RecyclerView while keeping it in the NestedScrollView?
Here's the relevant layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mainToolbar">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/tab_anim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:background="#android:color/transparent"
app:elevation="0dp">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/searchToolbar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:background="#A106A1"
android:elevation="2dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways">
<!-- dummy to catch focus -->
<LinearLayout
android:layout_width="0px"
android:layout_height="0px"
android:focusable="true"
android:focusableInTouchMode="true" />
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:layout_marginEnd="35dp"
android:layout_marginRight="35dp"
android:animateLayoutChanges="true"
android:layoutDirection="rtl"
app:iconifiedByDefault="true"
app:searchHintIcon="#null" />
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingHorizontal="1dp" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And here's the animation applied in the RecyclerView adapter:
#Override
public void onBindViewHolder(#NonNull MyViewHolder holder, int position) { //binds the data to the view
holder.container.setAnimation(AnimationUtils.loadAnimation(holder.container.getContext(),R.anim.fade_out));
holder.nameTextView.setText(labels[position]);
holder.packageNameTextView.setText(packageNames[position]);
holder.iconImageView.setImageDrawable(drawables[position]);
}
Update: Here it is using the CollapsingToolbarLayout instead of NestedScrollView. How do I make the toolbar scroll?
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mainToolbar">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/tab_anim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:background="#android:color/transparent"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/searchToolbar"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:background="#A106A1"
android:elevation="2dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll">
<!-- dummy to catch focus -->
<LinearLayout
android:layout_width="0px"
android:layout_height="0px"
android:focusable="true"
android:focusableInTouchMode="true" />
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:layout_marginEnd="35dp"
android:layout_marginRight="35dp"
android:animateLayoutChanges="true"
android:layoutDirection="rtl"
app:iconifiedByDefault="true"
app:searchHintIcon="#null" />
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="3dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

It is not a good way to put RecyclerView inside NestedScrollView. If you want to make SearchBar above RecyclerView, you can check this.
You can also check this refference.

I checked your xml and modified it. It is working on my side. Please modify it according to your UI requirements.
N.B.: Check after populating data on recyclerview. First it may seem it is not working due to no data on recyclerview.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true"
tools:context=".MainActivity"
xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/tab_anim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|top"
android:fitsSystemWindows="true"
android:background="#android:color/transparent"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar_scrolling">
<LinearLayout
android:layout_width="0px"
android:layout_height="0px"
android:focusable="true"
android:focusableInTouchMode="true" />
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:layout_marginEnd="35dp"
android:layout_marginRight="35dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:animateLayoutChanges="true"
android:background="#drawable/rounded_bg"
android:layoutDirection="rtl"
app:iconifiedByDefault="true"
app:searchHintIcon="#null" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="3dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In activity:
getSupportActionBar().setBackgroundDrawable(getResources()
.getDrawable(R.drawable.rounded_bg_action_bar));
rounded_bg_action_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
<corners android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp" />
</shape>
rounded_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_purple" />
<corners android:bottomLeftRadius="100dp"
android:bottomRightRadius="100dp" />
</shape>

Related

Scrollview not scrolling on android with multiple lists

I was getting started with android app development and my requirement is to add a list with some headers in it. I managed to implement this using a combinations of textView and listView. Following is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
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:animateLayoutChanges="true"
android:fillViewport="true"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.home.HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical"
android:padding="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Header 1" />
<ListView
android:id="#+id/list1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/sports_array" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Header 2" />
<ListView
android:id="#+id/list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/sports_array" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Header 3" />
<ListView
android:id="#+id/list3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/sports_array" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Header 4" />
<ListView
android:id="#+id/list4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/sports_array" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
And sports_array is equal to:
<string-array name="sports_array">
<item>Shuttle Badminton</item>
<item>Tennis</item>
<item>FootBall</item>
<item>Basket Ball</item>
<item>Table Tennis</item>
<item>Chess</item>
<item>Hockey</item>
</string-array>
Now the problem is that it loads all the lists on the UI but it doesn't scroll down to make the elements visible that are not displayed.
Solved this by using custom listView that are not scrollable.
Ref: Non-scrollable ListView inside ScrollView

RecyclerView Search FIlter results are below the Toolbar

This might be a stupid question that I've tried very hard to find the answer with no success. I have a fragment that contains a recyclerView. The fragment is in the mainActivity which contains my custom toolbar and a bottonNavigationMenu. I've also made a search filter view for the recyclerView that works. The problem is this:
When I hit on the search for the recyclerView the first 2 results are below the Toolbar, thus not visible to the user. I had this problem with recyclerView (even when not using the search filter) and fixed it using the margins. But I don't know how to fix this one, so if you could help me out I'd really appreciate it.
Note: the search filter works just fine, I used prints to test it, it's just that the 2 first results are below the toolbar and not visible.
Fragment's xml:
<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"
android:paddingTop="?attr/actionBarSize"
tools:context=".MainFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/chatsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_marginBottom="70dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.674"
tools:layout_editor_absoluteX="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
RecyclerViewItem xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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:layout_margin="3dp"
app:cardBackgroundColor="#FF5733"
app:cardCornerRadius="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewChatCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/app_name"
android:textColor="#color/white"
android:textSize="50sp"
android:layout_marginStart="10dp"/>
<Button
android:id="#+id/joinButtonChatCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:backgroundTint="#color/black"
android:text="#string/join"
android:textColor="#color/white"
app:cornerRadius="50dp"
android:layout_marginEnd="10dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
SearchFilter's xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/searchFilterChats"
android:title="#string/search"
android:icon="#drawable/search_icon"
app:actionViewClass="androidx.appcompat.widget.SearchView"
app:showAsAction="always|collapseActionView"
/>
</menu>
MainActivity xml:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/appToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:titleMarginStart="80dp"
app:titleTextColor="#color/white"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="409dp"
android:layout_height="673dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
The search results I get-> [1]: https://i.stack.imgur.com/DmyIk.png
The problem is the constraint that have FragmentContainerView and BottomNavigationView .
Here's convenient that BottomNavigationView have a fixed size.
And FragmentContainerView set limit to top with #+id/appBarLayout2 and limit to bottom with #+id/bottomNavigationView.
The MainActivity xml would be:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/appToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:titleMarginStart="80dp"
app:titleTextColor="#color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
<!--this was modified-->
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout2"
app:navGraph="#navigation/navigation" />
<!--this was modified-->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>

collapsingtoolbarlayout recyclerview working separately

Collapsing toolbar layout and the recycler view should work together while swiping but working separately.
suggest to me what to do! given below are my code and resulting gif part of my project.
the toolbar layout is not showing fully if I swipe the screen from bottom to top.
the toolbar layout is closed and only return if I swipe to toolbar layout separately.
i want to toolbar layout to be in the same manner when i swipe the screen up and down.
Code of my layout
<?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=".ui.review.reviewActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collaps_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="center_vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="TODO"
android:src="#drawable/cover_image"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<TextView
android:id="#+id/textView_title"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="center_horizontal"
android:layout_marginTop="130dp"
android:gravity="center"
android:maxLines="1"
android:text="title"
android:textColor="#FFF"
android:textSize="24sp" />
</FrameLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/Theme.AppTheme.PopupOverlay"
app:layout_collapseMode="parallax" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/review_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Final result
Try this:
<?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/itineraryListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:windowBackground">
<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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<Button
android:id="#+id/button_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_start_margin"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/activity_end_margin"
android:background="#null"
android:clickable="true"
android:drawableStart="#drawable/ic_arrow_booking_details"
android:gravity="start|center_vertical" />
<ImageView
android:id="#+id/iv_background_image"
android:layout_width="match_parent"
android:layout_height="#dimen/_123sdp"
android:contentDescription="#string/name_app"
android:scaleType="centerCrop"
app:srcCompat="#drawable/booking_details_background" />
<ImageView
android:id="#+id/iv_background_rectangle"
android:layout_width="match_parent"
android:layout_height="#dimen/_123sdp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:srcCompat="#drawable/rectangle_booking_details" />
<TextView
android:id="#+id/tv_background_title"
style="#style/font_title_bookingdetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_start_margin"
android:layout_marginTop="95dp"
android:layout_marginEnd="#dimen/activity_end_margin"
android:gravity="start|center_vertical"
android:text="#string/text_trek_everest_name"
android:textColor="#color/colorPrimary" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="26dp" />
<androidx.appcompat.widget.Toolbar
android:layout_width="?attr/actionBarSize"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title_itinerary_list"
style="#style/font_title_day1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_start_margin"
android:layout_marginTop="#dimen/_15sdp"
android:layout_marginBottom="#dimen/activity_end_margin"
android:gravity="center_vertical"
android:text="#string/dashboard_itinerary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.235" />
<include layout="#layout/booking_itinerary_recyclerview" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</FrameLayout>
This is the output of this code.

How to add persistent buttons to a Navigation Drawer?

I want to replicate the Navigation Drawer similar to that of the LinkedIn App below:
Note that the message, notification, and the settings buttons at the top are persistent and are not part of the scrollable list.
I've followed the official Android tutorial for Navigation Drawer as well as numerous other tutorials that simply do not provide additional light into how I can achieve this.
The best I could think of was to add 3 ImageButtons to the header layout of the Navigation Drawer template in Android Studio 2.1.1.
EDIT: As per Prat's and a few others advice, I've included an additional header layout just before the drawer that contains the 3 buttons, but no matter the z-ordering of the layouts within the xml, it seems to hide behind the drawer. See image illustration below:
Below are the layout files:
header.xml (contains the 3 buttons)
<?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="match_parent"
android:gravity="right"
android:background="#111">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
nav_header_main.xml (default generated header)
<?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="match_parent"
android:gravity="right"
android:background="#111">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff">
<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="false"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<include
android:id="#+id/header"
layout="#layout/header"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Try to do like this :
header.xml(top most layout where you have 3 images)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
</LinearLayout>
nav_header_main( default android header)
<?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="#dimen/nav_header_height"
android:background="#drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:src="#android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:text="Android Studio"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio#android.com" />
</LinearLayout>
then finally the main layout showing
header(top)
nav_main_header
listview
<!-- The main content view -->
<FrameLayout
android:id="#+id/flFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111">
<include android:id="#+id/header"
layout="#layout/header"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:layout_height="100dp"/>
<include android:id="#+id/header2"
layout="#layout/nav_header_main"
android:layout_width="fill_parent"
android:layout_below="#id/header"
android:layout_height="100dp"/>
<ListView
android:id="#+id/lvDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:layout_below="#id/header2"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</RelativeLayout>
Use recyclerview with adapter for this. You can implement any structure of custom views for items.

Navigation drawer onClick in items ripple effect lost

Using the new appcompat-v21 I try to build a navigation drawer.. The first time I didn't write any background color or drawable and the navigation drawer started with a transparent background!! So strange! But, when I clicked in the items of it I could see the ripple effect of Android lollipop. (Amazing). So I tried to put a white background like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".HomeActivity"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
</RelativeLayout>
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffff"/>
</android.support.v4.widget.DrawerLayout>
The navigation drawer now is white and so it's correct. But with this background I lost the ripple effect in the item click. My item XML is this one:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="?android:selectableItemBackground"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/spinnerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="13dp"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/sfondomappa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_weight="0"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/banner_nav" />
<TextView
android:id="#+id/drawerWelcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/sfondomappa"
android:layout_centerHorizontal="true"
android:background="#40000000"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Hola"
android:textColor="#color/ldrawer_color"
android:textSize="14sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/headerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<TextView
android:id="#+id/drawerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center_horizontal"
android:layout_margin="12dp"
android:fontFamily="sans-serif-regular"
android:gravity="center_horizontal"
android:textColor="#color/main_orange"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/itemLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="?android:attr/activatedBackgroundIndicator"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/drawer_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="3dp" />
<TextView
android:id="#+id/drawer_itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="32dp"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:textColor="#E4000000"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I even wrote this android:background="?android:selectableItemBackground" in my root layout but nothing change.. How can I solve?
EDIT:
I wrote again the listview of my drawer in this way
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginRight="72dp"
android:background="#android:color/white"
android:choiceMode="singleChoice"
android:divider="#00000000"
android:dividerHeight="1.00dp"
android:elevation="2dp"
android:longClickable="false"
android:orientation="vertical"
android:overScrollMode="never"
android:scrollbars="none" />
and the ripple works. But now i lost the current position i clicked.
I've faced the same problem ... the solution is not documented good enough, but here it is.
Create a selector drawable in your drawable-v21 folder:
v21/activated_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/primary_dark" android:state_activated="true" />
<item android:drawable="#color/primary" android:state_checked="true" />
<item android:state_pressed="true">
<ripple android:color="#color/primary" />
</item>
<item android:drawable="#color/background_light" />
</selector>
As you can see in the code above, the magic is done by adding the <ripple ... /> element above. It's available in v21+ only, so that's why you have to declare separate selectors for -v21 and normal.
Lastly, just put this selector drawable as background of the desired element, in your case the ListView item.

Categories

Resources