Showing posts with label Android Design Support Library. Show all posts
Showing posts with label Android Design Support Library. Show all posts

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.

Thursday, August 13, 2015

Android Design Support Library

The Android Design Library provides many of the high-level components you’ll need to build a great app that feels at home with material design.

Ian Lake explains how easy it is to get started with the Design Library: it's just a single dependency to add. With AppCompat as the base and the components provided by the Design Library on top of it, there’s no better time to get started building great material design apps.

Find out more:
http://android-developers.blogspot.com/2015/05/android-design-support-library.html

Android Design Support Library (100 Days of Google Dev)



Related:
- Add Android Design Support Library to Android Studio Project, and examples.

Monday, August 10, 2015

Set text and background color of Snackbar

Example to show how to set text and background color of Snackbar.


Keep using layout/activity_main.xml in last example "CoordinatorLayout + FloatingActionButton + Snackbar of Android Design Support Library".

com.example.eric.androidfloatingactionbutton.MainActivity.java
package com.example.eric.androidfloatingactionbutton;

import android.graphics.Color;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton floatingActionButton1, floatingActionButton2;
    CoordinatorLayout coordinatorLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        coordinatorLayout = (CoordinatorLayout)findViewById(R.id.coordinatorLayout);
        floatingActionButton1 =
                (FloatingActionButton)findViewById(R.id.floatingActionButton1);
        floatingActionButton2 =
                (FloatingActionButton)findViewById(R.id.floatingActionButton2);

        floatingActionButton1.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {

                Snackbar snackbar = Snackbar.make(
                        coordinatorLayout,
                        "Snackbar: floatingActionButton1 (normal) clicked",
                        Snackbar.LENGTH_LONG);
                snackbar.setActionTextColor(Color.RED);
                View snackbarView = snackbar.getView();
                snackbarView.setBackgroundColor(Color.WHITE);
                TextView textView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.BLUE);

                snackbar.setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(
                                MainActivity.this,
                                "snackbar OK clicked",
                                Toast.LENGTH_LONG).show();
                    }
                });

                snackbar.show();
            }
        });

        floatingActionButton2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Snackbar.make(
                        coordinatorLayout,
                        "Snackbar: floatingActionButton2 (mini) clicked",
                        Snackbar.LENGTH_LONG)
                        .setActionTextColor(0xFFFF0000)
                        .setAction("OK", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(
                                    MainActivity.this,
                                    "snackbar OK clicked",
                                    Toast.LENGTH_LONG).show();}
                            })
                        .show();


            }
        });
    }

}



CoordinatorLayout + FloatingActionButton + Snackbar of Android Design Support Library

This example show how CoordinatorLayout + FloatingActionButton + Snackbar work together - a FloatingActionButton added as a child of CoordinatorLayout, and then pass that CoordinatorLayout to Snackbar.make() call - instead of the snackbar displaying over the floating action button, the FloatingActionButton takes advantage of additional callbacks provided by CoordinatorLayout to automatically move upward as the snackbar animates in and returns to its position when the snackbar animates out on Android 3.0 and higher devices - no extra code required.


layout/activity_main.xml
<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"
    android:layout_margin="20dp"
    android:padding="10dp"
    android:id="@+id/coordinatorLayout"
    android:background="#000050"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:padding="10dp"
        android:background="#005000">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:autoLink="web"
            android:textSize="24dp"
            android:layout_alignParentTop="true"
            android:text="http://android-er.blogspot.com/"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textSize="30dp"
            android:layout_alignParentBottom="true"
            android:text="Android FloatingActionButton example" />
    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_launcher"
        app:fabSize="normal"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|left|end"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_launcher"
        app:fabSize="mini"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|right|end"/>

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


com.example.eric.androidfloatingactionbutton.MainActivity.java
package com.example.eric.androidfloatingactionbutton;

import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton floatingActionButton1, floatingActionButton2;
    CoordinatorLayout coordinatorLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        coordinatorLayout = (CoordinatorLayout)findViewById(R.id.coordinatorLayout);
        floatingActionButton1 =
                (FloatingActionButton)findViewById(R.id.floatingActionButton1);
        floatingActionButton2 =
                (FloatingActionButton)findViewById(R.id.floatingActionButton2);

        floatingActionButton1.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {

                Snackbar snackbar = Snackbar.make(
                        coordinatorLayout,
                        "Snackbar: floatingActionButton1 (normal) clicked",
                        Snackbar.LENGTH_LONG);

                snackbar.setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(
                                MainActivity.this,
                                "snackbar OK clicked",
                                Toast.LENGTH_LONG).show();
                    }
                });

                snackbar.show();
            }
        });

        floatingActionButton2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Snackbar snackbar = Snackbar.make(
                        coordinatorLayout,
                        "Snackbar: floatingActionButton2 (mini) clicked",
                        Snackbar.LENGTH_LONG);

                snackbar.setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(
                                MainActivity.this,
                                "snackbar OK clicked",
                                Toast.LENGTH_LONG).show();
                    }
                });

                snackbar.show();
            }
        });
    }

}


Android Design Support Library is needed, read "How to Add Android Design Support Library to Android Studio Project".


Next:
Set text and background color of Snackbar

Saturday, August 8, 2015

Android FloatingActionButton example

FloatingActionButton are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.

Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the fabSize attribute.


Example:


<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"
    android:layout_margin="20dp"
    android:padding="10dp"
    android:id="@+id/coordinatorLayout"
    android:background="#000050"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:padding="10dp"
        android:background="#005000">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:autoLink="web"
            android:textSize="24dp"
            android:layout_alignParentTop="true"
            android:text="http://android-er.blogspot.com/"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textSize="30dp"
            android:layout_alignParentBottom="true"
            android:text="Android FloatingActionButton example" />
    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_launcher"
        app:fabSize="normal"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|left|end"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_launcher"
        app:fabSize="mini"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|right|end"/>

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


package com.example.eric.androidfloatingactionbutton;

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton floatingActionButton1, floatingActionButton2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        floatingActionButton1 =
                (FloatingActionButton)findViewById(R.id.floatingActionButton1);
        floatingActionButton2 =
                (FloatingActionButton)findViewById(R.id.floatingActionButton2);

        floatingActionButton1.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,
                        "floatingActionButton1 (normal) clicked",
                        Toast.LENGTH_LONG).show();
            }
        });

        floatingActionButton2.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,
                        "floatingActionButton2 (mini) clicked",
                        Toast.LENGTH_LONG).show();
            }
        });
    }

}


Design Support Library is needed, refer to "Add Android Design Support Library to Android Studio Project".

Next:
- CoordinatorLayout + FloatingActionButton + Snackbar of Android Design Support Library


Friday, August 7, 2015

Android Snackbar example of Android Design Support Library

android.support.design.widget.Snackbar provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time.

They automatically disappear after a timeout or after user interaction elsewhere on the screen, particularly after interactions that summon a new surface or activity. Snackbars can be swiped off screen.


- Make sure your main activity extends AppCompatActivity.
- Make sure include dependencies of both 'com.android.support:appcompat-v7:22.2.1' and 'com.android.support:design:22.2.1' (currently version 22.2.1) in your build.gradle. Refer last post about how to "Add Android Design Support Library to Android Studio Project".


- Add <android.support.design.widget.CoordinatorLayout> in your layout file, layout/activity_main.xml.
<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/title"
        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/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="30dp"
        android:text="Android Snackbar example" />

    <Button
        android:id="@+id/showSnackBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show SnackBar" />

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/snackbarCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

</LinearLayout>


com.example.eric.snackbar.MainActivity.java
package com.example.eric.snackbar;

import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button btnShowSnackBar;
    CoordinatorLayout snackbarCoordinatorLayout;

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

        snackbarCoordinatorLayout = (CoordinatorLayout)findViewById(R.id.snackbarCoordinatorLayout);

        btnShowSnackBar = (Button)findViewById(R.id.showSnackBar);
        btnShowSnackBar.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Snackbar snackbar = Snackbar.make(
                        snackbarCoordinatorLayout,
                        "Snackbar",
                        Snackbar.LENGTH_LONG);

                snackbar.setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(
                                MainActivity.this,
                                "snackbar OK clicked",
                                Toast.LENGTH_LONG).show();
                    }
                });

                snackbar.show();
            }

        });
    }

}



Add Android Design Support Library to Android Studio Project

TO add Android Design Support Library to Android Studio Project, follow the steps here shown in the video:
- In Android Studio > File > Project Structure
- Select App -> Dependencies
- Select Design Support Library, 'com.android.support:design:22.2.1' currently.
- Click on the '+' symbol to add the libraries
- OK


Alternatively, you can also edit the file "build.gradle" manually.



Related:
- About Android Design Support Library
- Android Snackbar example of Android Design Support Library
Android FloatingActionButton example
CoordinatorLayout + FloatingActionButton + Snackbar
Set text and background color of Snackbar
Updated Android Studio now provide template of Blank Activity with FloatingActionButton and Snackbar


BottomSheet
BottomSheetDialog