Monday 5 March 2018

How to implement the Bottom Sheet in android studio.

Creating New Project.
Open android studio and create a new project.


File => New => New Project => Configure your new project => Select the form factor yours app will run on => Add an Activity to Mobile => Customize the Activity => Finish.

First we need to add Library to our project.
compile 'com.jakewharton:butterknife:5.1.1'

Create Xml file in project.
Open => app => res => layout - activity_bottomsheet.xml.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:gravity="center">


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:clickable="true"
        android:gravity="center"
        app:layout_anchorGravity="bottom|right|end">

        <LinearLayout
            android:id="@+id/layBottom"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_alignParentBottom="true"
            android:background="#ff1329"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingLeft="18dp"
            android:paddingRight="18dp">

            <ImageView
                android:layout_width="22dp"
                android:layout_height="22dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:text="Add to Cart"
                android:textColor="#fff"
                android:textSize="16dp" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>


Create Xml file in project.
Open => app => res => layout - bottom_dialog.xml.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical">

    <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:layout_marginBottom="32dp"
            android:orientation="vertical"
            android:paddingBottom="4dp"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:paddingTop="4dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:gravity="center|start"
                android:text="Quantity"
                android:textColor="#1e1e1e"
                android:textSize="12dp" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|start"
                android:layout_marginLeft="18dp"
                android:layout_marginTop="12dp"
                android:background="@drawable/quantity_bg"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center|end">

                        <LinearLayout
                            android:layout_width="160dp"
                            android:layout_height="28dp"
                            android:gravity="end|bottom"
                            android:orientation="horizontal"

                            >

                            <LinearLayout
                                android:id="@+id/layDesc"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:gravity="center">

                                <TextView
                                    android:id="@+id/txtDec"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="-"
                                    android:textColor="#000"
                                    android:textSize="20sp" />
                            </LinearLayout>


                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:gravity="center">

                                <LinearLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="28dp"
                                    android:background="@drawable/quantity_add"
                                    android:gravity="center">

                                    <TextView
                                        android:id="@+id/txtQuantity"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="0"
                                        android:textColor="#fff"
                                        android:textSize="14sp" />
                                </LinearLayout>
                            </LinearLayout>

                            <LinearLayout
                                android:id="@+id/layIncrease"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:gravity="center">

                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:text="+"
                                    android:textColor="#000"
                                    android:textSize="20sp" />
                            </LinearLayout>

                        </LinearLayout>

                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layBottom"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:background="#ff1329"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="22dp"
            android:layout_height="22dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:text="Add to Cart"
            android:textColor="#fff"
            android:textSize="16dp" />
    </LinearLayout>

</LinearLayout>



Create Xml file in project.
Open => app => res => drawable- quantity_add.xml.


<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="2dp" android:color="#1e1e1e" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="32dp" />
    <solid android:color="#1e1e1e" />
</shape>


Create Xml file in project.
Open => app => res => drawable- quantity_bg.xml.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listview_background_shape">
    <stroke android:width="1dp" android:color="#1e1e1e" />
    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp" />
    <corners android:radius="62dp" />
    <solid android:color="#ffffff" />
</shape>




Create Xml file in project.

Open => app => res => drawable- theme_color.xml.


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/theme_color"/>
        </shape>
    </item>
</selector>



Create Xml file in project.Open => app => res => color - theme_color.xml.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#009688"/>
</selector>


Create Xml file in project.
Open => app => res => anim- pop_hide.xml.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="0"
        android:toYDelta="100%p"
        android:duration="300"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>




Create Xml file in project.
Open => app => res => anim- pop_show.xml.


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="300"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

Create Xml file in project.
Open => app => res => value - styles.xml.


<style name="MaterialAddressSheet" parent="@android:style/Theme.Dialog">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowAnimationStyle">@style/MaterialAddressSheetAnimation</item>
    </style>
    <style name="MaterialAddressSheetAnimation">
        <item name="android:windowEnterAnimation">@anim/pop_show</item>
        <item name="android:windowExitAnimation">@anim/pop_hide</item>
    </style>


Create the Java file in project.
Open app => main => src = BottomSheetActivity.java


public class BottomSheetActivity extends AppCompatActivity implements View.OnClickListener {
    @InjectView(R.id.layBottom)
    LinearLayout bottomLinearLayout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottomsheet);
        ButterKnife.inject(BottomSheetActivity.this);
        //Using the set click listener
        listener();
        //End
    }

    private void listener() {
        bottomLinearLayout.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.layBottom:
                bottomSheetForSize();
                break;
        }
    }
    public void bottomSheetForSize() {
        View view = BottomSheetActivity.this.getLayoutInflater().inflate(R.layout.bottom_dialog, null);
        final TextView qtyTextView = (TextView) view.findViewById(R.id.txtQuantity);
        final LinearLayout increaseLinearLayout = (LinearLayout) view.findViewById(R.id.layIncrease);
        final LinearLayout descLinearLayout = (LinearLayout) view.findViewById(R.id.layDesc);
        final LinearLayout layBottom = (LinearLayout) view.findViewById(R.id.layBottom);

        /***animation*/
        final Dialog mBottomSheetDialogshare = new Dialog(BottomSheetActivity.this, R.style.MaterialAddressSheet);
        mBottomSheetDialogshare.setContentView(view);
        mBottomSheetDialogshare.setCancelable(true);
        mBottomSheetDialogshare.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        /***open from bottom*/

        mBottomSheetDialogshare.getWindow().setGravity(Gravity.BOTTOM);
        mBottomSheetDialogshare.show();

        layBottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mBottomSheetDialogshare.dismiss();
            }
        });

        increaseLinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                int anyValue = Integer.parseInt(qtyTextView.getText().toString());
                //int mSelectQty = Integer.parseInt(mQty);
                if (anyValue < 5) {
                    anyValue++;
                    qtyTextView.setText(anyValue + "");
                }
            }
        });

        descLinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int anyValueD = Integer.parseInt(qtyTextView.getText().toString());
                if (Integer.parseInt(qtyTextView.getText().toString()) == 1) {
                } else if (anyValueD > 0) {
                    anyValueD--;
                    qtyTextView.setText(anyValueD + "");
                    String mQty = qtyTextView.getText().toString();

                }
            }
        });
    }

}

May this code help you. Thanks!!!!!!



No comments:

Post a Comment