Fullscreen DialogFragment with translucent StatusBar

Fullscreen DialogFragment with translucent StatusBar - android

I have a DialogFragment which I want to show in fullscreen. I do however still want a StatusBar present, and the hardware buttons at the bottom. I also want to set a background color of the StatusBar (for Lollipop).
My problem is that if I set the following flags in the DialogFragment:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
Both the StatusBar and Hardware keyboard becomes translucent, and the DialogFragment stretches behind these.
Here is the code, which has been greatly reduced to become readable:
public class CardDetailsDialog extends DialogFragment {
Setup parameters...
public static CardDetailsDialog newInstance(final long cardId, final long projectId){
CardDetailsDialog frag = new CardDetailsDialog();
frag.setStyle(DialogFragment.STYLE_NORMAL, R.style.CardDetailsDialogStyle);
return frag;
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if(getDialog() != null) {
getDialog().getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getDialog().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getDialog().getWindow().getAttributes().windowAnimations = R.style.DialogSlideAnimation;
getDialog().getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
getDialog().getWindow().setStatusBarColor(Color.RED);
}
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.card_details, container, false);
Handle everything that happens inside the view...
return view;
}
}
Here is the referred theme:
<style name="CardDetailsDialogStyle" parent="#style/Theme.AppCompat.Light.Dialog" >
<item name="android:windowBackground">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>
And the style of the fragment:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/pp.whiteBackgroundColor" >
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_details_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/PopupMenutheme">
</android.support.v7.widget.Toolbar>
<ScrollView
android:id="#+id/details_scrollview"
android:layout_height="wrap_content"
android:layout_width="match_parent">
All subview elements here...
</ScrollView>
</RelativeLayout>
This is the result:
As you can see, the ToolBar extends over the StatusBar and hardware buttons. I don't know if I am approaching this correctly. Am I missing something?
EDIT
This is what the same view look likes when I remove
getDialog().getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

For anyone who's still having this problem, do the following. This just solves half of the problem that is posted i.e. black status bar.
Add following theme to res/value-v21/style
<style name="DialogTheme" parent="#style/Base.Theme.AppCompat.Light.Dialog">
<item name="android:windowTranslucentStatus">true</item>
</style>
And then apply Style on DialogFragment in onCreate
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NO_TITLE, R.style.DialogTheme);
}
Edit
if you've problem with your dialog theme then use this style e.g. colorAccent or colorControlHighlight etc
<style name="DialogTheme" parent="#style/ThemeOverlay.AppCompat.Dialog">
<item name="android:windowTranslucentStatus">true</item>
</style>

In my case SYSTEM_UI_FLAG_LAYOUT_STABLE solved problem with overlapping
int width = ViewGroup.LayoutParams.MATCH_PARENT;
int height = ViewGroup.LayoutParams.MATCH_PARENT;
dialog.getWindow().setLayout(width,height);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
dialog.getWindow().setStatusBarColor(getResources().getColor(R.color.darkGrayTransp));
dialog.getWindow().getDecorView().setSystemUiVisibility(SYSTEM_UI_FLAG_LAYOUT_STABLE);//solves issue with statusbar
dialog.getWindow().setGravity(Gravity.CENTER_HORIZONTAL| Gravity.TOP);
}

Try use the same Style from your App. I tested with simple dialog without fragment and works fine.
Like that:
new Dialog(context, R.style.CardDetailsDialogStyle);

You have to set fitsystemwindows = true. Other way is to add a Space with 0dp and change its height to 25dp when the dialog is going to show.
To change the space size, use layout params, check this post: How to create a RelativeLayout programmatically with two buttons one on top of the other?

<style name="DialogTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsFloating">false</item>
</style>

Just apply android:fitsSystemWindows="true" to your root ViewGroup:
`<FrameLayout
android:fitsSystemWindows="true">
<View .../>

Related

the status bar changes it's color to black inside fullscreen dialog fragment android

I'm using dialog fragment. The problem is that the status bar color is changed to black. How to change it to some other color? It's strange cause inside fragment, activity it works fine. Its only black inside DialogFragment
#Override
public void onStart() {
super.onStart(); //super.onStart() is where dialog.show() is actually called on the underlying dialog, so we have to do it after this point
Dialog d = getDialog();
if (d != null) {
int width = ViewGroup.LayoutParams.MATCH_PARENT;
int height = ViewGroup.LayoutParams.MATCH_PARENT;
d.getWindow().setLayout(width, height);
d.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
}
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
final Dialog dialog = new Dialog(getActivity(), R.style.full_screen_dialog);
return dialog;
}

You have to set FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDSto indicate that this Window is responsible for drawing the background for the system bars.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
dialog.getWindow().setStatusBarColor(yourColor);
}

I just posted the solution to this problem here
Add following theme to res/value-v21/style
<style name="DialogTheme" parent="#style/Base.Theme.AppCompat.Light.Dialog">
<item name="android:windowTranslucentStatus">true</item>
</style>
And then apply Style on DialogFragment in onCreate
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NO_TITLE, R.style.DialogTheme);
}

GUYS THE BEST SOLUTION IS IN THE WEBSITE LINK I AM POSTING HERE
https://zocada.com/android-full-screen-dialogs-using-dialogfragment/
I'll also upload the code here for reference
1st create a style FullScreenDialogStyle in your style file :
<style name="FullScreenDialogStyle" parent="Theme.AppCompat.Dialog">
<item name="android:windowNoTitle">true</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorPrimary">#color/colorPrimary</item>
<!-- Set this to true if you want Full Screen without status bar -->
<item name="android:windowFullscreen">false</item>
<item name="android:windowIsFloating">false</item>
<!-- This is important! Don't forget to set window background -->
<item name="android:windowBackground">#color/colorWhite</item>
<!-- Additionally if you want animations when dialog opening -->
<!--<item name="android:windowEnterAnimation">#anim/slide_up</item>-->
<!--<item name="android:windowExitAnimation">#anim/slide_down</item>-->
</style>
inside your dialogFragment class override a method onCreate
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NORMAL,R.style.FullScreenDialogStyle);
}
then override Onstart method, through which u can access the getDialog() and set the height and width
#Override
public void onStart() {
super.onStart();
Dialog dialog = getDialog();
if (dialog != null) {
int width = ViewGroup.LayoutParams.MATCH_PARENT;
int height = ViewGroup.LayoutParams.MATCH_PARENT;
dialog.getWindow().setLayout(width, height);
}
}

To change Status Bar Color under DialogFragment, set below style to your dialogFragment under onCreate Method.
like:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(DialogFragment.STYLE_NO_TITLE,R.style.FullScreenDialogWithStatusBarColorAccent)
}
Add this style in style.xml
<style name="FullScreenDialogWithStatusBarColorAccent">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowNoTitle">true</item>
<item name="android:statusBarColor">#color/colorAccent</item>
<!--<item name="android:windowAnimationStyle">#style/MateriDocumentAlertsActivityalDialogSheetAnimation</item>-->
</style>

here is the solution i found:
add this to your style.xml file
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog">
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
<!-- set the rounded drawable as background to your bottom sheet -->
<style name="BottomSheet" parent="#style/Widget.Design.BottomSheet.Modal">
<item name="android:background">#color/transparent</item>
</style>
<style name="BaseBottomSheetDialog" parent="#style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheet</item>
</style>
then you should override onCreate() method in BottomSheetDialogFragment class and call:
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(BottomSheetDialogFragment.STYLE_NORMAL, R.style.BottomSheetDialogTheme);
}

in kotlin
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window?.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window?.statusBarColor = Color.parseColor("#0173B7")
}

A little late to the party but setting IS_FLOATING flag worked for me.
<style name="MyTheme.AlertDialog.FullScreen" parent="MyTheme.AlertDialog">
<item name="windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:windowAnimationStyle">#style/Animation.AppCompat.Dialog</item>
<item name="android:windowBackground">#color/white</item>
</style>

BottomSheetDialog with transparent background

I would like to display a bottom sheet dialog less wide than the screen width.
For instance, the Share option from Google Play Music on a Nexus 9.
Do you know how to achieve this ?
For now I just succed to reduce the width of the sheet content but the background is still at the screen width and display a white background.
Some code:
build.gradle
compile 'com.android.support:design:23.3.0'
MainActivity
#Override
protected void onCreate(Bundle savedInstanceState) {
...
mBottomSheetDialog = new BottomSheetDialog(this);
mBottomSheetDialog.setContentView(R.layout.sheet_test);
mBottomSheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
#Override
public void onDismiss(DialogInterface dialog) {
mBottomSheetDialog = null;
}
});
mBottomSheetDialog.show();
}
sheet_test
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Some Text"
android:textColor="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ddd" />
<TextView
style="#style/TextAppearance.AppCompat.Body1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:text="Some Text" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ddd" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

This worked for me when using BottomSheetDialogFragment:
public class CustomDialogFragment extends BottomSheetDialogFragment {
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(BottomSheetDialogFragment.STYLE_NORMAL, R.style.CustomBottomSheetDialogTheme);
}
...
}
Also add this to your styles.xml
<style name="CustomBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/CustomBottomSheetStyle</item>
</style>
<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
</style>
Option 2:
override fun getTheme() = R.style.CustomBottomSheetDialogTheme

BottomSheetDialog bottomSheetDialog =new BottomSheetDialog(this,R.style.SheetDialog);
<style name="SheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<!--<item name="android:windowCloseOnTouchOutside">false</item>-->
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:colorBackground"> #android:color/transparent</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.3</item>
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
</style>

This is simplest solution for set transparent background of BottomSheetDialogFragment
It makes use of the following line of code:
((View) contentView.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
Example in context:
public class ShareOneTouchAlertNewBottom extends BottomSheetDialogFragment {
#Override
public void setupDialog(Dialog dialog, int style) {
super.setupDialog(dialog, style);
View contentView = View.inflate(getContext(), R.layout.fragment_bottom_sheet, null);
dialog.setContentView(contentView);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent())
.getLayoutParams();
CoordinatorLayout.Behavior behavior = params.getBehavior();
((View) contentView.getParent()).setBackgroundColor(Color.TRANSPARENT);
}
}

Sorry got it late here is what you are looking for upvote if u have done it successfully
#Override
public void onActivityCreated(#Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
((View) getView().getParent()).setBackgroundColor(Color.TRANSPARENT);
}
Add this line in bottom sheet dialog fragment's on activity created. This will do the trick

The following function override worked in a BottomSheetDialogFragment implementation:
class MyTopicBottomSheet : BottomSheetDialogFragment() {
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
return super.onCreateDialog(savedInstanceState).apply {
// window?.setDimAmount(0.2f) // Set dim amount here
setOnShowListener {
val bottomSheet = findViewById<View>(com.google.android.material.R.id.design_bottom_sheet) as FrameLayout
bottomSheet.setBackgroundResource(android.R.color.transparent)
}
}
}
// Rest of your class here
}

Following the idea from Marco RS (that for me was the only solution at all that works), you can create a clean extension and apply wherever you want on your dialogs.
Extension:
fun BottomSheetDialogFragment.setTransparentBackground() {
dialog?.apply {
setOnShowListener {
val bottomSheet = findViewById<View?>(R.id.design_bottom_sheet)
bottomSheet?.setBackgroundResource(android.R.color.transparent)
}
}
Example:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
setTransparentBackground()
}

Bit of a hack but it works for making background transparent. Obviously you can replace the 'transparent' with whatever colour you want.
mBottomSheetDialog.getWindow().findViewById(R.id.design_bottom_sheet).setBackgroundResource(android.R.color.transparent);

There are several hackish ways to do it. The way I solved this issue is the recommended way. Let's understand why?
In the docs, it's mentioned that
Modal bottom sheet. This is a version of DialogFragment that shows a bottom sheet using BottomSheetDialog instead of a floating dialog.
This means there should be a method that BottomSheetDialogFragment uses to replace the default Dialog with a BottomSheetDialog.
The only method BottomSheetDialogFragment overrides is onCreateDialog(). So we're gonna use this public method to override our dialog style.
Recommended Method
In the fragment that extends BottomSheetDialogFragment overrDide onCreateDialog() which is a public method exposed by BottomSheetDialogFragment itself.
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
setStyle(STYLE_NO_FRAME, R.style.BottomSheetDialog)
return super.onCreateDialog(savedInstanceState)
}
besides that, in themes.xml override BottomSheetDialog theme and add transparent background.
<style name="BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetModal</item>
</style>
<style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
</style>
More about:
BottomSheetDialogFragment: here
onCreateDialog: here
theming the BottomSheetDialog: here

So, I figured out 2 solutions.
Best one:
Create an activity with transparent background just for your bottom sheet.
Implement your own layout with a coordinator layout and a bottom sheet.
Set the margin you want.
Set the content you want.
Not tested yet.
Lazy one:
Extends BottomSheetDialogFragment, in onActivityCreated add:
Resources resources = getResources();
// Set margin for Landscape Mode. Maybe a more elegant solution will be to implements our own bottom sheet with our own margins.
if (resources.getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
assert getView() != null;
View parent = (View) getView().getParent();
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) parent.getLayoutParams();
layoutParams.setMargins(
resources.getDimensionPixelSize(R.dimen.bottom_sheet_margin_left), // 64dp
0,
resources.getDimensionPixelSize(R.dimen.bottom_sheet_margin_right), // 64dp
0
);
parent.setLayoutParams(layoutParams);
}

I had same problem, nothing helped.
Used this code to solve the problem:
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
val bottomSheet = (view!!.parent as View)
bottomSheet.backgroundTintMode = PorterDuff.Mode.CLEAR
bottomSheet.backgroundTintList = ColorStateList.valueOf(Color.TRANSPARENT)
bottomSheet.setBackgroundColor(Color.TRANSPARENT)
}
P.S. com.google.android.material:material:1.1.0-alpha09

BottomSheetDialog will get the R.attr.bottomSheetDialogTheme style from your context's theme, or else use the default R.style.Theme_Design_Light_BottomSheetDialog.
The layout xml of BottomSheetDialog is R.layout.design_bottom_sheet_dialog. The main content is a FrameLayout with id/design_bottom_sheet whose style is ?attr/bottomSheetStyle.
If you extends a style with parent Theme.Design.Light.BottomSheetDialog then all your default attrs like colorPrimary, colorAccent may be overrided. Thus ThemeOverlay is recommended to be used in View Theme tree. You should extend a style from ThemeOverlay.MaterialComponents.Light.BottomSheetDialog like this:
<style name="Widget.Test.ButtonSheetDialogTheme" parent="ThemeOverlay.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/Widget.Test.BottomSheet.Modal</item>
</style>
<style name="Widget.Test.BottomSheet.Modal" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="backgroundTint">#android:color/transparent</item>
</style>
You have to extend a style from Widget.MaterialComponents.BottomSheet.Modal, because the default style contains these:
<style name="Widget.MaterialComponents.BottomSheet" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#null</item>
<item name="backgroundTint">?attr/colorSurface</item>
....
</style>
BottomSheetDialog's background is decided both by android:background and backgroundTint. But I am not sure why backgroundTint is effective while android:background is null. 🤔??
For more knowledge about Android Theme:
Android Styling: themes overlay

Late answer, but faced this problem myself and found better solution then any of suggested.
You can wrap your sheet layout with another layout with transparent background and add margin from it (16dp here):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent"
>
<android.support.v4.widget.NestedScrollView
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="16dp">
....
Then add transparent background to your sheet like in Gnzlt answer:
<style name="CustomBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/CustomBottomSheetStyle</item>
</style>
<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
</style>
And voila, don't need another activity.

This worked for me.. Oncreate Dialog get the window set color
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);
if(dialog.getWindow() !=null){
dialog.getWindow().setGravity(Gravity.BOTTOM);
dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
dialog.setCancelable(false);
}
return dialog;
}

use "setOnShowListener" for your dialog instance, like this in kotlin:
yourDialogInstance.setOnShowListener {
//this line transparent your dialog background
(dialogView.parent as ViewGroup).background =
ColorDrawable(Color.TRANSPARENT)
}
complete code in kotlin :
BottomSheetDialog(this).apply {
val dialogView = LayoutInflater.from(context)
.inflate(R.layout.your_dialog_layout, null, false)
setContentView(dialogView)
setOnShowListener {
(dialogView.parent as ViewGroup).background =
ColorDrawable(Color.TRANSPARENT)
}
show()
}

This is your answer :D
View contentView=LayoutInflater.from(getContext()).inflate(R.layout.bs_add_event,null);
mBottomSheetDialog.setContentView(contentView);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
params.setMargins(50,50,50,50); // set margin as your wish.
and also change android:layout_width="100dp" in nestedScroolView to
android:layout_width="match_parent"

1. Firstly Add Style in your theme:
<style name="MyTransparentBottomSheetDialogTheme" parent="Theme.AppCompat.Light">
<item name="android:background">#android:color/transparent</item>
<item name="android:colorBackground">#android:color/transparent</item>
</style>
2. Then attach above style with BottomSheetDialogFragment same as below :
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
return new BottomSheetDialog(getContext(),R.style.MyTransparentBottomSheetDialogTheme);
}

1 - Initialize the bottom sheet dialog this way.
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(YourActivity.this, R.style.BottomSheetDialog);
2 - Add this style as suggested by Gnzlt.
<style name="BottomSheetDialog" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetDialogStyle</item>
</style>
<style name="BottomSheetDialogStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
<item name="android:backgroundTint">#android:color/transparent</item>
</style>

I know this question is old but I still answer the question and hope it useful.
By default, the layout specified in onCreateView() method will be added to a FrameLayout with white background by BottomSheetDialogFragment. Therefor, you should set the FrameLayout's background to transparent in onStart() method.
class YourDialog() : BaseBottomDialog() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.layout_your_dialog, container, false)
}
override fun onStart() {
super.onStart()
(view!!.parent as View).setBackgroundColor(Color.TRANSPARENT)
}
}

Found that I needed to use a variant on the accepted answer, by updating to MaterialComponents to make compatible with AndroidX as well as adding "backgroundTint" as transparent as well:
<style name="BottomSheetDialog" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetDialogStyle</item>
</style>
<style name="BottomSheetDialogStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
<item name="android:backgroundTint">#android:color/transparent</item>
</style>
Apply the "BottomSheetDialog" style to the fragment as per the original answer:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(BottomSheetDialogFragment.STYLE_NORMAL, R.style.BottomSheetDialog);
}

Just Add the following code in your style.xml
<style name="BottomDialogStyle" parent="Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowSoftInputMode">adjustResize</item>
<item name="bottomSheetStyle">#style/CustomBottomSheetStyle</item>
</style>
<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
</style>
Also, update the onCreate
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(STYLE_NORMAL, R.style.BottomDialogStyle)
}

If you are using BottomSheetBehavior then use the below code on collapse and Expand states
behavior.setState(BottomSheetBehavior.STATE_EXPANDED); ((View)getParent()).setBackgroundColor(getResources().getColor(<your desire color>));
and
behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); ((View).getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
Also, use
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
#Override
public void onStateChanged(#NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
((View) mScrollview.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
}
}
#Override
public void onSlide(#NonNull View bottomSheet, float slideOffset) {
// React to dragging events
}
});

If you want all your BottomSheets inherit that behavior, just do as follows:
<style name="Theme.InstaDownloader" parent="Theme.MaterialComponents.Light.NoActionBar">
...
<item name="bottomSheetDialogTheme">#style/BottomSheetTheme</item>
...
</style>
<style name="BottomSheetTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetStyle</item>
</style>
<style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
</style>

For me below worked:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
(view.parent as? View)?.setBackgroundColor(Color.TRANSPARENT)
}

<style name="BaseBottomSheetDialogTrasn" parent="#style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">#style/BottomSheetTrans</item>
</style>
<style name="BottomSheetDialogThemeTrans" parent="BaseBottomSheetDialogTrasn">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#color/white</item>
</style>
<style name="BottomSheetTrans" parent="#style/Widget.Design.BottomSheet.Modal">
<item name="android:background">#android:color/transparent</item>
</style>
And finally add the parameter in BottomSheetDialog(context,R.style.BottomSheetDialogThemeTrans)

I know I'm much late but in kotlin the thing that really helped me out is adding this line in your fragment in onCreate():
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(STYLE_NORMAL,R.style.CustomBottomSheetDialog)
}
And in styles():
<style name="CustomBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/bottomSheetStyleWrapper
</item>
</style>
<style name="bottomSheetStyleWrapper"
parent="Widget.Design.BottomSheet.Modal">
<item
name="android:background">#android:color/transparent</item>
</style>
Works perfectly fine for me.

Adding android:background or android:colorBackground property will not make the bottom sheet transparent as suggested by many answers!
Adding, backgroundTint to sheetStyle is the key to making bottomsheet transparent.
Eg:
<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetStyle</item>
</style>
The following piece is key,
<style name="BottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="backgroundTint">#android:color/transparent</item>
</style>
Pass this style as second parameter while creating the BottomSheetDialog in java or kt.
Eg:
BottomSheetDialog(context, R.style.BottomSheetDialog)
Resource:
A good resource to learn more about BottomSheet https://m2.material.io/develop/android/components/bottom-sheet-dialog-fragment

Changing dialogfragment background color (Using the Android Holo Colors Generator Xml Template)

All my theme is working beside my dialogfragment background.
I try to make my dialogFragment background black but i'm doing something wrong.
Here what i got so far in the theme xml (Note that i trunked the top and the bottom of it):
<style name="easydealtheme" parent="#style/_easydealtheme"/>
<style name="_easydealtheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:editTextBackground">#drawable/easydealtheme_edit_text_holo_light</item>
<item name="android:dropDownListViewStyle">#style/Listviewdropdowneasydealtheme</item>
<item name="android:textViewStyle">#style/Textvieweasydealtheme</item>
<item name="android:editTextStyle">#style/Edittexteasydealtheme</item>
<item name="android:alertDialogTheme">#style/Dialogeasydealtheme</item>
...
Here is what i got in the Styles xml for my dialog :
<style name="Dialogeasydealtheme" parent="android:Theme.Holo.Dialog">
<item name="android:textColor">#FFFFFF</item>
<item name="android:windowBackground">#color/test</item>
</style>
Here is the code that show the dialogFragment :
public static void ShowPhotoDialog(String title,File photoFile, FragmentManager fragM)
{
FragmentPhotoDialog photoD = new FragmentPhotoDialog();
FragmentTransaction fTX = fragM.BeginTransaction();
photoD.SetStyle(DialogFragmentStyle.NoFrame, EasyDeal_Android.Resource.Style.easydealtheme);
photoD.SetTile(title);
photoD.SetPhotoFile(photoFile);
photoD.Show(fTX, "Dialog");
}
Here the result which is not working (The white should be black ) :

I went crazy finding a solution for this problem until I came across a solution.
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
// Setup the layout
LayoutInflater inflater = getActivity().getLayoutInflater();
final View root = inflater.inflate(*"YOUR LAYOUT"*, null);
root.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
//Customizing the dialog features
final Dialog dialog = new Dialog(getActivity());
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(root);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(getResources().getColor(*"YOUR SELECTED COLOR"*)));
dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
return dialog;
}

Try changing the alert dialog background as
<style name="Dialogeasydealtheme" parent="android:Theme.Holo.Dialog">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">#color/black</item>
</style>
Let me know if see any issue.

I find a solution not my favorite though but it will do.
I added a background to my layout. Here is the code on my main linearLayout:
<LinearLayout xmlns:p1="http://schemas.android.com/apk/res/android"
p1:orientation="vertical"
p1:minWidth="25px"
p1:minHeight="25px"
p1:layout_width="match_parent"
p1:layout_height="match_parent"
p1:id="#+id/liDialogPhoto"
p1:background="#drawable/easydealtheme_tilesbg">
I can now continue using no frame having a nice colored background !
Thanks for the help !

Different backgrounds in one Activity

In Android, is it possible to properly have different background color for the views, the empty space and the action bar?
For example I have a PreferenceScreen in a PreferenceFragment. I have these codes:
Style XML:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="MyTheme" parent="android:Theme.Holo">
<item name="android:textColor">#color/blue1</item>
<item name="android:background">#color/bg</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:titleTextStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar.Solid">
<item name="android:background">#color/brown1</item>
<item name="android:windowBackground">#color/brown1</item>
</style>
</resources>
my PreferenceFragment class: this already looks like a hack!
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v=super.onCreateView(inflater, container, savedInstanceState);
((ListView) v.findViewById(android.R.id.list)).setBackgroundColor(getResources().getColor(R.color.blue1));
return v;
}
This already makes the ListView items have bg background color, and the empty space after them blue1 background color (note that I had to set them in the opposite way to make this work!), and the ActionBar has brown1 background but the text on it does not and that's really ugly! Also, what the heck does windowBackground do anyway?
EDIT: I've been able to change the background of the title with this hack:
int actionBarTitleId = Resources.getSystem().getIdentifier("action_bar_title", "id", "android");
if (actionBarTitleId > 0) {
TextView title = (TextView) findViewById(actionBarTitleId);
if (title != null)
title.setBackgroundColor(getResources().getColor(R.color.brown1));
}
Now how do I do this for the logo and the "Up" arrow to the left of the logo?

The solution is to remove the titleTextStyle from the style XML.

Can't make the custom DialogFragment transparent over the Fragment

I need to create a dialog over a fragment (that takes up the whole screen). The dialog needs to be a floating dialog that will be positioned over the fragment with the fragment darkened out outside of the fragment..
For the custom Dialog, i have a linearLayout that has curved edges, no matter what i do, the dialog has a black bordering on all sides (very small). I've tried everything to make it transparent and go away (so that all of the dialog is just the linear layout - curved box)
For the DialogFragment, this is what I have for onCreateView
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
LinearLayout layout =(LinearLayout)inflater.inflate(R.layout.custom_dialog, null);
LinearLayout item = (LinearLayout)layout.findViewById(R.id.display_item);
populateItemData(item, inflater);
return layout;
}
custom_dialog is just a LinearLayout that has android:backgroung set to #000000
This is my style for the custom Dialog
<style name="CustomDialog" parent="android:style/Theme.Dialog">
<item name="android:windowBackground">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:alwaysDrawnWithCache">false</item>
<item name="android:windowContentOverlay">#null</item>
</style>
I tried all kinds of combinations in this style (from what I've seen online) and I can't get rid of that annoying black bordering, I can paint it white or any other color if i set that LinearLayout background to anything other than #000000...
I've spent literally 3-4 hours on this, i hope someone else can help out...

Try
getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
in your DialogFragment's onCreateView

Try this (How to I create a 100% custom DialogFragment)
this work for dialog
Dialog dialog = new Dialog(getActivity());
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
// layout to display
dialog.setContentView(R.layout.add_edit);
// set color transpartent
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.show();

Set your theme like this worked for me
<style name="MyDialog" parent="Base.Theme.AppCompat.Light.Dialog">
<item name="android:windowBackground">#android:color/transparent</item>
</style>
And in your dialog fragment set like this
public class Progress extends DialogFragment {
int style = DialogFragment.STYLE_NO_TITLE;
int theme = R.style.MyDialog;
public Progress() {
}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(style, theme);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.progress, container, false);
}
}

You can achieve by adding this in
Dialog Fragment or BottomSheetDialogFragment
In onCreateDialog Method
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);
dialog.getWindow().setGravity(Gravity.BOTTOM);
dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
return dialog;
}

In onActivityCreated
getDialog().getWindow().getAttributes().alpha = 0.9f; // An alpha value to apply to this entire window. An alpha of 1.0 means fully opaque and 0.0 means fully transparent
for DialogFragment transparent

For completely transparent use:
setStyle(DialogFragment.STYLE_NO_FRAME, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
For custom background -create a style file in you values folder (values/style.xml) and use it:
setStyle(DialogFragment.STYLE_NO_FRAME, yourpackagename.R.style.YOURE_CUSTOM_STYLE);
in your style file override the atribute:
android:windowBackground to be #color/DialogBackgroundBlackSemiTransparent

<style name="BaseDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/colorAccent</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:colorBackground">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:windowActionModeOverlay">false</item>
<item name="android:windowCloseOnTouchOutside">true</item>
<item name="android:backgroundDimAmount">.00</item>//this line is changed alpha from 1.0 to 0.0(full transparent)
</style>
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(STYLE_NO_FRAME, R.style.BaseDialogTheme);
}

Those who are using AlertDialog builder in onCreateDialog instead of onCreateView can assign theme like following code. Complete set of themes can be found from R.style. Don't forget that some of them supported recently and are not available on old device phones.
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), android.R.style.Theme_Translucent);
View view = getActivity().getLayoutInflater().inflate(R.layout.dialog_album, null);
builder.setView(view);
return builder.create();
}

Try this if you like to:
public TransparentDialog()
{
super();
setStyle(STYLE_NO_FRAME, R.style.AppTheme);
}

Per accepted answer, in Kotlin
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
var v = super.onCreateView(inflater, container, savedInstanceState)
dialog?.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
return v
}

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Fullscreen DialogFragment with translucent StatusBar - android

Try use the same Style from your App. I tested with simple dialog without fragment and works fine. Like that: new Dialog(context, R.style.CardDetailsDialogStyle);

You have to set fitsystemwindows = true. Other way is to add a Space with 0dp and change its height to 25dp when the dialog is going to show. To change the space size, use layout params, check this post: How to create a RelativeLayout programmatically with two buttons one on top of the other?

<style name="DialogTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowTranslucentStatus">true</item> <item name="android:windowNoTitle">true</item> <item name="android:windowFullscreen">true</item> <item name="android:windowIsFloating">false</item> </style>

Just apply android:fitsSystemWindows="true" to your root ViewGroup: `<FrameLayout android:fitsSystemWindows="true"> <View .../>

Related

the status bar changes it's color to black inside fullscreen dialog fragment android

BottomSheetDialog with transparent background

Changing dialogfragment background color (Using the Android Holo Colors Generator Xml Template)

Different backgrounds in one Activity

Can't make the custom DialogFragment transparent over the Fragment

Categories

Resources