CODEWITHSUNDEEP
javaandroidandroid-dialogfragment
Joao Sardinha
Joao Sardinha

Reputation: 3423

Android: change background color showing dialog

How do we change the background's foreground color when we show a DialogFragment, like when we click on the fab in the evernote or messenger app, I know the way to do it will probably be diffrent but that's the kind of effect I'm looking for

Upvotes: 4

Views: 4131

Answers (3)

porya74
porya74

Reputation: 112

It might be some late to answer. but i combined some solutions and gained the proper way to achieve this goal.

first create the following theme in your styles.xml:

<style name="MyCustomTheme" parent="@android:style/Theme.Panel">
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:backgroundDimAmount">0.7</item>
</style>

first enable an attribute named 'backgroundDimEnabled' to make the screen foreground darker when dialogs showing on the screen. then set a float value for amount of darkness.(0 < value < 1)

and use this theme in the onCreateDialog Method in your dialog fragment.

 @Override
public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
    final AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(), R.style.MyCustomTheme);
    View addDialogView = getActivity().getLayoutInflater().inflate(R.layout.word_detail_fragment, null);
    builder.setView(addDialogView);

    return builder.create();
}

Upvotes: 0

Arnab Banerjee
Arnab Banerjee

Reputation: 165

I have found a work around for this problem. Here is the code. In styles.xml design a custom theme.

styles.xml

<style name="AppTheme.CustomTheme">
        <item name="android:windowIsFloating">true</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
</style>

In manifest file use this style on the popup window.

Android Manifest

<activity android:name=".DialogDesign"
            android:theme="@style/AppTheme.CustomTheme"
            android:screenOrientation="portrait"></activity>

In layout.xml file use 3 different relativeLayouts, one as root, another as faded background and another as pop-up window.

activity_dialog_design.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DialogDesign">

    <RelativeLayout
        android:id="@+id/fadedBg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#7fffffff"
        android:layout_margin="0dp"/>

    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="500dp"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="100dp"
        android:layout_marginBottom="100dp"
        android:layout_centerHorizontal="true"
        android:background="@android:color/white"/>
</RelativeLayout>

In activity.java file set the height and width of the faded window.

DialogDesign.java

public class DialogDesign extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_dialog_design);
        RelativeLayout fadedBg=(RelativeLayout)findViewById(R.id.fadedBg);

        WindowManager.LayoutParams params = getWindow().getAttributes();
        params.height = 1800;
        params.width = 1100;

        this.getWindow().setAttributes(params);
    }
}

There, It is done! Add whatever you want to add in the inner most relative layout.

Upvotes: 2

Eugen Pechanec
Eugen Pechanec

Reputation: 38223

Easy answer

The amount by which the content behind a floating window (such as dialog) goes darker is determined by backgroundDimAmount attribute in your theme:

<style name="AppTheme" parent="@style/Theme.AppCompat">
    <item name="android:backgroundDimAmount">0.6</item>
</style>

It is limited to black color. 0.6 is the default value.

EDIT

The above answer did not work, looks like the value needs to be applied to the dialog theme, not the activity theme.

<style name="AppTheme" parent="@style/Theme.AppCompat">
    <item name="alertDialogTheme">@style/AppTheme.Dialog.Alert</item>
</style>

<style name="AppTheme.Dialog.Alert" parent="@style/Theme.AppCompat.Dialog.Alert">
    <item name="android:backgroundDimAmount">0.6</item>
</style>

Difficult answer

Achieving a different color would require disabling this system dim and heavily customizing dialog background. I'll leave this to someone else.

Upvotes: 1

Related Questions