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.
Related
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>
I have a CoordinatorLayout which has AppBarLayout(containing CollapsingToolbarLayout), RecyclerView, and beneath that an ImageView. The issue which I face is CoordinatorLayout is adding some extra space below the ImageView which should not be present in the UI.
Below is the code of my XML
<?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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
......
</com.google.android.material.appbar.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/myRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/myImage"
android:layout_width="match_parent"
android:layout_height="100dp"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/static_image" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Set this to your LinearLayout:
android:layout_height="wrap_content"
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?
I have added card view inside scroll view and inside card view I have added preference fragment but it only show preference category title.
setting.xml
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.afollestad.appthemeengine.inflation.ATEToolbar
android:id="#+id/toolbar"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view"
android:layout_below="#+id/toolbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="4dp"
style="?attr/CardTheme" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
any solution.
Add android:fillViewport="true" to fill the scrollview. Also don't forget to change the height of relative layout inside scrollview. Change it to match_parent and card view's height also(match_parent).
Finally layout should be like this,
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.afollestad.appthemeengine.inflation.ATEToolbar
android:id="#+id/toolbar"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view"
android:fillViewport="true"
android:layout_below="#+id/toolbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardElevation="4dp"
style="?attr/CardTheme" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Couldn't find a more appropriate title but my problem is the following. I have a LinearLayout that contains another LinearLayout and a fragment. I also want to add the toolbar but when I do so, then I only see the toolbar and the other screen is just white.
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="xeniasis.mymarket.MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:weightSum="4">
<LinearLayout
android:id="#+id/categories_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="20dp">
<ExpandableListView
android:id="#+id/categories_listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<fragment
android:id="#+id/mainPane"
android:name="xeniasis.mymarket.Products"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
tools:layout="#layout/activity_main" />
</LinearLayout>
</LinearLayout>
Toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:padding="5dp"
android:theme="#style/ToolbarTheme" />
And the fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="xeniasis.mymarket.MainActivity">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipeRefreshContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="#dimen/activity_vertical_margin">
<GridView
android:id="#+id/productsGridview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:numColumns="3"></GridView>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="8dp"
android:clickable="true"
android:elevation="5dp"
android:src="#android:drawable/ic_menu_search" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
This only happens when I have a fragment, cause I previously had the same xml with a static layout where the fragment is now.
The problem is that you used a LinearLayout with
android:orientation="horizontal"
and since the toolbar has match_parent as width it occupies all the screen.
Try to use
android:orientation="vertical"
in the root layout