Develop Reference

Android bottomsheet dialog tansparent background

I have made a bottom sheet dialog with Frame layout. Everything is working fine but I am unable to make the background transparent.
I have given transparent color to both the Frame layout and the parent layout of the dialog UI.
Here is the code for the Frame layout:
<FrameLayout
android:id="#+id/nearby_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" />
Code for the bottomsheet dialog UI:
<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="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
android:orientation="vertical">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="6dp"
android:layout_marginEnd="6dp"
app:cardCornerRadius="20dp"
app:cardElevation="10dp"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
....
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
This is how I am initializing the dialog:
FrameLayout bottom_sheet;
bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet);
View view = getLayoutInflater().inflate(R.layout.nearby_floating_sheet, null);
bottomSheetDialog = new BottomSheetDialog(getActivity());
bottomSheetDialog.setContentView(view);
bottomSheetDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
((View)view.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
bottomSheetDialog.show();
Here is my output:
Can someone please help me with this.

Maybe you should also set your Dialog Window to transparent.
add the following code to your BottomSheetDialog.
// BottomSheetDialog
public BottomSheetDialog(Context context) {
super(context, R.style.Bottom_Sheet_Style); //set your own dialog theme
// ...
Window window = getWindow();
window.setBackgroundDrawableResource(android.R.color.transparent);
WindowManager.LayoutParams lp = window.getAttributes();
lp.alpha = 1.0f;
lp.dimAmount = 0.0f;
window.setAttributes(lp);
// ...
}
Then add the following code to your res/values/styles.xml. If you don't have the file, then create one.
<style name="Bottom_Sheet_Style" parent="#android:style/Theme.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">true</item>
</style>

for transparent background you must apply theme while creating the dialog
first create the below style
<item name="android:background">#android:color/transparent</item>
then apply it using BottomSheetDialog(this,R.style.yourStyle)
you can use bottomSheetDialog.getWindow().setDimAmount(0) for setting up dim amount

CoordinatorLayout adds extra space to BottomSheet in fullscreen Dialog

I'm working on an aplication targetting API 22.
I'm trying to add a BottomSheet at the bottom of a view, displayed in a fullscreen AlertDialog.
Unfortunately, CoordinatorLayout seems to add extra space at the bottom of the view.
However, this extra space is not added when this layout is set as contentView of an Activity
See the difference in these screenshots :
I can't undestand why this layout is displayed correctly as an activity contentView, and not in a fullscreen Dialog.
You can find below the code producing these result, based on a newly created Android app from Android Studio wizard :
<?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:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/top_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="8dp"
app:title="[Title]">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="0dp"
android:orientation="vertical">
<!-- [...] -->
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:elevation="8dp"
android:orientation="vertical"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:behavior_peekHeight="148dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal"
android:padding="8dp">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="BottomSheet Header" />
</LinearLayout>
<LinearLayout
android:id="#+id/payment_buttons"
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#color/colorPrimary"
android:text="TEST 1" />
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#color/colorPrimaryDark"
android:text="TEST 2" />
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#color/colorAccent"
android:text="TEST 3" />
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#android:color/holo_blue_bright"
android:text="TEST 4" />
</LinearLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the MainActivity from which the AlertDialog is built and shown :
package com.axample.bottomsheetondialog
import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.app.AlertDialog
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(app_bar)
bs_dialog.setOnClickListener {
AlertDialog.Builder(this, R.style.AppTheme_FullscreenDialog)
.setView(R.layout.view_with_bottomsheet)
.create()
.show()
}
}
}
And this is the simple-doing-nothing Activity where the problem do not occur
package fr.izypay.bottomsheetondialog
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.view_with_bottomsheet.*
class BottomsheetActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.view_with_bottomsheet)
setSupportActionBar(top_app_bar)
top_app_bar.title = "Bottomsheet in an activity"
}
}
And finally, this is the Theme used for fullscreen-ness (see AppTheme.FullscreenDialog)
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.FullscreenDialog" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowIsFloating">false</item>
</style>
</resources>
I really need this kind of layout to achieve a scrollable list (here with numbers) an an always-on-top growing toolbar at the bottom (the BottomSheet).
I know it can be achieved by some other way, but it sounds to me as a bug.
Does anyone know a solution for this to work ?

As pointed by Mike M. in this question's comments, I had to avoid using AlertDialog.Builder, and use Dialog instead, built by ourselves.
In MainActivity, I had to replace
AlertDialog.Builder(this, R.style.AppTheme_FullscreenDialog)
.setView(R.layout.view_with_bottomsheet)
.create()
.show()
by
Dialog(this, R.style.AppTheme_FullscreenDialog).also {
it.setContentView(R.layout.view_with_bottomsheet)
it.show()
}
and the layout now behaves as expected.

How can I make the textAppearance of TextView inside custom layout added to AlertDialog match the Dialog's?

I have this custom layout because I want a ListView with TextView below it and I want to handle click on list items so dialog doesn't close. (AlertDialog will show its own message view above its ListView.)
<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:paddingStart="14dp"
android:paddingEnd="10dp"
>
<ListView
android:id="#+id/optionList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:choiceMode="singleChoice"
android:divider="#null"
/>
<TextView
android:id="#+id/messageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="5dp"
/>
</LinearLayout>
I made a fake setup where I put text in both the dialog's TextView and my layout's. Screenshot of the result.
I even tried putting style="?android:attr/textAppearanceMedium" in #id/messageView in my layout since alert_dialog.xml has it. It made the text larger than the dialog's message. And the color doesn't match, too light (as if it's the Activity's default color).
I even tried using the builder's LayoutInflater, which is what the documentation says to do.
val infl = builder.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val view = infl.inflate(R.layout.dialog_report_profile, null)
builder.setView(view)

You can always put both style="?android:attr/textAppearanceMedium" AND android:color="#000" at your TextView.
Or, you can just add this to your res/styles.xml:
<style name="DialogMessageText" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#android:color/black</item>
</style>
and put this line to your TextView: style="#style/DialogMessageText"

How to set maximum expanded height in android support design bottom sheet?

I already showed my bottom sheet layout with its peek height set to 100dp. But how can I limit my bottom sheet to expand to 500dp only? This is my sample layout:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
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">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
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=".MapsActivity" />
<android.support.v4.widget.NestedScrollView
android:id="#+id/design_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
app:behavior_hideable="true"
app:behavior_peekHeight="100dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="5dp"
android:background="#e444ff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="5dp"
android:background="#e444ff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="5dp"
android:background="#e444ff" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_margin="#dimen/activity_horizontal_margin"
app:layout_anchor="#+id/design_bottom_sheet"
app:layout_anchorGravity="top|right|end"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
In addition to my question, how can I disallow the user from dragging the bottom sheet up and down?

to stop the bottom sheet from moving up the full screen is simple, just set a layout_height for your NestedScrollView to 500dp, also you probably want to set it's layout_gravity="bottom"
<android.support.v4.widget.NestedScrollView
android:id="#+id/design_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#000000"
android:layout_gravity="bottom"
app:behavior_hideable="true"
app:behavior_peekHeight="100dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="5dp"
android:background="#e444ff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="5dp"
android:background="#e444ff" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginBottom="5dp"
android:background="#e444ff" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
if you don't want the view to be draggable up then you need to set behavior_peekHeight and layout_height to the same values.
And to stop the view from being draggable down is the behavior_hideable flag just set this to false

You can use setMaxHeight method from BottomSheetBehavior (this method should be called before show() method)
bottomSheetDialog.behavior.maxHeight = 1000 // set max height when expanded in PIXEL
bottomSheetDialog.behavior.peekHeight = 400 // set default height when collapsed in PIXEL

You can just set param "maxHeight" to the root viewgroup of your bottom sheet.
android:maxHeight=500dp
Works good with ConstraintLayout as root layout.

If using BottomSheetDialogFragment:
In my case I was using BottomSheetDialogFragment and modified the bottom sheet peek height by getting its reference by override OnCreateDialog method inside my BottomSheetFragment
#NonNull #Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
dialog.setOnShowListener(new DialogInterface.OnShowListener() {
#Override
public void onShow(DialogInterface dialog) {
BottomSheetDialog bottom_dialog = (BottomSheetDialog) dialog;
FrameLayout bottomSheet = (FrameLayout) bottom_dialog.findViewById(com.google.android.material.R.id.design_bottom_sheet);
assert bottomSheet != null;
//BottomSheetBehavior.from(bottomSheet).setState(BottomSheetBehavior.STATE_EXPANDED);
DisplayMetrics displayMetrics = requireActivity().getResources().getDisplayMetrics();
int height = displayMetrics.heightPixels;
int maxHeight = (int) (height*0.80);
BottomSheetBehavior.from(bottomSheet).setPeekHeight(maxHeight);
}
});
return dialog;
}

Above solutions didn't work for me so I solved it by
1. added app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" in the root view of bottom sheet layout.
2. custom style for bottom sheet:
<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">#style/AppModalStyle</item>
</style>
<style name="AppModalStyle" parent="Widget.MaterialComponents.BottomSheet">
<item name="behavior_peekHeight">600dp</item>
</style>
3. And using this in Activity or Fragment by
val mBottomSheetDialog = BottomSheetDialog(this, R.style.AppBottomSheetDialogTheme)
val inflater = this.layoutInflater
val sheetView = inflater.inflate(R.layout.bottom_sheet_layout, null)
mBottomSheetDialog.setContentView(sheetView)
mBottomSheetDialog.show()

For some reason, the accepted answer didn't work for me. Maybe because I'm not using a fragment and a NestedScrollView as the layout inside my BottomSheet. Anyway, in my case, the solution was to limit the size of the CoordinatorLayout:
<ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your main content here -->
</ConstarintLayout>
<CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="MAX SIZE OF BOTTOM SHEET">
<YourBottomSheetLayout>
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</CoordinatorLayout>
</ConstarintLayout>

How can I add divider between action Items in Toolbar

I want to design a toolbar like:.
I have done most of it but having some problem.
I don't know how to make a divider between the toolbars items and also having no idea how to set a counter variable attached to the action button that increment as order takes place like given in the picture.
Any suggestions?

You can place your layout like below:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionLayout="#layout/your_layout_here"/>
or
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/..."
android:showAsAction="always."
android:icon="#drawable/..."
android:title="#string/..."
android:actionViewClass="your_class"/>
where "your_class" - class which inflate and implement your view with separator

Try to create a custom toolbar. Add your views between the toolbar's opening and closing tags.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dip"
android:background="#ff0000">
<!-- the back button -->
<ImageView
android:id="#+id/backButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left"
android:clickable="true"
android:onClick="onBackButtonClick"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:src="#drawable/ic_back" />
...
<!-- the devider -->
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#ffffff" />
<ImageView .../>
</android.support.v7.widget.Toolbar>