Bottom Sheet (Modal)

Bottom Sheet (Modal)

Modal bottom sheet are more like a dialog in appearance.One must have seen a deeplink dialog which pops when you want to share stuff, something like that, except here he manipulate and populate the contents on that dialog. 

The fact that they appear on top of our other UI components, in order to resume interaction to page we need to dismiss or close the bottom sheet. When the modal bottom sheet slides up, rest of the page appears dim giving focus to the bottom sheet.

Modal Bottom Sheet requires BottomSheetDialogFragment, which is a thin layer on top of regular support library fragment that renders your fragment as Bottom Sheet.

The development of this bottom sheet is different than persistent bottom sheet. 

 public class ModalSheetDialog extends BottomSheetDialogFragment {  
   String mString;  
   static ModalSheetDialog newInstance(String string) {  
     ModalSheetDialog f = new ModalSheetDialog();  
     Bundle args = new Bundle();  
     args.putString("string", string);  
     f.setArguments(args);  
     return f;  
   }  
   @Override  
   public void onCreate(@Nullable Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     mString = getArguments().getString("string");  
   }  
   @Override  
   public View onCreateView(LayoutInflater inflater, ViewGroup container,  
                Bundle savedInstanceState) {  
     View v = inflater.inflate(R.layout.bottom_layout_modal, container, false);  
     TextView tv = (TextView) v.findViewById(R.id.details);  
     return v;  
   }  
 }  

This above dialog will be the bottom sheet, which will animate on top of the screen. From your MainActivity call the dialog.

 public class MainActivity extends AppCompatActivity {  
   private ModalSheetDialog myBottomSheet;  
   private Button btnKnowMore;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     myBottomSheet = ModalSheetDialog.newInstance("Modal Bottom Sheet");  
     btnKnowMore = (Button) findViewById(R.id.btn_know_more);  
     btnKnowMore.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View view) {  
         myBottomSheet.show(getSupportFragmentManager(), myBottomSheet.getTag());  
       }  
     });  
   }  
 }  

Full code is available here.