steady distance between LinearLayout items and recyclerview - android

I'm looking for a way to make the LinearLayout containing two buttons be steady compared to the recyclerview. In particular i'm trying to place it like this but with one more button .
Here is my xml code:
<?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=".ui.a.TSport">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteX="-26dp"
tools:layout_editor_absoluteY="338dp">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
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.078" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Button" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="56dp"
android:layout_height="62dp"
android:layout_gravity="right"
android:layout_marginLeft="200dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.929"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.942"
app:srcCompat="#drawable/ic_add_black_24dp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem comes when i have two buttons and i add some items : for each added item the linearlayout containing two buttons moves down until it disappear.


first, remove LinearLaypit and use ConstraintLayout.
it's easy
<?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" >
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="16dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="16dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_launcher_background" />
</androidx.constraintlayout.widget.ConstraintLayout>
but only LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:weightSum="10">
<com.google.android.material.appbar.AppBarLayout
android:layout_weight="0.75"
android:layout_height="0dp"
android:layout_width="match_parent" >
<androidx.appcompat.widget.Toolbar
android:background="?attr/colorPrimary"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_weight="8.25"
android:background="#android:color/transparent"
android:id="#+id/recyclerView"
android:layout_height="0dp"
android:layout_width="match_parent"
android:padding="4dp"
android:scrollbars="vertical" />
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="match_parent"
android:weightSum="10"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_gravity="left"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="Button" />
<View
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="10dp"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:clickable="true"
android:id="#+id/floatingActionButton"
android:layout_gravity="right"
android:layout_height="62dp"
android:layout_width="0dp"
android:layout_weight="2"/>
</LinearLayout>
</LinearLayout>


If you want to place both buttons at bottom than you have to make 2 changes
First you need to add android:layout_weight="1" and second replace android:layout_height="wrap_content" with android:layout_height="0dp" for your RecyclerView. This will give full size to your recyclerview until bottom views are visible.
You complete recyclerview should look like this:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
/>
NOTE: Here from RecyclerView I have removed constraint, because its parent is LinearLayout, so need to use constraint here.
OPTIONAL: Also I notice that you have used ConstraintLayout and it has only 1 child LinearLayout and also LinearLayout has not any constraint given, So if ConstraintLayout has not required you should remove it and only use LinearLayout as parent.

Related

Arrange a BottomNavigationView, a FAB, and a FrameLayout in a CoordinatorLayout and make it work with Snackbar

I want to place a FrameLayout for hosting Fragments, a BottomNavigationView and a FAB inside a CoordinatorLayout. I would like to display a Snackbar over the BottomNavigationView and FAB to move up and down to accommodate the Snackbar. I have come up with the following layout but I am unable to get Snackbar and FAB behavior correctly.
<?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:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".landingpage.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/fragment_cont"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_main_activity_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/extended_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="16dp"
android:layout_marginBottom="72dp"
android:contentDescription="#string/cont_desc"
android:text="#string/chat"
app:icon="#drawable/ic_baseline_chat_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
If I set LayoutParams like in this post then that margin 72dp margin is also displayed throwing FAB way up in the layout. If I don't use the margin the FAB will be stacked over the BottomNavigationView. I can use addCallback to set FAB margins programattically. Then also it will jump and then align itself to the right position. Overall it is not a good experience UX wise.

I would like to display a Snackbar over the BottomNavigationView
and FAB to move up and down to accommodate the Snackbar. I have come
up with the following layout but I am unable to get Snackbar and FAB
behavior correctly.
You get a bad behavior because you're trying to achieve something which is not common or maybe, not implemented this way by using BottomNavigationView and FAB together. It's actually more common to use FAB & BottomAppBar at the bottom of a layout.
Then also it will jump and then align itself to the right position.
Overall it is not a good experience UX wise.
Although it's not a good experience for users from a UX view, however, here are the approaches I may suggest:
Best approach : Using another CoordinatorLayout inside LinearLayout (Supported the FAB animation):
Code:
<?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"
android:id="#+id/main_layout"
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/ThemeOverlay.AppCompat.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="Test" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/fragment_cont"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/SnackBar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/extended_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:text="Chat"
android:textColor="#color/white"
app:icon="#drawable/ic_baseline_send_24"
app:iconTint="#color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
app:menu="#menu/escrow_menu" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And in Kotlin side:
extended_fab.setOnClickListener {
val snack: Snackbar = Snackbar.make(SnackBar, " Successfully ...!", Snackbar.LENGTH_SHORT)
snack.show()
}
2. BottomAppBar & FAB & setAnchorView() method without FAB animation
Anchored to FAB
Code:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.core.widget.NestedScrollView
android:id="#+id/content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- your FrameLayout maybe -->
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:text="SHOW SnakeBar"
app:layout_anchor="#+id/content_layout"
app:layout_anchorGravity="center" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="Test" />
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
app:layout_anchor="#id/bar" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:backgroundTint="#color/colorPrimaryDark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:textColor="#FFFFFF"
android:visibility="invisible">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
<TextView
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?android:attr/selectableItemBackground"
android:drawableTop="#drawable/ic_baseline_send_24"
android:gravity="center"
android:orientation="vertical"
android:text="Personal"
android:textColor="#FFFFFF">
</TextView>
</LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
3. Using FAB - BottomNavigationView - ConstraintLayout without FAB animation
Code:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floating_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:backgroundTint="#color/colorPrimary"
app:elevation="10dp"
app:layout_constraintBottom_toTopOf="#id/navigation"
app:layout_constraintLeft_toRightOf="#id/navigation"
app:layout_constraintRight_toLeftOf="#id/navigation"
app:layout_constraintTop_toBottomOf="#id/navigation"
app:layout_constraintTop_toTopOf="#id/navigation"
app:layout_insetEdge="bottom" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimaryDark"
android:visibility="visible"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/escrow_menu" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="290dp"
android:layout_marginBottom="485dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Problem integrating a toolbar into an recyclerview

I have a problem and I need your help. I have created a RecyclerView and it was okay. Now I want to have a toolbar at the top with a black background and red text. The RecyclerView, which is basically a list of items, should start under the toolbar. I inserted a toolbar but unfortunately it is not displayed at all, altough in the blueprint of Android Studio it can be seen. However, on the normal layout screen you can't see it and also on the editor you can't see it. Here I have some screenshots:
Here is the XML layout file:
<?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"
tools:context=".MyDrinks">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="432dp"
android:layout_height="135dp"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp"
android:text="Test Toolbar" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:scrollbars="vertical"
android:background="#android:color/white"
></androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>
Does anyone know what the problem might be? So basically the toolbar is not displayed at all and secondly the recyclerview list starts at the very top which I do not want. I'd appreciate every feedback.

The Recyclerview is overlapped with the Toolbar. Add this to the RecyclerView
android:layout_below="#+id/toolbar_mainActivity"
You XML should be like this:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="432dp"
android:layout_height="135dp"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp"
android:text="Test Toolbar" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:scrollbars="vertical"
android:layout_below="#+id/toolbar_mainActivity"
android:background="#android:color/white"
></androidx.recyclerview.widget.RecyclerView>

you can use LinearLayout or RelativeLayout
LinearLayout means you can align views one by one (vertically or horizontally).
RelativeLayout means based on relation of views from its parents and other views.
LinearLayout :
<?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="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center"
android:text="Test Toolbar"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="4dp"
android:scrollbars="vertical" />
</LinearLayout>
or RelativeLayout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center"
android:text="Test Toolbar"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar_mainActivity"
android:background="#android:color/white"
android:padding="4dp"
android:scrollbars="vertical" />
</RelativeLayout>
ConstraintLayout :
<?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"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/black"
android:clipToPadding="true"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark"
tools:ignore="MissingConstraints">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center"
android:text="Test Toolbar"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp" />
</androidx.appcompat.widget.Toolbar>
<ImageButton
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar_mainActivity"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#id/toolbar_mainActivity" />
</androidx.constraintlayout.widget.ConstraintLayout>
Could I help you?

Add SearchView to RecyclerView List

I have a recyclerview populated with a list from an API. I am using RxBinding to search and filter the list. The current problem is with my layout. I would like my search bar field at the top with the list beneath it. Below is an example of my list being filtered but as you can see the searchbar text and the List Items overlap
Now below is the layout file.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/listRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/searchView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="start|center_vertical"
android:layout_weight="1"
android:background="#android:color/transparent"
android:inputType="text" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end|center_vertical"
android:src="#android:drawable/ic_menu_search" />
</FrameLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
</FrameLayout>
Eventually I want the searchbar to be scrollable as well, so that when the user scrolls down the list, the searchbar will be rotated out. However I think this will involve me created a list of some CommonInterface which my both my SearchBar and ListItems would have to implement.

Use RelativeLayout like this so that recyclerView is below the editText and add a scrollView so that the scrolling happens on the whole layout:
<?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"
android:animateLayoutChanges="true"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/listRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/edit"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/searchView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="start|center_vertical"
android:layout_weight="1"
android:background="#android:color/transparent"
android:inputType="text" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end|center_vertical"
android:src="#android:drawable/ic_menu_search" />
</FrameLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
And add this in your RecyclerView in Java:
recyclerView.setNestedScrollingEnabled(false);

You can try this layout
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#color/atehensGray"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/chrome_grey"
android:fitsSystemWindows="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#drawable/rounded_corners"
android:gravity="top"
android:hapticFeedbackEnabled="true"
android:orientation="horizontal"
android:visibility="visible"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1.0" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:id="#+id/recyclerView_main"
android:layout_width="0dp"
android:layout_height="0dp"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
</android.support.constraint.ConstraintLayout>

Fixed button at bottom with RecyclerView and CollapsingToolbar

I'm trying to keep a button fixed at bottom when user's scrolling a RecyclerView. This is what I tried:
<?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"
tools:context=".AddProduct">
<android.support.design.widget.AppBarLayout
android:id="#+id/product_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="teste"
android:textColor="#161616"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="138dp"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
And then I used AppBarLayout.OnOffsetChangedListener to adjust button margin according by user scrolling.
It worked, but if user scroll a little fast, it can't adjust the margin very well and the button don't appear to be fixed. It's not reliable.
So, how is the best way to do this?

Maybe you can use a ConstraintLayout instead of your RelativeLayout as below:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/btn_product_add_product"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</android.support.constraint.ConstraintLayout>

SwipeRefreshLayout + another view

I have my layout setup as follows:
<?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="wrap_content">
<include layout="#layout/my_toolbar" />
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.my.SubView
android:id="#+id/my_list_subview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white" />
</android.support.v4.widget.SwipeRefreshLayout>
<TextView
android:id="#+id/text_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/padding_medium"
android:layout_margin="#dimen/padding_medium"
android:text="Hello"
android:textSize="14sp"
android:maxLines="3"/>
</LinearLayout>
The problem is that the SwipeRefreshLayout takes up the entire screen and the textview doesn't show up at all.
The blue line in the above image is where the text view is. Is there anything I am missing? This seems to be so simple a problem, its ludicrous!
Image 2 in response to the answer by #Tomar

try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/my_toolbar"
android:id="#+id/top_layout"/>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_above="#+id/text_content"
android:layout_below="#+id/top_layout"
android:layout_height="wrap_content">
<com.my.SubView
android:id="#+id/my_list_subview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white" />
</android.support.v4.widget.SwipeRefreshLayout>
<TextView
android:id="#+id/text_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/padding_medium"
android:layout_margin="#dimen/padding_medium"
android:text="Hello"
android:textSize="14sp"
android:layout_alignParentBottom="true"
android:maxLines="3"/>
</RelativeLayout>

As I mentioned above, I worked it out with ConstraintLayout as below. I do not know why I need to use a large bottom margin and padding in the swipe refresh layout for it to sit above the text. Without these, it doesn't work!
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
xmlns:app="http://schemas.android.com/apk/res-auto">
<include layout="#layout/toolbar"
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/padding_large"
android:paddingBottom="#dimen/padding_super_large"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
app:layout_constraintBottom_toTopOf="#+id/text_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<com.my.SubView
android:id="#+id/my_list_subview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/white"/>
</android.support.v4.widget.SwipeRefreshLayout>
<EditText
android:id="#+id/text_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/white"
android:hint="#string/write_message"
android:textSize="14sp"
android:maxLines="3"
android:padding="#dimen/padding_medium"
android:paddingLeft="#dimen/padding_large"
app:layout_constraintTop_toBottomOf="#+id/swipe_refresh"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:visibility="visible"
tools:layout_editor_absoluteX="0dp" />
</android.support.constraint.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/srl_reload_list"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView_openOrderList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources