Tuesday, June 14, 2016

BottomSheetDialog example


The former post show a example of "Implement BottomSheet of Android Design Support Library". This post show a BottomSheetDialog example.


To use Design Support Library in your app, you have to "Add Android Design Support Library to Android Studio Project", currently version 'com.android.support:design:23.4.0'.


Create a file layout/bottomsheetdialog_layout.xml, to define the layout of the BottomSheetDialog.
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Bottom Sheet Dialog Example"
android:textSize="26dp"
android:textStyle="bold"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>

</LinearLayout>
</LinearLayout>

layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:orientation="vertical"
tools:context="com.blogspot.android_er.androidbottomsheetdialog.MainActivity">

<LinearLayout
android:id="@+id/backgroundlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<TextView
android:id="@+id/textSDK"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/prompt1"
android:textSize="28dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/prompt2"
android:textSize="28dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>


MainActivity.java
package com.blogspot.android_er.androidbottomsheetdialog;

import android.content.DialogInterface;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

LinearLayout backgroundLayout;
View bottomSheetView;
TextView textPrompt1, textPrompt2;
TextView textSDK;

BottomSheetDialog bottomSheetDialog;
BottomSheetBehavior bottomSheetBehavior;

int sdk_int = Build.VERSION.SDK_INT;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

textSDK = (TextView)findViewById(R.id.textSDK);
textSDK.setText("Running SDK_INT: " + sdk_int);

textPrompt1 = (TextView)findViewById(R.id.prompt1);
textPrompt2 = (TextView)findViewById(R.id.prompt2);
backgroundLayout = (LinearLayout)findViewById(R.id.backgroundlayout);

bottomSheetView = getLayoutInflater().inflate(R.layout.bottomsheetdialog_layout, null);
bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
bottomSheetDialog.setContentView(bottomSheetView);
bottomSheetBehavior = BottomSheetBehavior.from((View) bottomSheetView.getParent());
bottomSheetBehavior.setBottomSheetCallback(bottomSheetCallback);

bottomSheetDialog.setOnShowListener(new DialogInterface.OnShowListener() {
@Override
public void onShow(DialogInterface dialog) {
textPrompt1.setText("OnShow");
}
});

bottomSheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
@Override
public void onDismiss(DialogInterface dialog) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
textPrompt1.setText("OnDismiss");
}
});

backgroundLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
bottomSheetDialog.show();
}
});

}

BottomSheetBehavior.BottomSheetCallback bottomSheetCallback =
new BottomSheetBehavior.BottomSheetCallback(){
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
switch (newState){
case BottomSheetBehavior.STATE_COLLAPSED:
textPrompt2.setText("COLLAPSED");
break;
case BottomSheetBehavior.STATE_DRAGGING:
textPrompt2.setText("DRAGGING");
break;
case BottomSheetBehavior.STATE_EXPANDED:
textPrompt2.setText("EXPANDED");
break;
case BottomSheetBehavior.STATE_HIDDEN:
textPrompt2.setText("HIDDEN");
bottomSheetDialog.dismiss();
break;
case BottomSheetBehavior.STATE_SETTLING:
textPrompt2.setText("SETTLING");
break;
default:
textPrompt2.setText("unknown...");
}
}

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

}
};
}




~ More example of using Android Design Support Library, Snackbar, FloatingActionButton.

No comments:

Post a Comment