I want to make a very simple layout. One RecyclerView, one EditText, one BottomAppBar without FloatingActionButton. But I can't understand, how to place my views under the BottomAppBar?
What I have:
<?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>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#id/bar"
app:layout_anchorGravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/colorPrimary"
app:hideOnScroll="true"
app:navigationIcon="#drawable/baseline_menu_white_24" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
What I want:
Is it possible?
Related
I want my floating action button to be over the listview and above the navigation bar but i cant seem to make it work. (the include layour is the navigation bar).
This is how it looks right now
<?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=".SessionsList">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/lvSessions"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_baseline_add_24"
android:contentDescription=""
android:layout_margin="16dp" />
<include layout="#layout/activity_base"/>
</FrameLayout>
</LinearLayout>
This is the navigation bar layout code:
<?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"
tools:context=".BaseActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
app:itemBackground="#color/orange"
app:itemIconTint="#drawable/selector"
app:itemTextColor="#drawable/selector"
android:layout_gravity="bottom"
app:menu="#menu/menu_navigation" />
</LinearLayout>
I tried putting it in a frame layout and moving things around but I cant get it to work like I want it to.
Change your main layout like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/lvSessions"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:id="#+id/baseLayout"
layout="#layout/activity_base"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_above="#+id/baseLayout"
android:layout_alignParentEnd="true"
android:src="#drawable/g1" />
</RelativeLayout>
</FrameLayout>
And also change activity_base layout like this
<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">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:itemBackground="#color/black" />
</LinearLayout>
Suppose I have the following layout .xml file:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/pen_apl_app_bar"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#00FF00"
app:elevation="0dp" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/pen_rv_insurers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000FF"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
It should result in a preview like this
My question is, how can I place the ProgressBar at the center of the RecyclerView area when using a CoordinatorLayout? The ProgressBar should always be at the center of the RecyclerView.
I see appbarlayout has hight 260dp so you can add RelativeLayout with top margin 260dp and move RecyclerView and ProgressBar inside it like this
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/pen_apl_app_bar"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#00FF00"
app:elevation="0dp" />
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="260dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/pen_rv_insurers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000FF"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.recyclerview.widget.RecyclerView>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Edit** This Shuold work if hight dynamic of appbar
<?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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/pen_apl_app_bar"
android:layout_width="match_parent"
android:layout_height="260dp"
android:background="#00FF00"
app:elevation="0dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/pen_apl_app_bar">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/pen_rv_insurers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000FF"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</androidx.recyclerview.widget.RecyclerView>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center" />
</RelativeLayout>
</RelativeLayout>
How I want to use NestedScrollView, the view for the toolbar at the top and the bottom View view at the bottom. The top and bottom view Toolbar and bottom view must always be in place.
How do I achieve this result for any device? I appreciate any answer, thank you.
Always like that:
It is my code:
<?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">
<!--This is top-->
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/colorPrimary">
<!--.........................-->
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/colorGreyFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<!--This is bottom-->
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/bottom_buttons_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:background="#color/colorWhite">
<!--..............................-->
</androidx.appcompat.widget.LinearLayoutCompat>
</LinearLayout>
You can do it this way,
<?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">
<!--This is top-->
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/colorPrimary">
<!--.........................-->
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorGreyFragment"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"></androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<!--This is bottom-->
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
I have replaced your linear layout at the bottom with the BottomNavigationView, if you want some other thing you can replace there.
I am making an app in which I have a RecyclerView. I have also added a button, but it isn't shown. See the left photo. What I now want is to make the RecyclerView so that may button is visible, like in the photo on the right. How can I achieve this?
Under the photos you can see my xml code. I'd like the RecyclerView to be relative/dynamic.
<?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"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
The problem is that you set the CardView height to match_parent so it takes up the entire screen. It's best to use ConstraintLayout for these kinds of layouts, but you can also fix it with minimal effort like this:
<?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"
tools:context="com.test.test.MainActivity"
android:orientation="vertical"
android:background="#color/colorAccent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.cardview.widget.CardView
android:id="#+id/cardViewMiddle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_weight="1"
app:cardCornerRadius="15dp">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/btnCheckout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/round_corner"
android:backgroundTint="#color/colorPrimaryDark"
android:elevation="16dp"
android:text="START"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
Note I only changed CardView's layout_height to 0dp and then added the following:
android:layout_weight="1"
Which will tell the layout to stretch as much as it can (while not covering other elements below it).
The bottom button/some view hides the list view bottom part.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
</android.support.design.widget.AppBarLayout>
<android.support.v4.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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="example.design.activities.DetailsActivity"
android:background="#color/grey">
<android.support.v7.widget.RecyclerView
android:paddingTop="80dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:gravity="bottom">
<!-- Add to cart button -->
<android.support.v7.widget.AppCompatButton
android:id="#+id/ssssss"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="ADD TO CART"
android:backgroundTint="#color/colorPrimary"
android:textColor="#color/white"
android:layout_alignParentBottom="true"
android:visibility="visible" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I will make the bottom view visible and invisible based on condition.
How can I adjust my list view to scroll more if the bottom bar is visible ?
I think this will solve your problem,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true"
android:background="#android:color/darker_gray">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="match_parent"
android:layout_above="#+id/ssssss"/>
<!-- Add to cart button -->
<android.support.v7.widget.AppCompatButton
android:id="#+id/ssssss"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="ADD TO CART"
android:layout_alignParentBottom="true"
android:backgroundTint="#color/colorPrimary"
android:textColor="#android:color/white"
android:visibility="visible" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
here is the sample output
NOTE:
you have added android:fitsSystemWindows="true" and so you need android:paddingTop="80dp" in your recycler view.Instead you can follow as in my solution just give android:fillViewport="true" to nestedScrollView and no padding needed for recyclerview.
I hope this solves your issue
You can add android:clipToPadding = "false" in your NestedScrollView.
And when you are showing your bottom button you can dynamically add bottom padding for NestedScrollview with value equals to height of your bottom button.
nestedScrollView.setPadding(yourPadding, yourPadding,yourPadding, btn.getMeasuredHeight())
You should change NestedScrollView by using layout_anchor as below.
<android.support.v4.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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="example.design.activities.DetailsActivity"
android:background="#color/colorPrimary"
app:layout_anchor="#+id/relative_view"
app:layout_anchorGravity="top">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:paddingTop="80dp"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
It put scrollview on top of your bottom bar as per your aspect.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.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:background="#EAEAEA"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="example.design.activities.DetailsActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Add to cart button -->
<android.support.v7.widget.AppCompatButton
android:id="#+id/ssssss"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:backgroundTint="#color/colorPrimary"
android:padding="20dp"
android:text="ADD TO CART"
android:textColor="#FFFFFF"
android:visibility="visible" />
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/ssssss"
android:layout_alignParentTop="true"
android:paddingTop="80dp" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>