Bottom Sheet implementation for Android – Logicchip
Bottom sheet is a component that slides up from bottom of the screen to reveal more content. You can find more detailed information of Bottom Sheet on Google Material Design guidelines.
MainActivity
public class MainActivity extends AppCompatActivity {
private AdapterColor adapterColor;
private ArrayList<TypeColor> typeColors;
private int posOfColor=0,posOfCountry=0;
private String colorSelected="";
private RecyclerView recycleViewDialog,recycleViewPersistent;
private AdapterCountry adapterCountry;
private ArrayList<TypeCountry> typeCountries;
private ConstraintLayout constraintLayoutPersistent;
private BottomSheetBehavior bottomSheetBehaviorPersistant;
private ImageButton imgBtnUp;
private AdapterPersistent adapterPersistent;
private ArrayList<TypePersistent> typePersistents;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
constraintLayoutPersistent=(ConstraintLayout)findViewById(R.id.constraintLayoutPersistent);
imgBtnUp=(ImageButton)findViewById(R.id.imgBtnUp);
bottomSheetBehaviorPersistant=BottomSheetBehavior.from(constraintLayoutPersistent);
recycleViewPersistent=(RecyclerView)findViewById(R.id.recycleViewPersistent);
recycleViewPersistent.setHasFixedSize(true);
recycleViewPersistent.setLayoutManager(new LinearLayoutManager(this));
ForPersistent();
bottomSheetBehaviorPersistant.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState==BottomSheetBehavior.STATE_EXPANDED){
if (imgBtnUp.getRotation()==0F){
// btnBottomSheet.setText("Close Sheet");
float deg = imgBtnUp.getRotation() + 180F;
imgBtnUp.animate().rotation(deg).setInterpolator(new AccelerateDecelerateInterpolator());
}
}
switch (newState) {
case BottomSheetBehavior.STATE_HIDDEN:
break;
case BottomSheetBehavior.STATE_EXPANDED: {
// btnBottomSheet.setText("Close Sheet");
//float deg = imgBtnUp.getRotation() + 180F;
//imgBtnUp.animate().rotation(deg).setInterpolator(new AccelerateDecelerateInterpolator());
}
break;
case BottomSheetBehavior.STATE_COLLAPSED: {
// btnBottomSheet.setText("Expand Sheet");
if (imgBtnUp.getRotation()==180F){
float deg = 0F;
imgBtnUp.animate().rotation(deg).setInterpolator(new AccelerateDecelerateInterpolator());
}
}
break;
case BottomSheetBehavior.STATE_DRAGGING:
break;
case BottomSheetBehavior.STATE_SETTLING:
break;
}
}
@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
// Toast.makeText(MainActivity.this,"Slide",Toast.LENGTH_SHORT).show();
}
});
}
public void ForPersistent(){
typePersistents=new ArrayList<TypePersistent>();
typePersistents.add(new TypePersistent("Hospital",R.drawable.ic_local_hospital));
typePersistents.add(new TypePersistent("Fuel Station",R.drawable.ic_ev_station));
typePersistents.add(new TypePersistent("ATM",R.drawable.ic_local_atm));
typePersistents.add(new TypePersistent("Restaurant",R.drawable.ic_restaurant));
typePersistents.add(new TypePersistent("Movies",R.drawable.ic_local_movies));
adapterPersistent=new AdapterPersistent(MainActivity.this,typePersistents);
recycleViewPersistent.setAdapter(adapterPersistent);
}
public void toggleBottomSheet(View view) {
if (bottomSheetBehaviorPersistant.getState() != BottomSheetBehavior.STATE_EXPANDED) {
float deg = imgBtnUp.getRotation() + 180F;
imgBtnUp.animate().rotation(deg).setInterpolator(new AccelerateDecelerateInterpolator());
bottomSheetBehaviorPersistant.setState(BottomSheetBehavior.STATE_EXPANDED);
//btnBottomSheet.setText("Close sheet");
} else {
bottomSheetBehaviorPersistant.setState(BottomSheetBehavior.STATE_COLLAPSED);
//btnBottomSheet.setText("Expand sheet");
float deg = 0F;
imgBtnUp.animate().rotation(deg).setInterpolator(new AccelerateDecelerateInterpolator());
}
}
public void BottomSheetDialog(View view){
typeCountries=new ArrayList<TypeCountry>();
typeCountries.add(new TypeCountry("India",false));
typeCountries.add(new TypeCountry("United States",false));
typeCountries.add(new TypeCountry("China",false));
typeCountries.add(new TypeCountry("Spain",false));
typeCountries.add(new TypeCountry("Germany",false));
typeCountries.add(new TypeCountry("Argentina",false));
typeCountries.add(new TypeCountry("Brazil",false));
typeCountries.add(new TypeCountry("Canada",false));
typeCountries.add(new TypeCountry("Dubai",false));
typeCountries.add(new TypeCountry("Mexico",false));
adapterCountry=new AdapterCountry(this,typeCountries);
View vu= getLayoutInflater().inflate(R.layout.bottom_sheet_dialog, null);
recycleViewDialog=(RecyclerView)vu.findViewById(R.id.recycleViewDialog);
recycleViewDialog.setHasFixedSize(true);
recycleViewDialog.setLayoutManager(new LinearLayoutManager(this));
recycleViewDialog.setAdapter(adapterCountry);
BottomSheetDialog dialog = new BottomSheetDialog(this);
dialog.setContentView(vu);
dialog.show();
SelectCountry(posOfCountry);
}
public void SelectCountry(int pos){
posOfCountry=pos;
for (int i=0;i<typeCountries.size();i++){
if (typeCountries.get(i).isSelected()){
typeCountries.get(i).setSelected(false);
adapterCountry.notifyItemChanged(i);
}
}
//adapterItemThumb.notifyDataSetChanged();
typeCountries.get(pos).setSelected(true);
adapterCountry.notifyItemChanged(pos);
}
public void BottomSheetFragment(View view){
typeColors=new ArrayList<TypeColor>();
typeColors.add(new TypeColor("Red","#d32f2f",true));
typeColors.add(new TypeColor("Pink","#c2185b",false));
typeColors.add(new TypeColor("Purple","#7b1fa2",false));
typeColors.add(new TypeColor("Deep Purple","#512da8",false));
typeColors.add(new TypeColor("Indigo","#303f9f",false));
typeColors.add(new TypeColor("Blue","#1976d2",false));
typeColors.add(new TypeColor("Light blue","#0288d1",false));
typeColors.add(new TypeColor("Cyan","#0097a7",false));
typeColors.add(new TypeColor("Teal","#00796b",false));
typeColors.add(new TypeColor("Green","#388e3c",false));
typeColors.add(new TypeColor("Light green","#689f38",false));
typeColors.add(new TypeColor("Lime","#afb42b",false));
typeColors.add(new TypeColor("Yellow","#fbc02d",false));
typeColors.add(new TypeColor("Amber","#ffa000",false));
typeColors.add(new TypeColor("Orange","#f57c00",false));
typeColors.add(new TypeColor("Deep orange","#e64a19",false));
typeColors.add(new TypeColor("Brown","#5d4037",false));
typeColors.add(new TypeColor("Gray","#616161",false));
typeColors.add(new TypeColor("Blue Gray","#455a64",false));
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
BottomSheetColor.newInstance(typeColors).show(transaction, "colorFragment");
// SelectPosition();
}
public void SelectPosition(){
BottomSheetColor bottomSheetColor=(BottomSheetColor)getSupportFragmentManager().findFragmentByTag("colorFragment");
bottomSheetColor.addSelection(posOfColor);
}
public void ColorSelect(TypeColor typeColor,int pos){
BottomSheetColor bottomSheetColor=(BottomSheetColor)getSupportFragmentManager().findFragmentByTag("colorFragment");
bottomSheetColor.addSelection(pos);
posOfColor=pos;
//bottomSheetColor.dismiss();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}ActivityMain xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<!-- Adding bottom sheet after main content -->
<include layout="@layout/bottom_sheet_persistent" />
</android.support.design.widget.CoordinatorLayout>ContentMain xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_main">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:textAllCaps="false"
android:onClick="toggleBottomSheet"
android:layout_gravity="center"
style="@style/Base.Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Persistent bottom sheet"/>
<Button
android:textAllCaps="false"
android:onClick="BottomSheetDialog"
android:layout_gravity="center"
style="@style/Base.Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dialog bottom sheet"/>
<Button
android:textAllCaps="false"
android:onClick="BottomSheetFragment"
android:layout_gravity="center"
style="@style/Base.Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment bottom sheet"/>
</LinearLayout>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
