Skip to main content

ANDROID MATERIAL DESIGN Support 23.2.0 (Bottom Sheets) - 6

Android Support Library 23.2


The Design Support Library provides implementations of many patterns of material design. This release allows developers to easily add bottom sheets to their app.



its very simple to added bottom sheet in your existing app. by doing some minor changes. Before go ahead update Android Support library to 23.2.0 using Android SDK.

and don't forgot to add compile 'com.android.support:design:23.2.0' as depandancy in your app level build.gradle file.


 By attaching a BottomSheetBehavior to a child View of a CoordinatorLayout (i.e., addingapp:layout_behavior="android.support.design.widget.BottomSheetBehavior"), you’ll automatically get the appropriate touch detection to transition between five state:
  • STATE_COLLAPSED: this collapsed state is the default and shows just a portion of the layout along the bottom. The height can be controlled with the app:behavior_peekHeight attribute (defaults to 0)
  • STATE_DRAGGING: the intermediate state while the user is directly dragging the bottom sheet up or down
  • STATE_SETTLING: that brief time between when the View is released and settling into its final position
  • STATE_EXPANDED: the fully expanded state of the bottom sheet, where either the whole bottom sheet is visible (if its height is less than the containing CoordinatorLayout) or the entire CoordinatorLayout is filled
  • STATE_HIDDEN: disabled by default (and enabled with the app:behavior_hideable attribute), enabling this allows users to swipe down on the bottom sheet to completely hide the bottom sheet

lets try sample here. do changes in existing layout like below

<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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout>

        <android.support.design.widget.CollapsingToolbarLayout>

            <ImageView/>

            <android.support.v7.widget.Toolbar/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout>

            //.....

        </LinearLayout>


    </android.support.v4.widget.NestedScrollView>

    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        //your bottom sheet layout

        </LinearLayout>
    </FrameLayout>


    <android.support.design.widget.FloatingActionButton/>

</android.support.design.widget.CoordinatorLayout>
Bottom Sheet Layout

<FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Info"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Friends"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>
        </LinearLayout>
    </FrameLayout>

 in your Activity add below code in OnCreate

CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
// The View with the BottomSheetBehavior
View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        // React to state change
        Log.e("onStateChanged", "onStateChanged:" + newState);
        if (newState == BottomSheetBehavior.STATE_EXPANDED) {
                fab.setVisibility(View.GONE);
            } else {
                fab.setVisibility(View.VISIBLE);
            }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        // React to dragging events
        Log.e("onSlide", "onSlide");
    }
});

behavior.setPeekHeight(100);

I have Added full code in my Existing sample of Android design support on Github

Some links of my answers on stack overflow



How to implement Bottom Sheets using new design support library 23.2

Disabling User dragging on BottomSheet



Comments

Post a Comment

Popular posts from this blog

ANDROID - Adding ActionBar Navigation Tabs

Note: if you are develop App < 3.0 Android OS then use  ActionBarSherlock   support library. ActionBarSherlock is an extension of the  support library  designed to facilitate the use of the action bar design pattern across all versions of Android with a single API. Create new Android Project : in Main Activity package com.AlarmManager; import android.os.Bundle; import android.view.View; import com.actionbarsherlock.app.ActionBar; import com.actionbarsherlock.app.ActionBar.Tab; import com.actionbarsherlock.app.SherlockFragmentActivity; public class AlarmManagerActivity extends SherlockFragmentActivity { public static String ACTIVE_TAB = "activeTab"; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { setTheme(R.style.Theme_Sherlock_Light_DarkActionBar); super.onCreate(savedInstanceState); // setContentView(R.lay

Android Material Design (with Design support Library) - 4

Introducing  Design Support Library  , to use Material design component in older version API - android 2.1 and above.  You’ll find a navigation drawer view, floating labels for editing text, a floating action button, snackbar, tabs, and a motion and scroll framework to tie them together. I have used my previous example, so its easy for demonstrate.  Note: Update your Android SDK support  repositories, support library if not updated i  used compileSdkVersion 'android-MNC' for Android M but you can change it to build in older API add  dependencies in build.gradle file compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:design:22.2.0' compile 'com.android.support:support-v4:22.2.0' start with  navigation drawer , its very easy to use lets, design for drawer <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://

Android show Data from Sqlite DB into Grid View

Shaadi.com Matrimonials Shaadi.com Indian Matrimonials Your Main Activity class package com . Sqlite_grid_view ; import java . util . ArrayList ; import java . util . List ; import android . app . Activity ; import android . os . Bundle ; import android . util . Log ; import android . view . View ; import android . widget . AdapterView ; import android . widget . AdapterView . OnItemClickListener ; import android . widget . ArrayAdapter ; import android . widget . GridView ; import android . widget . TextView ; import android . widget . Toast ; public class AndroidSQLiteTutorialActivity extends Activity { private GridView gridView ; public static ArrayList < String > ArrayofName = new ArrayList < String >(); /** Called when the activity is first created. */ @ Override public void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ); setContentView ( R . l