Material Design design specifications were launched at Google I/O 2014. This design concept was loved by many developers as it focuses on creating a paper-like and tangible design, making it closer to the real world. It aims to provide smooth and continuous interaction and user experience. This design specification promotes the development of the Android ecosystem, and for this reason, Google provides a series of controls that comply with the Material Design style, such as FloatingActionButton, Snackbar, and TabLayout. Although these components are frequently used in development, there is no record of their usage. Therefore, I plan to start recording the usage of these components from scratch. Today, I will discuss the knowledge related to CoordinatorLayout and FloatingActionButton, with the following main content:
- CoordinatorLayout
- FloatingActionButton
- Properties of FloatingActionButton
- Simple usage
CoordinatorLayout#
CoordinatorLayout is an enhanced version of FramLayout, which means that if no restrictions are added, the child views inside CoordinatorLayout will appear in the top-left corner by default. CoordinatorLayout has two main uses:
- As the top-level layout of the application
- As a container for interacting with one or more child views
Behavior can be specified for the child views inside CoordinatorLayout, providing many different interaction effects within a single parent layout. The child views can also interact with each other. CoordinatorLayout can use the CoordinatorLayout.DefaultBehavior annotation to specify the default behavior of the child views. In short, different scrolling effects can be achieved with the help of CoordinatorLayout.
FloatingActionButton#
FloatingActionButton is a button control of the Material Design type. It is generally displayed as a floating circular icon on top of the UI. It has its own behavior and can be anchored.
FloatingActionButton has two sizes: normal (56dp) and mini (40dp). The default size is mini (40dp), and the size can be specified using the fabSize attribute. Of course, fabSize can also be set to auto, and the system will choose the appropriate size based on the screen size.
FloatingActionButton indirectly inherits from ImageView, and the icon can be set in the code using the following methods:
// Set the icon
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);
The background color of FloatingActionButton is by default the value represented by the theme's colorAccent. The background color of FloatingActionButton can be modified in the code using the following method:
// Set the background color
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));
The size of FloatingActionButton can be set using the following method:
// Set the size
fab.setSize(FloatingActionButton.SIZE_MINI);
So, how to customize the size of FloatingActionButton? The source code of FloatingActionButton shows that the dimensions that determine its size are defined in the dimens file. Specifically, they are defined by design_fab_size_mini and design_fab_size_normal. Here is a part of the code:
// Source code
private int getSizeDimension(@Size final int size) {
final Resources res = getResources();
switch (size) {
case SIZE_AUTO:
// If we're set to auto, grab the size from resources and refresh
final int width = res.getConfiguration().screenWidthDp;
final int height = res.getConfiguration().screenHeightDp;
return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
? getSizeDimension(SIZE_MINI)
: getSizeDimension(SIZE_NORMAL);
case SIZE_MINI:
return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
case SIZE_NORMAL:
default:
return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
}
}
Therefore, by creating a dimens folder and setting the values of design_fab_size_mini and design_fab_size_normal, the size of FloatingActionButton can be customized. Here is an example:
/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>
Since FloatingActionButton indirectly inherits from ImageView, some properties of ImageView can also be used. I won't go into detail here.
Properties of FloatingActionButton#
Here are some commonly used properties:
android:src // Set the icon (24dp)
app:backgroundTint // Set the background color of the icon
app:rippleColor // Set the color of the ripple effect when clicked
app:elevation // Set the shadow size
app:fabSize // Set the size
app:pressedTranslationZ // Set the distance from the Z-axis when pressed
app:layout_anchor // Set the anchor
app:layout_anchorGravity// Set the position relative to the anchor
Regarding the properties, it is helpful to understand them and observe the effects after setting them.
Simple usage#
I think it's better to have a visual effect when taking notes, so let's take a look at the specific effect of using CoordinatorLayout and FloatingActionButton. The layout is as follows:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.manu.materialdesignsamples.samples.SampleActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:visibility="visible"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:layout_gravity="bottom|end"
android:src="@drawable/fab"
android:scaleType="center"
app:backgroundTint="@color/colorAccent"
app:backgroundTintMode="src_in"
app:elevation="5dp"
app:rippleColor="#000000"
app:fabSize="auto"
app:pressedTranslationZ="10dp"/>
</android.support.design.widget.CoordinatorLayout>
Then, set the click event for FloatingActionButton, as shown below:
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v,"I am a Snackbar...",Snackbar.LENGTH_SHORT)
.setAction("Cancel", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(SampleActivity.this, "Cancelled", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
Let's start with an effect image:
As can be seen, FloatingActionButton automatically leaves space for Snackbar to avoid covering it when Snackbar pops up. This is because FloatingActionButton has already implemented the corresponding Behavior for Snackbar. CoordinatorLayout automatically adjusts the position of the child views based on the specific behavior of the corresponding Behavior. In this case, it adjusts the position of FloatingActionButton. You can try setting the root layout to RelativeLayout, and of course, Snackbar will cover FloatingActionButton when it pops up. As the name suggests, CoordinatorLayout is a layout for coordinating. The part about Behavior will be explained later. That's all for today.