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>
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.