Develop Reference

Place a View at the center of the ScrollView's area using CoordinatorLayout

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>

Add image on top of bottomsheet in Android

How can add image on top of the bottom sheet in Android? See this image
I tried this but it doesn't work. I want the transparency as shown in the image attached.
<?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"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/myBottomLL"
app:layout_anchorGravity="top|center" />
<LinearLayout
android:id="#+id/myBottomLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/background" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Follow these links.
How to make the background transparent:
https://medium.com/#manuaravindpta/transparent-background-for-bottomsheetdialog-396a1a646f1b
How to make the bottom sheet full screen:
https://medium.com/better-programming/bottom-sheet-android-340703e114d2
For the circular image view:
https://github.com/hdodenhof/CircleImageView
Just add a transparent View to the top 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"
android:background="#android:color/transparent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/topImage"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center_horizontal|top"
android:elevation="6dp"
android:src="#drawable/ic_account_circle"
app:civ_border_color="#color/colorAccent"
app:civ_border_width="2dp"
app:civ_circle_background_color="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/transparentRegion"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
app:elevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal">
<ImageButton
android:id="#+id/closeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_close"
android:tint="#android:color/black" />
</LinearLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fillViewport="true">
<LinearLayout
android:id="#+id/other_content_goes_here"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Other Content"
android:textSize="24sp" />
<View
android:id="#+id/extraSpace"
android:layout_width="match_parent"
android:layout_height="800dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Set the theme of the BottomSheetDialogFragment.
You can also add a BottomSheetCallback and decrease the height of the transparent space at the top as you scroll up

Android Bottom Sheet Is not Reacting To Touches and doesn't Scroll

so I have a problem: I added a LinearLayout with layout_behaviour as BottomSheetBehavior to a FrameLayout view I created and added above one my Activities, but my bottom sheet is not scrollable, I can only change its state programatically but touches don't react. What do you think can be the problem?
This is my xml:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/rich_media_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
. . . . . .
<LinearLayout
android:id="#+id/cue_point_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/cue_points_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp" />
. . . . . .
</LinearLayout>

Use CoordinatorLayout as parent layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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">
<include layout="#layout/bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>
bottom_sheet -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/bottom_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="204dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
.......
</LinearLayout>

you have to use CoordinatorLayout as root layout
activity_main--
<?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"
android:background="#f7f7f7">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.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" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<!-- Adding bottom sheet after main content -->
<include layout="#layout/bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>
bottom_sheet--
<?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:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical"
android:padding="#dimen/activity_margin"
app:behavior_hideable="true"
app:behavior_peekHeight="56dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_vertical"
android:weightSum="3">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_margin"
android:layout_weight="2"
android:text="Order Details"
android:textSize="18dp"
android:textStyle="bold" />
<TextView
android:layout_width="0dp"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="15dp"
android:text="₹475.00"></TextView>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chicken Fried Rice 1x1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Chiken Tikka 1x2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_margin"
android:text="Delivery Address"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rohini delhi-42" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="#000"
android:foreground="?attr/selectableItemBackground"
android:text="PROCEED PAYMENT"
android:textColor="#fff" />
</LinearLayout>

Cannot Fix a header above RecyclerView in Android

I need to show a header above a RecyclerView but with the code below, the header is not fixed and gets scrolled with the recycler view.
Does anyone has a solution for his problem?
fragment_history_detail.xml
[[First Try]]
<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"
android:background="?android:attr/colorBackground">
<RelativeLayout
android:id="#+id/header_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<include
layout="#layout/view_header_history_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/header_container">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_history_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_history_detail_item_self" />
</RelativeLayout>
</RelativeLayout>
[[Second Try]]
I also tried using LinearLayout like below. But it doesn't help.
<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:background="?android:attr/colorBackground"
android:orientation="vertical">
<include
layout="#layout/view_header_history_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_history_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_history_detail_item_self" />
</LinearLayout>
[[Third Try]]
<?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:background="?android:attr/colorBackground"
android:orientation="vertical">
<include
layout="#layout/view_header_history_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout 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="?android:attr/colorBackground">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_history_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_history_detail_item_self" />
</RelativeLayout>
</LinearLayout>
view_header_history_detail.xml
<?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="horizontal">
<ImageView
android:id="#+id/imageView_back"
android:layout_width="60dp"
android:layout_height="#dimen/title_height"
android:background="?attr/colorPrimaryDark"
app:srcCompat="#drawable/vector_expand_left" />
<TextView
android:id="#+id/textview_title"
android:layout_width="match_parent"
android:layout_height="#dimen/title_height"
android:background="?attr/colorPrimaryDark"
android:gravity="center_vertical"
android:text="History Detail"
android:textAllCaps="true"
android:textColor="?attr/colorHeaderText"
android:textSize="16sp" />
</LinearLayout>

Use LinearLayout instead of RelativeLayout. And ser Orientation to vertical. So that the layout place top to bottom.
So, Your parent layout should be link this ->
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/colorBackground">
<!--Your child layouts goes here-->
</LinearLayout>

Copy below code and put in your xml file
<RelativeLayout
android:id="#+id/header_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<include
layout="#layout/view_header_history_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/header_container">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_history_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_history_detail_item_self" />
</RelativeLayout>
remove above relative layout or you can paste ralative layout content
<RelativeLayout
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="?android:attr/colorBackground">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_history_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_history_detail_item_self" />
</RelativeLayout>

if you want to fix the layout then u can do one thing as i m thinking....
look the code below....
<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:background="?android:attr/colorBackground"
android:orientation="vertical">
<include
layout="#layout/view_header_history_detail"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout 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="?android:attr/colorBackground"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView_history_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_history_detail_item_self" /></LinearLayout>

Try below code. it works for me.
<?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:orientation="vertical">
<include layout="#layout/view_header_history_detail" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerChat"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

android layout with fragment breaks when toolbar is there

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