CODEWITHSUNDEEP
android
KJEjava48
KJEjava48

Reputation: 2055

Android : Show layout from the bottom of the screen on button click

Recently i have installed an application from the play store named walnut where i saw a new feature for popup.In the home screen there is a FloatingActionMenu,when clicking on the menu button it will expand with the items on it,on top of that expanded menu there is an option for add account, and on clicking that option a popup will come from the bottom of the screen to a certain height.I likes to know what feature is used for that popup from the bottom of the screen.Is it really a popup or sliding drawer? I want to use exactly the same feature in my android application.If anyone knows about this feature please help me.Below is the screenshot of this popup layout that comes on button click in walnut application. Popup layout from the bootom of the screen

Upvotes: 8

Views: 14229

Answers (4)

KDeogharkar
KDeogharkar

Reputation: 10959

you can use dialog with custom layout in it. only thing you have to do is call it from bottom and use style as material dialog sheet like this

 final Dialog mBottomSheetDialog = new Dialog(getActivity(), R.style.MaterialDialogSheet);
                            mBottomSheetDialog.setContentView(view); // your custom view.
                            mBottomSheetDialog.setCancelable(true);
                            mBottomSheetDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
                            mBottomSheetDialog.getWindow().setGravity(Gravity.BOTTOM);
                            mBottomSheetDialog.show();

I change my layout height to 800 instead of wrap content and here is the result.

style.xml

<style name="MaterialDialogSheet" 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/MaterialDialogSheetAnimation</item>
    </style>



<style name="MaterialDialogSheetAnimation">
        <item name="android:windowEnterAnimation">@anim/popup_show</item>
        <item name="android:windowExitAnimation">@anim/popup_hide</item>
    </style>

anim

popup_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>

popup_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>

enter image description here

Upvotes: 12

ribads
ribads

Reputation: 393

What you have there is a custom view; So trying to use SnackBar would too much hassle. You can however achieve this more easily with BottomSheet(https://github.com/Flipboard/bottomsheet).

Upvotes: 2

Raja Jawahar
Raja Jawahar

Reputation: 6962

You can go with BottomSheetLayout..

https://github.com/Flipboard/bottomsheet

Upvotes: 3

Amy
Amy

Reputation: 4032

Use snackbar for achieve this

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "Welcome to AndroidHive", Snackbar.LENGTH_LONG);

snackbar.show();

XML Design: 

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <Button
            android:id="@+id/btnSimpleSnackbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:text="Simple Snackbar" />

        <Button
            android:id="@+id/btnActionCallback"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="With Action Callback" />

        <Button
            android:id="@+id/btnCustomSnackbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="Custom Color" />

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email" />

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

Build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

Got reference from Here

Upvotes: 1

Related Questions