การสร้างและแสดง Bottom Sheet แบบต่างๆ

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="state_pressed">#ffc</color>
    <color name="state_normal">@color/colorAccent</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<color name="state_normal">@color/colorAccent</color>

</resources>

values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <style name="bottomSheetStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:padding">10dp</item>
        <item name="android:textColor">#00a</item>
        <item name="android:textSize">20dp</item>
        <item name="android:drawablePadding">10dp</item>
        <item name="android:background">@drawable/state</item>
    </style>

</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="windowActionBar">false</item>

</style>

<item name="android:layout_width">match_parent</item>

<item name="android:layout_height">wrap_content</item>

<item name="android:background">@drawable/state</item>

</style>

</resources>

drawable/state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="50">
    <item android:drawable="@color/state_pressed" android:state_pressed="true" />
    <item android:drawable="@color/state_normal" />
</selector>

<?xml version="1.0" encoding="utf-8"?>

</selector>

layout/bottom_sheet.xml

<?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/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dp"
    android:background="@color/colorAccent"
    android:orientation="vertical"
    android:padding="10dp"
    app:behavior_hideable="true"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <TextView
        android:id="@+id/textview1"
        style="@style/bottomSheetStyle"
        android:drawableLeft="@drawable/ic_build"
        android:text="Build" />

    <TextView
        android:id="@+id/textview2"
        style="@style/bottomSheetStyle"
        android:drawableLeft="@drawable/ic_settings"
        android:text="Settings" />

    <TextView
        android:id="@+id/textview3"
        style="@style/bottomSheetStyle"
        android:drawableLeft="@drawable/ic_android"
        android:text="System" />

    <TextView
        android:id="@+id/textview4"
        style="@style/bottomSheetStyle"
        android:drawableLeft="@drawable/ic_help"
        android:text="Help" />

</LinearLayout>

<?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/bottom_sheet"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="5dp"

android:background="@color/colorAccent"

android:orientation="vertical"

android:padding="10dp"

app:behavior_hideable="true"

app:behavior_peekHeight="60dp"

app:layout_behavior="@string/bottom_sheet_behavior">

<TextView

android:id="@+id/textview1"

style="@style/bottomSheetStyle"

android:drawableLeft="@drawable/ic_build"

android:text="Build" />

<TextView

android:id="@+id/textview2"

style="@style/bottomSheetStyle"

android:drawableLeft="@drawable/ic_settings"

android:text="Settings" />

<TextView

android:id="@+id/textview3"

style="@style/bottomSheetStyle"

android:drawableLeft="@drawable/ic_android"

android:text="System" />

<TextView

android:id="@+id/textview4"

style="@style/bottomSheetStyle"

android:drawableLeft="@drawable/ic_help"

android:text="Help" />

</LinearLayout>

BottomSheetDialog.java

package com.phaisarn.myapplication;


import android.os.Bundle;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

public class BottomSheetDialog extends BottomSheetDialogFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup vg, Bundle b) {
        View v = inflater.inflate(R.layout.bottom_sheet, vg, false);
        return v;
    }

    @Override
    public void onViewCreated(View v, Bundle b) {
        final TextView textView1 = (TextView) v.findViewById(R.id.textview1);
        textView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), textView1.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });

        final TextView textView2 = (TextView) v.findViewById(R.id.textview2);
        textView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), textView2.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });

        final TextView textView3 = (TextView) v.findViewById(R.id.textview3);
        textView3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), textView3.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.support.design.widget.BottomSheetDialogFragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

import android.widget.Toast;

public class BottomSheetDialog extends BottomSheetDialogFragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup vg, Bundle b) {

View v = inflater.inflate(R.layout.bottom_sheet, vg, false);

return v;

}

@Override

public void onViewCreated(View v, Bundle b) {

final TextView textView1 = (TextView) v.findViewById(R.id.textview1);

textView1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getActivity(), textView1.getText().toString(), Toast.LENGTH_SHORT).show();

}

});

final TextView textView2 = (TextView) v.findViewById(R.id.textview2);

textView2.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getActivity(), textView2.getText().toString(), Toast.LENGTH_SHORT).show();

}

});

final TextView textView3 = (TextView) v.findViewById(R.id.textview3);

textView3.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getActivity(), textView3.getText().toString(), Toast.LENGTH_SHORT).show();

}

});

}

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

    <include layout="@layout/bottom_sheet" />

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

<?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"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:popupTheme="@style/AppTheme.PopupOverlay" />

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

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

app:srcCompat="@android:drawable/ic_dialog_email" />

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

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button_expand"
        android:text="Expand" />

    <Button
        android:id="@+id/button_collapse"
        android:text="Collapse" />

    <Button
        android:id="@+id/button_hide"
        android:text="Hide" />

    <Button
        android:id="@+id/button_dialog"
        android:text="Show Dialog" />

</GridLayout>

<?xml version="1.0" encoding="utf-8"?>

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/content_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".MainActivity">

<Button

android:id="@+id/button_expand"

android:text="Expand" />

<Button

android:id="@+id/button_collapse"

android:text="Collapse" />

<Button

android:id="@+id/button_hide"

android:text="Hide" />

<Button

android:id="@+id/button_dialog"

android:text="Show Dialog" />

</GridLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private BottomSheetBehavior mBottomSheet;
    private BottomSheetDialog mCustomSheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mBottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

        View v = findViewById(R.id.bottom_sheet);
        mBottomSheet = BottomSheetBehavior.from(v);
        mBottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);

        mCustomSheet = new BottomSheetDialog();

        Button btExpand = (Button)findViewById(R.id.button_expand);
        Button btCollapse = (Button)findViewById(R.id.button_collapse);
        Button btHide = (Button)findViewById(R.id.button_hide);
        Button btDialog = (Button)findViewById(R.id.button_dialog);

        btExpand.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mBottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });

        btCollapse.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mBottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);
            }
        });

        btHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mBottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);
            }
        });

        btDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mCustomSheet.show(getSupportFragmentManager(), "");
            }
        });

        mBottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                if(newState != BottomSheetBehavior.STATE_HIDDEN ) {
                    fab.hide();
                }  else  {
                    fab.show();
                }
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            }
        });

        final TextView textView1 = (TextView)findViewById(R.id.textview1);
        textView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getBaseContext(), textView1.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });

        final TextView textView2 = (TextView)findViewById(R.id.textview2);
        textView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getBaseContext(), textView2.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });

        final TextView textView3 = (TextView)findViewById(R.id.textview3);
        textView3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getBaseContext(), textView3.getText().toString(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onBackPressed() {
        if(mBottomSheet.getState() != BottomSheetBehavior.STATE_HIDDEN) {
            mBottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if(id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;

import android.support.annotation.NonNull;

import android.support.design.widget.BottomSheetBehavior;

import android.widget.Button;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private BottomSheetBehavior mBottomSheet;

private BottomSheetDialog mCustomSheet;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

mBottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);

}

});

View v = findViewById(R.id.bottom_sheet);

mBottomSheet = BottomSheetBehavior.from(v);

mBottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);

mCustomSheet = new BottomSheetDialog();

Button btExpand = (Button)findViewById(R.id.button_expand);

Button btCollapse = (Button)findViewById(R.id.button_collapse);

Button btHide = (Button)findViewById(R.id.button_hide);

Button btDialog = (Button)findViewById(R.id.button_dialog);

btExpand.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

mBottomSheet.setState(BottomSheetBehavior.STATE_EXPANDED);

}

});

btCollapse.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

mBottomSheet.setState(BottomSheetBehavior.STATE_COLLAPSED);

}

});

btHide.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

mBottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);

}

});

btDialog.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

mCustomSheet.show(getSupportFragmentManager(), "");

}

});

mBottomSheet.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {

@Override

public void onStateChanged(@NonNull View bottomSheet, int newState) {

if(newState != BottomSheetBehavior.STATE_HIDDEN ) {

fab.hide();

} else {

fab.show();

}

@Override

public void onSlide(@NonNull View bottomSheet, float slideOffset) {

}

});

final TextView textView1 = (TextView)findViewById(R.id.textview1);

textView1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getBaseContext(), textView1.getText().toString(), Toast.LENGTH_SHORT).show();

}

});

final TextView textView2 = (TextView)findViewById(R.id.textview2);

textView2.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getBaseContext(), textView2.getText().toString(), Toast.LENGTH_SHORT).show();

}

});

final TextView textView3 = (TextView)findViewById(R.id.textview3);

textView3.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(getBaseContext(), textView3.getText().toString(), Toast.LENGTH_SHORT).show();

}

});

}

@Override

public void onBackPressed() {

if(mBottomSheet.getState() != BottomSheetBehavior.STATE_HIDDEN) {

mBottomSheet.setState(BottomSheetBehavior.STATE_HIDDEN);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if(id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

รูปที่ใช้

Phaisarn Sutheebanjard

blog.phaisarn.com

การสร้างและแสดง Bottom Sheet แบบต่างๆ