Showing posts with label UI and design. Show all posts
Showing posts with label UI and design. Show all posts

Monday, July 25, 2016

Detect and check if your app run in multi window mode


This example show how to detect and check if your app run in multi window mode, target Android N with Multi-Window Support, by calling isInMultiWindowMode() and override onMultiWindowModeChanged() methods.


package com.blogspot.android_er.androidmultiwindow;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    TextView textPrompt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textPrompt = (TextView)findViewById(R.id.prompt);

        if(isInMultiWindowMode()){
            textPrompt.setText("onCreate run In Multi Window Mode ");
        }else{
            textPrompt.setText("onCreate run NOT In Multi Window Mode ");
        }
    }

    @Override
    public void onMultiWindowModeChanged(boolean isInMultiWindowMode) {
        super.onMultiWindowModeChanged(isInMultiWindowMode);

        if(isInMultiWindowMode){
            textPrompt.setText("It is In Multi Window Mode ");
        }else{
            textPrompt.setText("It is NOT In Multi Window Mode ");
        }
    }
}


<?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.androidmultiwindow.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"/>
    <TextView
        android:id="@+id/prompt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="28dp"
        android:textStyle="bold"/>
</LinearLayout>


Next:
onConfigurationChanged() called when window size changed in Multi-Window Mode

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.

Friday, June 10, 2016

Sets the height of collapsed bottom sheet, by calling setPeekHeight() method


In lasp example of BottomSheet, I implement a OnClickListener of background to expand and collapse the bottom sheet. Without this, user cannot expand the bottom sheet if collapsed, because bottom sheet have height of 0 by default. If you want you can set the height of collapsed bottom sheet, by calling setPeekHeight() method.

This video show how:


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

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
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 bottomSheet;
    private BottomSheetBehavior bottomSheetBehavior;
    TextView textPrompt;
    TextView textSDK;

    /*
    Build.VERSION.SDK_INT:
    The user-visible SDK version of the framework;
    its possible values are defined in Build.VERSION_CODES.
    https://developer.android.com/reference/android/os/Build.VERSION_CODES.html
     */
    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);

        textPrompt = (TextView)findViewById(R.id.prompt);
        backgroundLayout = (LinearLayout)findViewById(R.id.backgroundlayout);

        bottomSheet = findViewById(R.id.bottomsheet);
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
        bottomSheetBehavior.setBottomSheetCallback(bottomSheetCallback);

        bottomSheetBehavior.setPeekHeight(150);

        /*
        backgroundLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (bottomSheetBehavior.getState()){
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                        break;
                    case BottomSheetBehavior.STATE_EXPANDED:
                        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                        break;
                }
            }
        });
        */
    }

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

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

        }
    };
}



Wednesday, June 8, 2016

Implement BottomSheet of Android Design Support Library

BottomSheet run on API 19

BottomSheet run on API 23
With the help from the Android Design Support Library, you can implement a number of important material design components to all developers and to all Android 2.1 or higher devices.

This example show how to implement Bottom Sheets with help of Android Design Support Library.




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'.


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:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.blogspot.android_er.androidbottomsheet.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/prompt"
            android:textSize="28dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottomsheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="true"
        android:background="@android:color/darker_gray"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

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

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


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

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
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 bottomSheet;
    private BottomSheetBehavior bottomSheetBehavior;
    TextView textPrompt;
    TextView textSDK;

    /*
    Build.VERSION.SDK_INT:
    The user-visible SDK version of the framework;
    its possible values are defined in Build.VERSION_CODES.
    https://developer.android.com/reference/android/os/Build.VERSION_CODES.html
     */
    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);

        textPrompt = (TextView)findViewById(R.id.prompt);
        backgroundLayout = (LinearLayout)findViewById(R.id.backgroundlayout);

        bottomSheet = findViewById(R.id.bottomsheet);
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
        bottomSheetBehavior.setBottomSheetCallback(bottomSheetCallback);

        backgroundLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (bottomSheetBehavior.getState()){
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                        break;
                    case BottomSheetBehavior.STATE_EXPANDED:
                        bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                        break;
                }
            }
        });

    }

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

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

        }
    };
}


(reference: http://android-developers.blogspot.hk/2016/02/android-support-library-232.html)

Next:
Sets the height of collapsed bottom sheet, by calling setPeekHeight() method
BottomSheetDialog example

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