Develop Reference

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

Can't anchor LinearLayout to bottom of parent using CoordinatorLayout

I'm trying to get my LinearLayout to appear at the bottom of the parent (which is the bottom of the screen) but I'm not able to. It always appears at the top of the parent.
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context=".app.ui.tutorial.TutorialActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto"
android:text="Toolbar Title"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:tint="#color/green500"
android:src="#drawable/ic_pager_section_position" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Can't anchor LinearLayout to bottom of parent using CoordinatorLayout
Beacause you have added the constraint of ConstraintLayout in your LinearLayout while your root layout is CoordinatorLayout
You need to set android:layout_gravity="bottom" in your LinearLayout
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context=".app.ui.tutorial.TutorialActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto"
android:text="Toolbar Title"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/ic_pager_section_position"
android:tint="#color/green500" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
OUTPUT

How to add a recyclerView to the bottom of my layout

I want to add RecyclerView at the bottom to my layout, but it is in wrong position.
Now I Have:
Now RecyclerView is too far down and cuts half of RecyclerView. I Only want RecyclerView at the bottom of my layout but I can't do it.
This is my layout code:
<android.support.constraint.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:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="showresultactivity.SlideTabsActivity">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/mapView"
app:layout_constraintEnd_toEndOf="#+id/mapView"
app:layout_constraintStart_toStartOf="#+id/mapView"
app:layout_constraintTop_toTopOf="#+id/mapView" />
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" /><!--this line make too far down, without it my recyclerview will be at the top of my layout-->
</android.support.constraint.ConstraintLayout>
My RecyclerView layout:
<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:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="showresultactivity.SlideTabsActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewInfoWindowMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
>
</android.support.v7.widget.RecyclerView>
My recyclerView row item xml :
<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="wrap_content">
<LinearLayout
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FCFCFC"
tools:context="showresultactivity.SlideTabsActivity">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="3dp"
app:cardElevation="1dp"
android:layout_margin="5dp"
app:cardPreventCornerOverlap="false">
<RelativeLayout
android:padding="8dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imagesSrcUrl"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/description"
android:text="some text"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/first"
android:textSize="12dp"
android:text="some text"
android:layout_marginTop="5dp"
android:gravity="right"
android:textAlignment="gravity"
/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imagesSrcUrl"
android:layout_below="#id/first"
android:textSize="12dp"
android:text="some text"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<ImageButton
android:layout_centerVertical="true"
android:id="#+id/cardViewNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/circle_shape"
android:src="#drawable/ic_next_black" />
<ImageButton
android:layout_centerVertical="true"
android:id="#+id/cardVievPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_shape"
android:src="#drawable/ic_previous_black" />
EDIT
I forgot that I have also bottom navigation and the recycler should be at the bottom map but above the bottom navigation.
Layout with bottom nav:
<?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"
tools:context="SlideTabsActivity"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_3" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/bottom_navigation_view" android:id="#+id/bottom_nav_view" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
bottom_navigation_view:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomRelativeLayout">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/white_grey_border_bottom"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>

Adding this line to your framelayout would help you achieve that positioning:
app:layout_constraintBottom_toBottomOf="parent"
Also remember to set the height of your frame layout to: wrap content. The purpose of the line above is to fix/pin your frame layout to the bottom of your constraint layout; any eventual expansion would be upward. Therefore, the contents of your frame layout will never overlap. If there is need for extra space, your frame layout will project upwards while still being fixed to the bottom of the constraint layout.
You can check this for reference on more XML attributes on Constraint layouts: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
PS:
You can remove the android:layout_alignParentBottom="true" part of your frame layout; it's not necessary anymore

How to make CardView overlap AppBarLayout

I have tried to accomplish something similar to the following layout.
There are a few things to note. The cardview that overlaps the appbar is not supposed to be a part of a nestedscrollview as I have a nestedscrollview in the xml layout. The cardview is positioned correctly but it comes just beneath the appbarlayout.

I just got the solution to this now. I did not give the CardView an elevation value before and that was wrong. I just assumed that making it come last in the CoordinatorLayout should place it on top. It works now. I have added an elevation value. Here is the code -
<xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/quotes"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="32dp"
android:layout_marginLeft="32dp"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|center"
app:cardElevation="#dimen/small_padding"
/>
</android.support.design.widget.CoordinatorLayout>

Try with the following layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/toolbar_logo"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
app:cardCornerRadius="8dp"
app:cardElevation="7dp"
android:layout_marginTop="150dp"
android:id="#+id/cardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Photos" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="376" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1769"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Following"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="127"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>

Android FloatActionButton: how to make it stick out of a View?

I have a FloatActionButton that have to stick out a bit from the view that contains it, but it becomes cutted.
How can I obtain it to get out a bit from the container?
Example Image
This is the complete code of the Layout, including the Coordinator Layout and the FAB.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_show_image"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/add_text_to_media_image"/>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black_overlay"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/add_text_to_media_detail"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black_overlay"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:id="#+id/add_text_to_media_text_container">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Aggiungi una descrizione..."
android:textColorHint="#color/material_grey_300"
android:textColor="#color/white"
android:id="#+id/add_text_to_media_text"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_text_to_media_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:src="#drawable/ic_send_white_24dp"
app:layout_anchor="#+id/add_text_to_media_text_container"
app:layout_anchorGravity="right"
android:clickable="true"
android:layout_marginTop="-27dp"
android:layout_marginRight="16dp"
/>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>

Make your view taller with a transparent background and change the background of your edittext to the darker color if you want