How can I dim the background when Bottomsheet is displayed, without using Dialog? How can I dim the background when Bottomsheet is displayed, without using Dialog? android android

How can I dim the background when Bottomsheet is displayed, without using Dialog?


You can use this code1. MainActivity.xml

<android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/main_content"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><ScrollView    android:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:paddingTop="24dp">        <Button            android:id="@+id/button_1"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="Button 1"            android:padding="16dp"            android:layout_margin="8dp"            android:textColor="@android:color/white"            android:background="@android:color/holo_green_dark"/>    </LinearLayout></ScrollView><View    android:visibility="gone"    android:id="@+id/bg"    android:background="#99000000"    android:layout_width="match_parent"    android:layout_height="match_parent"/><android.support.v4.widget.NestedScrollView    android:id="@+id/bottom_sheet"    android:layout_width="match_parent"    android:layout_height="350dp"    android:clipToPadding="true"    android:background="@android:color/holo_orange_light"    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"    >    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="aefwea"        android:padding="16dp"        android:textSize="16sp"/></android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout>
  1. MAinActivity.java

    public class MainActivity extends AppCompatActivity implements View.OnClickListener {private static final String TAG = "MainActivity";private BottomSheetBehavior mBottomSheetBehavior;View bottomSheet;View mViewBg;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    bottomSheet = findViewById(R.id.bottom_sheet);    mViewBg = findViewById(R.id.mViewBg);    Button button1 = (Button) findViewById(R.id.button_1);    button1.setOnClickListener(this);    mViewBg.setOnClickListener(this);    mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);    mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {        @Override        public void onStateChanged(@NonNull View bottomSheet, int newState) {            if (newState == BottomSheetBehavior.STATE_COLLAPSED)                mViewBg.setVisibility(View.GONE);        }        @Override        public void onSlide(@NonNull View bottomSheet, float slideOffset) {            Log.d(TAG, "onSlide: slideOffset" + slideOffset + "");           mViewBg.setVisibility(View.VISIBLE);            mViewBg.setAlpha(slideOffset);        }    });}@Overridepublic void onClick(View v) {    switch (v.getId()) {        case R.id.button_1: {            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);            break;        }        case R.id.bg: {            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);            break;        }    }}@Overridepublic boolean dispatchTouchEvent(MotionEvent event) {    if (event.getAction() == MotionEvent.ACTION_DOWN) {        if (mBottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {            Rect outRect = new Rect();            bottomSheet.getGlobalVisibleRect(outRect);            if (!outRect.contains((int) event.getRawX(), (int) event.getRawY())) {                mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);                return true;            }        }    }    return super.dispatchTouchEvent(event);}}


You can create a custom fragment that has layout (kind of bottomSheet) attached to bottom and make the background transparent_black & when touching on that BG remove that fragment. Ex :

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ff2020"    android:orientation="vertical"    tools:context="com.example.jiffysoftwaresolutions.copypastesampleapp.MainActivity">    <Button        android:id="@+id/show"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Show" />    <FrameLayout        android:id="@+id/bottom_sheet_fragment_container"        android:layout_width="match_parent"        android:layout_height="match_parent"></FrameLayout></RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {    private BottomSheetFragment bottomSheetFragment;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.show).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                if (bottomSheetFragment == null) {                    bottomSheetFragment = new BottomSheetFragment();                }                getSupportFragmentManager().beginTransaction().add(R.id.bottom_sheet_fragment_container, bottomSheetFragment).addToBackStack(null).commit();            }        });    }    public void removeBottomSheet() {        try {            getSupportFragmentManager().beginTransaction().remove(bottomSheetFragment).addToBackStack(null).commit();        } catch (Exception e) {        }    }}

BottomSheetFragment.java

public class BottomSheetFragment extends Fragment {    private View rootView;    private LayoutInflater layoutInflater;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);    }    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        rootView = inflater.inflate(R.layout.bottom_sheet_layout, container, false);        rootView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                // remove sheet on BG touch                ((MainActivity) getActivity()).removeBottomSheet();            }        });        return rootView;    }}

bottom_sheet_layout.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#6d000000"    android:gravity="bottom">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#fff"        android:orientation="vertical"        android:padding="5dp">        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="Button1"            android:textColor="#000" />        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="Button2"            android:textColor="#000" />    </LinearLayout></RelativeLayout>

To Add that fragment with bottom_top/animation.. you can follow this link : Android Fragments and animation


Using the Interface - onSlide which as a parameter slideOffSet of type float , can be used to dim the background. The new offset of this bottom sheet within [-1,1] range. Offset increases as this bottom sheet is moving upward. From 0 to 1 the sheet is between collapsed and expanded states and from -1 to 0 it is between hidden and collapsed states.

if ( slideOffSet>=0 && slideOffSet<=1 ) {    mainActivityLayoutView.setAlpha( 1f - slideOffSet ); }

where mainActivityLayoutView is the id for NestedScrollView , holding the main contents of the activity.