{"id":144,"date":"2020-09-30T00:52:09","date_gmt":"2020-09-30T00:52:09","guid":{"rendered":"https:\/\/barahasoft.com.np\/blog\/?p=144"},"modified":"2020-09-30T01:57:08","modified_gmt":"2020-09-30T01:57:08","slug":"android-bottom-sheet-customization","status":"publish","type":"post","link":"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/","title":{"rendered":"Android Bottom Sheet Customization"},"content":{"rendered":"\n

Bottom Sheet is a CoordinatorLayout’s child view that slides up from bottom. It is material component and frequently used in android. Basically there are two types of Bottom Sheet , viz : Persistent Bottom Sheet(Standard)<\/em><\/strong> and Modal Bottom Sheet<\/em><\/strong>. As name suggests , in former one we can have interaction with other remaining area in screen and later one behaves like modal where we can’t interact with remaining area also the are is dimmed.<\/p>\n\n\n\n

Now let’s go with the title of this post, here we deal with customizing Persistent Bottom Sheet where we add rounded, stroked background.<\/p>\n\n\n\n

Step1:<\/strong> create layout file for bottom sheet named bottom_sheet_standard.xml<\/em><\/strong><\/p>\n\n\n\n

Here i have used Constraintlayout as root , we can also use LinearLayout but i suggest you to use ConstraintLayout for better performance. NB: this layout is normal ConstraintLayout with layout_behaviour com.google.android.material.bottomsheet.BottomSheetBehavior<\/em> which force to work as Bottom Sheet.<\/p>\n\n\n

\n<?xml version="1.0" encoding="utf-8"?>\n<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\n    xmlns:app="http:\/\/schemas.android.com\/apk\/res-auto"\n    android:layout_width="match_parent"\n    android:layout_height="wrap_content"\n    android:background="@drawable\/bg_bs"\n    android:id="@+id\/bottomSheet"\n    app:behavior_hideable="true"\n    android:clickable="true"\n    app:behavior_peekHeight="1dp"\n    android:paddingBottom="15dp"\n    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">\n\n    <androidx.constraintlayout.widget.Guideline\n        android:id="@+id\/gll"\n        android:orientation="vertical"\n        app:layout_constraintGuide_begin="10dp"\n        android:layout_width="wrap_content"\n        android:layout_height="wrap_content" \/>\n\n    <androidx.constraintlayout.widget.Guideline\n        android:id="@+id\/glr"\n        android:orientation="vertical"\n        app:layout_constraintGuide_end="10dp"\n        android:layout_width="wrap_content"\n        android:layout_height="wrap_content" \/>\n    <TextView\n        android:id="@+id\/tvTitle"\n        android:text="@string\/message_login_first"\n        android:drawableLeft="@drawable\/ic_info"\n        android:textStyle="bold"\n        android:textColor="@color\/black"\n        android:layout_marginTop="20dp"\n        android:layout_width="wrap_content"\n        android:layout_height="wrap_content"\n        app:layout_constraintTop_toTopOf="parent"\n        app:layout_constraintStart_toStartOf="@id\/gll"\n        app:layout_constraintEnd_toEndOf="@id\/glr"\n        \/>\n\n    <ImageView\n        android:id="@+id\/ivLogin"\n        android:layout_width="35dp"\n        android:layout_height="35dp"\n        android:layout_marginStart="16dp"\n        android:layout_marginTop="16dp"\n        app:layout_constraintStart_toStartOf="@id\/gll"\n        app:layout_constraintTop_toBottomOf="@id\/tvTitle"\n        android:src="@drawable\/ic_logout" \/>\n\n    <TextView\n        android:id="@+id\/tvLogin"\n        android:layout_width="wrap_content"\n        android:layout_height="wrap_content"\n        android:layout_marginStart="8dp"\n        android:text="Login"\n        android:onClick="openLoginPage"\n        android:textColor="#292929"\n        android:textSize="16sp"\n        app:layout_constraintBottom_toBottomOf="@+id\/ivLogin"\n        app:layout_constraintStart_toEndOf="@+id\/ivLogin"\n        app:layout_constraintTop_toTopOf="@+id\/ivLogin" \/>\n\n    <ImageView\n        android:id="@+id\/ivClose"\n        android:layout_width="35dp"\n        android:layout_height="35dp"\n        android:layout_marginStart="16dp"\n        android:layout_marginTop="16dp"\n        app:layout_constraintStart_toStartOf="@id\/gll"\n        app:layout_constraintTop_toBottomOf="@id\/ivLogin"\n        android:src="@android:drawable\/ic_menu_close_clear_cancel" \/>\n\n    <TextView\n        android:id="@+id\/tvCancel"\n        android:layout_width="wrap_content"\n        android:layout_height="wrap_content"\n        android:layout_marginStart="8dp"\n        android:text="Close"\n        android:onClick="closeSheet"\n        android:textColor="#292929"\n        android:textSize="16sp"\n        app:layout_constraintBottom_toBottomOf="@+id\/ivClose"\n        app:layout_constraintStart_toEndOf="@+id\/ivClose"\n        app:layout_constraintTop_toTopOf="@+id\/ivClose" \/>\n<\/androidx.constraintlayout.widget.ConstraintLayout>\n\n<\/pre>\n\n\n
Attribute app:behavior_hideable<\/em> specify if it is hideable when swiped down, android:clickable= true makes sure that view under Bottom Sheet which is hiddend due to overlap  is not clickable. <\/p>\n\n\n\n
In editor above layout like <\/p>\n\n\n\n
\"\"<\/p>\n\n\n\n
Step2:<\/strong> including above file inside main layout (CoordinateLayout) where bottom sheet is to be shown.<\/p>\n\n\n
\n<?xml version="1.0" encoding="utf-8"?>\n<androidx.coordinatorlayout.widget.CoordinatorLayout\n    xmlns:android="http:\/\/schemas.android.com\/apk\/res\/android"\n    xmlns:app="http:\/\/schemas.android.com\/apk\/res-auto"\n    xmlns:tools="http:\/\/schemas.android.com\/tools"\n    android:layout_width="match_parent"\n    android:layout_height="match_parent"\n    android:focusable="true"\n    android:focusableInTouchMode="true">\n\n    ...\n    <include\n        android:id="@+id\/bottomNavigation"\n        layout="@layout\/bottom_navigation"\n        android:layout_width="match_parent"\n        android:layout_height="match_parent" \/>\n    <include layout="@layout\/bottom_sheet_standard" \/>\n<\/androidx.coordinatorlayout.widget.CoordinatorLayout>\n<\/pre>\n\n\n
Step3:<\/strong> initialization of Bottom Sheet and click event to show \/ hide inside MainActivity.kt<\/em><\/strong><\/p>\n\n\n
\n\/\/inside onCreate\nbottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)\n\nbottomSheetBehavior.addBottomSheetCallback(object :\nBottomSheetBehavior.BottomSheetCallback() {\n            override fun onSlide(bottomSheet: View, slideOffset: Float) {\n            }\n\n            override fun onStateChanged(bottomSheet: View, newState: Int) {\n               \n            }\n        })\n\nbinding!!.mButton.setOnClickListener {\nval state =\n                    if (bottomSheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED)\n                        BottomSheetBehavior.STATE_COLLAPSED\n                    else\n                        BottomSheetBehavior.STATE_EXPANDED\n            bottomSheetBehavior.state = state\n\n           \n        }\n\n\n<\/pre>\n\n\n
Results:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Other References:<\/p>\n\n\n\n
https:\/\/developer.android.com\/reference\/com\/google\/android\/material\/bottomsheet\/package-summary<\/a><\/p>\n\n\n\n
https:\/\/material.io\/develop\/android\/components\/sheets-bottom<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Bottom Sheet is a CoordinatorLayout’s child view that slides up from bottom. It is material component and frequently used in android. Basically there are two types of Bottom Sheet , viz : Persistent Bottom Sheet(Standard) and Modal Bottom Sheet. As name suggests , in former one we can have interaction with other remaining area in […]<\/p>\n","protected":false},"author":1,"featured_media":151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":"BarahaSoft,Bottom Sheet,Persistent Bottom Sheet,Android Bottom Sheet,Android Material Component","yoast_head":"\nAndroid Bottom Sheet Customization - BS Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Android Bottom Sheet Customization - BS Blog\" \/>\n<meta property=\"og:description\" content=\"Bottom Sheet is a CoordinatorLayout’s child view that slides up from bottom. It is material component and frequently used in android. Basically there are two types of Bottom Sheet , viz : Persistent Bottom Sheet(Standard) and Modal Bottom Sheet. As name suggests , in former one we can have interaction with other remaining area in […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/\" \/>\n<meta property=\"og:site_name\" content=\"BS Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-30T00:52:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-30T01:57:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/barahasoft.com.np\/blog\/wp-content\/uploads\/2020\/09\/customized_bottom_sheetjpg.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#website\",\"url\":\"https:\/\/barahasoft.com.np\/blog\/\",\"name\":\"BS Blog\",\"description\":\"Baraha Soft Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/barahasoft.com.np\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/barahasoft.com.np\/blog\/wp-content\/uploads\/2020\/09\/customized_bottom_sheetjpg.jpg\",\"width\":1200,\"height\":500,\"caption\":\"Barahasoft\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/#webpage\",\"url\":\"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/\",\"name\":\"Android Bottom Sheet Customization - BS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/#primaryimage\"},\"datePublished\":\"2020-09-30T00:52:09+00:00\",\"dateModified\":\"2020-09-30T01:57:08+00:00\",\"author\":{\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#\/schema\/person\/4f97ce15b5eda1cd9fc64e3362dca065\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/barahasoft.com.np\/blog\/android-bottom-sheet-customization\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#\/schema\/person\/4f97ce15b5eda1cd9fc64e3362dca065\",\"name\":\"Mahen\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/barahasoft.com.np\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2d90f77c4da8e61f15085bfd7b473714?s=96&d=mm&r=g\",\"caption\":\"Mahen\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","ads":{"ads-top":"","ads-top-link":"","ads-bottom":"","ads-bottom-link":"","ads-side-top":"","ads-side-top-link":"","ads-side-bottom":"","ads-side-bottom-link":""},"_links":{"self":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts\/144"}],"collection":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/comments?post=144"}],"version-history":[{"count":10,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/posts\/144\/revisions\/159"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/media\/151"}],"wp:attachment":[{"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/media?parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/categories?post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/barahasoft.com.np\/blog\/wp-json\/wp\/v2\/tags?post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}