Android How To Create Bottom Sheet Full
1. Project Structure
Package name : full.bottomsheet.fyprojects.com.bottomsheetfull
2. Gradle
apply plugin: 'com.android.application' android { compileSdkVersion 28 defaultConfig { applicationId "full.bottomsheet.fyprojects.com.bottomsheetfull" minSdkVersion 16 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support.constraint:constraint-layout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' implementation 'com.android.support:design:28.0.0' implementation 'com.android.support:support-v13:28.0.0' implementation 'com.android.support:recyclerview-v7:28.0.0' implementation 'com.github.bumptech.glide:glide:3.7.0' implementation 'com.balysv:material-ripple:1.0.2' }
3. Res Folder Dtructure
activity_main.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" android:id="@+id/bgLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <include layout="@layout/toolbar" /> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="vertical" android:scrollingCache="true" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
fragment_bottom_sheet_dialog_full <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/lyt_parent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageButton android:id="@+id/bt_close" android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@android:color/white" app:srcCompat="@drawable/ic_close" /> <View android:layout_width="30dp" android:layout_height="0dp" /> <TextView android:id="@+id/name_toolbar" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_vertical" android:text="New event" android:textAppearance="@style/Base.TextAppearance.AppCompat.Title" android:textColor="@android:color/white" /> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@android:color/white" app:srcCompat="@drawable/ic_create" /> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@android:color/white" app:srcCompat="@drawable/ic_more_vert" /> </LinearLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white" android:orientation="vertical" android:padding="@dimen/spacing_large"> <LinearLayout android:id="@+id/lyt_profile" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_marginBottom="@dimen/spacing_xmedium" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/image" android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" android:src="@drawable/photo_female_1" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Item Title" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_80" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_xmedium" android:layout_marginTop="@dimen/spacing_xmedium" android:orientation="horizontal"> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" android:tint="@color/colorPrimary" app:srcCompat="@drawable/ic_phone" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="(650) 555-1234" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_90" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Mobile" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="@color/grey_40" /> </LinearLayout> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@color/green_500" app:srcCompat="@drawable/ic_chat" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="(323) 555-6789" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_90" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Work" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="@color/grey_40" /> </LinearLayout> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="?attr/selectableItemBackgroundBorderless" android:tint="@color/green_500" app:srcCompat="@drawable/ic_chat" /> </LinearLayout> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:orientation="horizontal"> <View android:layout_width="?attr/actionBarSize" android:layout_height="0dp" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/grey_10" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_xmedium" android:layout_marginTop="@dimen/spacing_xmedium" android:orientation="horizontal"> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" android:tint="@color/colorPrimary" app:srcCompat="@drawable/ic_email" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:gravity="center_vertical" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="my.email@example.com" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_90" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Personal" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="@color/grey_40" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:gravity="center_vertical" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="my.email@example.com" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_90" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Work" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="@color/grey_40" /> </LinearLayout> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_large" android:layout_marginTop="@dimen/spacing_large" android:orientation="horizontal"> <View android:layout_width="?attr/actionBarSize" android:layout_height="0dp" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/grey_10" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_xmedium" android:layout_marginTop="@dimen/spacing_xmedium" android:orientation="horizontal"> <ImageButton android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" android:tint="@color/colorPrimary" app:srcCompat="@drawable/ic_location" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="0dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:minHeight="?attr/actionBarSize" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="2000 Main Street \nSan Francisco, CA 94112" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_90" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Personal" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="@color/grey_40" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_mlarge" android:gravity="center_vertical" android:minHeight="?attr/actionBarSize" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="1600 Amphitheatre Pkwy \nMountain View, CA 94043" android:textAppearance="@style/TextAppearance.AppCompat.Subhead" android:textColor="@color/grey_90" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Work" android:textAppearance="@style/TextAppearance.AppCompat.Small" android:textColor="@color/grey_40" /> </LinearLayout> </LinearLayout> </LinearLayout> <View android:id="@+id/lyt_spacer" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </android.support.v4.widget.NestedScrollView> </LinearLayout>
item_people_left.xml <?xml version="1.0" encoding="utf-8"?> <com.balysv.materialripple.MaterialRippleLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/lyt_parent" style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/white" android:focusable="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical" android:orientation="horizontal"> <View android:layout_width="@dimen/spacing_large" android:layout_height="wrap_content" /> <ImageView android:id="@+id/image" android:layout_width="45dp" android:layout_height="45dp" android:background="@android:color/transparent" android:src="@drawable/photo_female_1" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="wrap_content" /> <TextView android:id="@+id/name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="Item Title" android:textAppearance="@style/TextAppearance.AppCompat.Medium" android:textColor="@color/grey_80" /> <View android:layout_width="@dimen/spacing_large" android:layout_height="wrap_content" /> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout>
toolbar.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:contentInsetStartWithNavigation="0dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
menu_basic.xml <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_search" android:icon="@drawable/ic_search" android:orderInCategory="100" android:title="Search" app:showAsAction="always" /> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="Settings" app:showAsAction="never" /> </menu>
menu_people_more.xml <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_preview" android:orderInCategory="100" android:title="Preview" app:showAsAction="never" /> <item android:id="@+id/action_share" android:orderInCategory="100" android:title="Share" app:showAsAction="never" /> <item android:id="@+id/action_get_link" android:orderInCategory="100" android:title="Get link" app:showAsAction="never" /> </menu>
array.xml <?xml version="1.0" encoding="utf-8"?> <resources> <integer-array name="people_images"> <item>@drawable/photo_male_1</item> <item>@drawable/photo_male_2</item> <item>@drawable/photo_female_1</item> <item>@drawable/photo_female_2</item> <item>@drawable/photo_male_3</item> <item>@drawable/photo_female_3</item> <item>@drawable/photo_male_4</item> <item>@drawable/photo_female_4</item> <item>@drawable/photo_female_5</item> <item>@drawable/photo_male_5</item> <item>@drawable/photo_female_6</item> <item>@drawable/photo_male_6</item> <item>@drawable/photo_male_7</item> <item>@drawable/photo_female_7</item> <item>@drawable/photo_female_8</item> </integer-array> <string-array name="people_names"> <item>Anderson Thomas</item> <item>Adams Green</item> <item>Laura Michelle</item> <item>Betty L</item> <item>Miller Wilson</item> <item>Garcia Lewis</item> <item>Roberts Turner</item> <item>Mary Jackson</item> <item>Sarah Scott</item> <item>Kevin John</item> <item>Elizabeth</item> <item>Evans Collins</item> <item>Roberts</item> <item>Betty C</item> <item>Susan Lee</item> </string-array> </resources>
colors.xml <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#1976D2</color> <color name="colorPrimaryDark">#1565C0</color> <color name="colorPrimaryLight">#1E88E5</color> <color name="colorAccent">#FF4081</color> <color name="colorAccentDark">#F50057</color> <color name="colorAccentLight">#FF80AB</color> <color name="grey_3">#f7f7f7</color> <color name="grey_5">#f2f2f2</color> <color name="grey_10">#e6e6e6</color> <color name="grey_20">#cccccc</color> <color name="grey_40">#999999</color> <color name="grey_60">#666666</color> <color name="grey_80">#37474F</color> <color name="grey_90">#263238</color> <color name="grey_95">#1a1a1a</color> <color name="grey_100_">#0d0d0d</color> <color name="green_50">#E8F5E9</color> <color name="green_100">#C8E6C9</color> <color name="green_200">#A5D6A7</color> <color name="green_300">#81C784</color> <color name="green_400">#66BB6A</color> <color name="green_500">#4CAF50</color> <color name="green_600">#43A047</color> <color name="green_700">#388E3C</color> <color name="green_800">#2E7D32</color> <color name="green_900">#1B5E20</color> <color name="green_A100">#B9F6CA</color> <color name="green_A200">#69F0AE</color> <color name="green_A400">#00E676</color> <color name="green_A700">#00C853</color> </resources>
dimens.xml <resources> <!--genaral spacing--> <dimen name="spacing_xsmall">2dp</dimen> <dimen name="spacing_small">3dp</dimen> <dimen name="spacing_medium">5dp</dimen> <dimen name="spacing_xmedium">7dp</dimen> <dimen name="spacing_middle">10dp</dimen> <dimen name="spacing_large">15dp</dimen> <dimen name="spacing_smlarge">18dp</dimen> <dimen name="spacing_mlarge">20dp</dimen> <dimen name="spacing_mxlarge">25dp</dimen> <dimen name="spacing_xlarge">35dp</dimen> <dimen name="spacing_xmlarge">40dp</dimen> <dimen name="spacing_xxlarge">50dp</dimen> <dimen name="spacing_xxxlarge">55dp</dimen> <dimen name="appbar_padding_top">8dp</dimen> </resources>
strings-data.xml <resources> <string name="middle_lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur ipsum in placerat molestie. Fusce quis mauris a enim sollicitudin</string> </resources>
strings.xml <resources> <string name="app_name">BottomSheetBasic</string> <string name="bottom_sheet_behavior" translatable="false">android.support.design.widget.BottomSheetBehavior</string> </resources>
styles.xml <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <!--style for ripple library--> <style name="RippleStyleWhite"> <item name="mrl_rippleOverlay">true</item> <item name="mrl_rippleColor">#80FFFFFF</item> <item name="mrl_rippleHover">true</item> <item name="mrl_rippleAlpha">0.2</item> </style> <style name="RippleStyleBlack" parent="RippleStyleWhite"> <item name="mrl_rippleColor">#8096989A</item> </style> <style name="Button.Primary" parent="@style/Widget.AppCompat.Button.Colored"> <item name="colorButtonNormal">@color/colorPrimary</item> <item name="android:textColor">@android:color/white</item> </style> </resources>
4. Adapter
AdapterPeopleLeft package full.bottomsheet.fyprojects.com.bottomsheetfull.adapter; import android.content.Context; import android.support.v7.widget.PopupMenu; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; import java.util.List; import full.bottomsheet.fyprojects.com.bottomsheetfull.R; import full.bottomsheet.fyprojects.com.bottomsheetfull.model.People; import full.bottomsheet.fyprojects.com.bottomsheetfull.utils.Tools; public class AdapterPeopleLeft extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private List<People> items = new ArrayList<>(); private Context ctx; private OnItemClickListener onItemClickListener; private OnMoreButtonClickListener onMoreButtonClickListener; public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; } public void setOnMoreButtonClickListener(final OnMoreButtonClickListener onMoreButtonClickListener) { this.onMoreButtonClickListener = onMoreButtonClickListener; } public AdapterPeopleLeft(Context context, List<People> items) { this.items = items; ctx = context; } public class ViewHolder extends RecyclerView.ViewHolder { // each data item is just a string in this case public ImageView image; public TextView name; public View lyt_parent; public ViewHolder(View v) { super(v); image = (ImageView) v.findViewById(R.id.image); name = (TextView) v.findViewById(R.id.name); lyt_parent = (View) v.findViewById(R.id.lyt_parent); } } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { RecyclerView.ViewHolder vh; View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_people_left, parent, false); vh = new ViewHolder(v); return vh; } // Replace the contents of a view (invoked by the layout manager) @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) { if (holder instanceof ViewHolder) { ViewHolder view = (ViewHolder) holder; final People o = items.get(position); view.name.setText(o.name); Tools.displayImageRound(ctx, view.image, o.image); view.lyt_parent.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (onItemClickListener == null) return; onItemClickListener.onItemClick(view, o, position); } }); } } private void onMoreButtonClick(final View view, final People people) { PopupMenu popupMenu = new PopupMenu(ctx, view); popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { onMoreButtonClickListener.onItemClick(view, people, item); return true; } }); popupMenu.inflate(R.menu.menu_people_more); popupMenu.show(); } @Override public int getItemCount() { return items.size(); } public People getItem(int position) { return items.get(position); } public interface OnItemClickListener { void onItemClick(View view, People obj, int pos); } public interface OnMoreButtonClickListener { void onItemClick(View view, People obj, MenuItem item); } }
5. Data
DataGenerator package full.bottomsheet.fyprojects.com.bottomsheetfull.data; import android.content.Context; import android.content.res.TypedArray; import java.util.ArrayList; import java.util.Collections; import java.util.List; import full.bottomsheet.fyprojects.com.bottomsheetfull.R; import full.bottomsheet.fyprojects.com.bottomsheetfull.model.People; import full.bottomsheet.fyprojects.com.bottomsheetfull.utils.Tools; @SuppressWarnings("ResourceType") public class DataGenerator { /** * Generate dummy data people * * @param ctx android context * @return list of object */ public static List<People> getPeopleData(Context ctx) { List<People> items = new ArrayList<>(); TypedArray drw_arr = ctx.getResources().obtainTypedArray(R.array.people_images); String name_arr[] = ctx.getResources().getStringArray(R.array.people_names); for (int i = 0; i < drw_arr.length(); i++) { People obj = new People(); obj.image = drw_arr.getResourceId(i, -1); obj.name = name_arr[i]; obj.email = Tools.getEmailFromName(obj.name); obj.imageDrw = ctx.getResources().getDrawable(obj.image); items.add(obj); } Collections.shuffle(items); return items; } }
6.Fragment
FragmentBottomSheetDialogFull package full.bottomsheet.fyprojects.com.bottomsheetfull.fragment; import android.app.Dialog; import android.content.res.TypedArray; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.AppBarLayout; import android.support.design.widget.BottomSheetBehavior; import android.support.design.widget.BottomSheetDialog; import android.support.design.widget.BottomSheetDialogFragment; import android.view.View; import android.view.ViewGroup; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import full.bottomsheet.fyprojects.com.bottomsheetfull.R; import full.bottomsheet.fyprojects.com.bottomsheetfull.model.People; import full.bottomsheet.fyprojects.com.bottomsheetfull.utils.Tools; public class FragmentBottomSheetDialogFull extends BottomSheetDialogFragment { private BottomSheetBehavior mBehavior; private AppBarLayout app_bar_layout; private LinearLayout lyt_profile; private People people; public void setPeople(People people) { this.people = people; } @NonNull @Override public Dialog onCreateDialog(Bundle savedInstanceState) { final BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState); final View view = View.inflate(getContext(), R.layout.fragment_bottom_sheet_dialog_full, null); dialog.setContentView(view); mBehavior = BottomSheetBehavior.from((View) view.getParent()); mBehavior.setPeekHeight(BottomSheetBehavior.PEEK_HEIGHT_AUTO); app_bar_layout = (AppBarLayout) view.findViewById(R.id.app_bar_layout); lyt_profile = (LinearLayout) view.findViewById(R.id.lyt_profile); // set data to view Tools.displayImageRound(getActivity(), (ImageView) view.findViewById(R.id.image), people.image); ((TextView) view.findViewById(R.id.name)).setText(people.name); ((TextView) view.findViewById(R.id.name_toolbar)).setText(people.name); ((View) view.findViewById(R.id.lyt_spacer)).setMinimumHeight(Tools.getScreenHeight() / 2); hideView(app_bar_layout); mBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { if (BottomSheetBehavior.STATE_EXPANDED == newState) { showView(app_bar_layout, getActionBarSize()); hideView(lyt_profile); } if (BottomSheetBehavior.STATE_COLLAPSED == newState) { hideView(app_bar_layout); showView(lyt_profile, getActionBarSize()); } if (BottomSheetBehavior.STATE_HIDDEN == newState) { dismiss(); } } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { } }); ((ImageButton) view.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dismiss(); } }); return dialog; } @Override public void onStart() { super.onStart(); mBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED); } private void hideView(View view) { ViewGroup.LayoutParams params = view.getLayoutParams(); params.height = 0; view.setLayoutParams(params); } private void showView(View view, int size) { ViewGroup.LayoutParams params = view.getLayoutParams(); params.height = size; view.setLayoutParams(params); } private int getActionBarSize() { final TypedArray styledAttributes = getContext().getTheme().obtainStyledAttributes(new int[]{android.R.attr.actionBarSize}); int size = (int) styledAttributes.getDimension(0, 0); return size; } }
7. Model
People package basic.bottomsheet.fyprojects.com.bottomsheetbasic.model; import android.graphics.drawable.Drawable; public class People { public int image; public Drawable imageDrw; public String name; public String email; public boolean section = false; public People() { } public People(String name, boolean section) { this.name = name; this.section = section; } }
7. Utils
Tools package full.bottomsheet.fyprojects.com.bottomsheetfull.utils; import android.app.Activity; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.os.Build; import android.support.annotation.DrawableRes; import android.support.v4.graphics.drawable.RoundedBitmapDrawable; import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory; import android.view.Window; import android.view.WindowManager; import android.widget.ImageView; import com.bumptech.glide.Glide; import com.bumptech.glide.request.target.BitmapImageViewTarget; import full.bottomsheet.fyprojects.com.bottomsheetfull.R; public class Tools { public static void displayImageRound(final Context ctx, final ImageView img, @DrawableRes int drawable) { try { Glide.with(ctx).load(drawable).asBitmap().centerCrop().into(new BitmapImageViewTarget(img) { @Override protected void setResource(Bitmap resource) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(ctx.getResources(), resource); circularBitmapDrawable.setCircular(true); img.setImageDrawable(circularBitmapDrawable); } }); } catch (Exception e) { } } public static void setSystemBarColor(Activity act) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = act.getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.setStatusBarColor(act.getResources().getColor(R.color.colorPrimaryDark)); } } public static String getEmailFromName(String name) { if (name != null && !name.equals("")) { String email = name.replaceAll(" ", ".").toLowerCase().concat("@mail.com"); return email; } return name; } public static int getScreenHeight() { return Resources.getSystem().getDisplayMetrics().heightPixels; } }
8. Activity
MainActivity package full.bottomsheet.fyprojects.com.bottomsheetfull; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Toast; import full.bottomsheet.fyprojects.com.bottomsheetfull.adapter.AdapterPeopleLeft; import full.bottomsheet.fyprojects.com.bottomsheetfull.data.DataGenerator; import full.bottomsheet.fyprojects.com.bottomsheetfull.fragment.FragmentBottomSheetDialogFull; import full.bottomsheet.fyprojects.com.bottomsheetfull.model.People; import full.bottomsheet.fyprojects.com.bottomsheetfull.utils.Tools; public class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; private AdapterPeopleLeft adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initComponent(); initToolbar(); Toast.makeText(this, "Swipe up bottom sheet", Toast.LENGTH_SHORT).show(); } private void initComponent() { recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new LinearLayoutManager(this)); //set data and list adapter adapter = new AdapterPeopleLeft(this, DataGenerator.getPeopleData(this)); recyclerView.setAdapter(adapter); adapter.setOnItemClickListener(new AdapterPeopleLeft.OnItemClickListener() { @Override public void onItemClick(View view, People obj, int pos) { FragmentBottomSheetDialogFull fragment = new FragmentBottomSheetDialogFull(); fragment.setPeople(obj); fragment.show(getSupportFragmentManager(), fragment.getTag()); } }); // display first sheet FragmentBottomSheetDialogFull fragment = new FragmentBottomSheetDialogFull(); fragment.setPeople(adapter.getItem(0)); fragment.show(getSupportFragmentManager(), fragment.getTag()); } private void initToolbar() { Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.drawable.ic_menu); setSupportActionBar(toolbar); ActionBar actionBar = getSupportActionBar(); actionBar.setTitle("Full"); getSupportActionBar().setDisplayHomeAsUpEnabled(true); Tools.setSystemBarColor(this); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_basic, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { finish(); } else { Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show(); } return super.onOptionsItemSelected(item); } }