کار با FloatingButton متریال

تعریف FloatingButton

یک FloatingButton که عمل اصلی یا رایج ترین را روی صفحه اصلی انجام می دهد. روی تمام محتوای صفحه ظاهر می شود ، به طور معمول به صورت دایره ای شکل و یک نماد در مرکز آن است. FloatingButton ها به سه نوع معمولی ، مینی و طولانی ارائه می شوند.

تشریح:

FAB معمولاً در یک شکل دایره ای نمایش داده می شود. طرح رنگی یک برنامه پر بودن رنگ آن را تعیین می کند ، که باید با ناحیه پشت … FAB معمولاً در یک شکل دایره ای نمایش داده می شود.، که باید با منطقه پشت FAB در تضاد باشد.

برای متریال بودن برنامه FAB رو در دو سایز می توان تولید کرد :

۱. Default (56 x 56dp)
۲. Mini (40 x 40dp)

در صفحه های کوچکتر باید از mini FAB استفاده شود. وقتی عرض صفحه ۴۶۰dp یا کمتر باشد ، شکل FAB پیش فرض (۵۶dp) باید به اندازه کوچک (۴۰dp) تبدیل شود.

Mini FABs برای ایجاد تداوم بصری با عناصر صفحه نمایش دیگر استفاده شود.

این mini FAB با داشتن اندازه ، شکل و قرارگیری مربوط به آیکون های پوشه زیر خود ، پیوستگی بصری ایجاد می کند.

شکل FAB رنگی از پالت برنامه به خود اختصاص می دهند.

سایر عناصر را روی FAB لایه بندی نکنید.

آیکون

FAB کاربرد آن باید به وضوح مشخص باشد . FAB نباید حاوی کار ها یا اقداماتی باشد که در جای دیگر یا مکان دیگری از صفحه نمایش یافته می شود.

تعیین سطح

FAB ها می توانند به نوارهای بالای برنامه و لبه برخی از اجزا متصل شوند مانند :

یک FloatingButton را می توان به لبه یک جز متصل کرد.

و برای بهتر شدن و زیباتر شدن برنامه بهتر است که FAB رو در اجزای جداگانه ، مانند cards،نداشته باشند.

اقدامات

یک دکمه عملکرد شناور (FAB) می تواند عملیاتی را روی صفحه فعلی تحریک کند یا می تواند عملی را ایجاد کند که صفحه جدیدی ایجاد می کند.

FAB یک اقدام مهم و سازنده مانند:

ایجاد کردن
علاقه مندیها
اشتراک گذاری
شروع یک فرآیند

از استفاده از FAB برای اقدامات جزئی یا مخرب مانند موارد زیر خودداری کنید:

بایگانی یا حذف شده ها
هشدارها یا خطاها
کارهای محدود مانند برش متن
کنترل هایی که برای نوار ابزار مناسب ترند (مانند کنترل ها برای تنظیم میزان صدا یا رنگ قلم)

تصویر زیر FAB های مورد تایید برای ایجاد یک برنامه متریال می باشد :

بهتر است از FAB برای اقدامات جزئی ، سرریز ، نامشخص یا مخرب استفاده نکنید.مانند زیر :

انیمیشن و نمایش FloatingButton

وقتی FloatingButton روی صفحه حرکت میکند ، از یک نقطه مرکزی به سمت خارج منبسط می شود. نماد درون آن نیز ممکن است متحرک باشد.

در حالی که FAB ها باید …

ظاهر شدن روی صفحه وقتی FAB روی صفحه متحرک می شود ، از یک نقطه مرکزی به سمت خارج منبسط می شود. نماد درون آن نیز ممکن است متحرک باشد.
اگرچه FAB ها باید به محتوای صفحه ربط داشته باشند ، اما به سطحی که در آن محتوا ظاهر می شود ، متصل نیستند وارتباطی ندارند.
FAB ها به دلیل اهمیت نسبی جدا از سایر عناصر UI حرکت می کنند.
انتقال صفحه FAB ها می توانند برای شروع ارتباط شکل بگیرند. وقتی صفحه نمایش ظاهر خود را تغییر می دهد ، FAB باید ناپدید شود و در حین نمایش دوباره ظاهر شود.
ظهور FAB فقط در صورت مربوط بودن به صفحه جدید باید دوباره ظاهر شود.
در صورت امکان باید دوباره در همان موقعیت ظاهر شود.

مثال :

میخواهیم برنامه ای بنویسیم که تو اون یک دمکه شناور ایجاد کرده مانند شکل و با کلیک بر روی اون یک منو باز شده که دارای دو آیتم می باشد .

ابتدا یک پروژه جدیدی ایجاد می کنیم .و کد زیر رو به گریدل اضافه می کنیم:

۱	implementation ‘com.google.android.material:material:۱.۳.۰-alpha02’

حا در قسمت Style برنامه کد زیر را وارد می کنیم تا یک طرح و شکل خاص به برنامه بدهیم:

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

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

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

</style>

</resources>

وارد کردن آیکن های مربوطه

به مسیر زیر رفته و یک آیکن انتخاب میکنیم :

روی پوشه drawable راست کلیک کرده و Vector Asset رو کلیک می کنیم و فرمی که باز می شود New میزنیم و مانند تصویر می توانیم . از بین تصاویر یک تصویر مناسب مانند شکل زیر انتخاب کنیم :

آیکن های دیگر مورد استفاده در برنامه رو به همین شکل اضافه نمایید .

در قسمت لایوت اکتیویتی کد زیر رو وارد می کنیم :

<?xml version="1.0" encoding="utf-8"?> 
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context=".MainActivity"
tools:ignore="HardcodedText"> 





<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/add_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:backgroundTint="@color/colorAccent"
android:text="Actions"
app:icon="@drawable/ic_add_black_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" /> 




<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/add_alarm_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:backgroundTint="@color/colorAccent"
app:fabSize="normal"
app:layout_constraintBottom_toTopOf="@+id/add_fab"
app:layout_constraintEnd_toEndOf="@+id/add_fab"
app:srcCompat="@drawable/ic_add_alarm_black_24dp" /> 


<TextView
android:id="@+id/add_alarm_action_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="Add Alarm"
app:layout_constraintBottom_toBottomOf="@+id/add_alarm_fab"
app:layout_constraintEnd_toStartOf="@+id/add_alarm_fab"
app:layout_constraintTop_toTopOf="@+id/add_alarm_fab" /> 




<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/add_person_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:backgroundTint="@color/colorAccent"
app:fabSize="normal"
app:layout_constraintBottom_toTopOf="@+id/add_alarm_fab"
app:layout_constraintEnd_toEndOf="@+id/add_alarm_fab"
app:layout_constraintStart_toStartOf="@+id/add_alarm_fab"
app:srcCompat="@drawable/ic_person_add_black_24dp" /> 


<TextView
android:id="@+id/add_person_action_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="Add Person"
app:layout_constraintBottom_toBottomOf="@+id/add_person_fab"
app:layout_constraintEnd_toStartOf="@+id/add_person_fab"
app:layout_constraintTop_toTopOf="@+id/add_person_fab" /> 
</androidx.constraintlayout.widget.ConstraintLayout>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

۷۹

۸۰

۸۱

۸۲

۸۳

۸۴

۸۵

۸۶

۸۷

۸۸

۸۹

۹۰

۹۱

۹۲

۹۳

۹۴

۹۵

۹۶

<?xml version="۱.۰" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

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"

tools:context=".MainActivity"

tools:ignore="HardcodedText">

<!--After the implementation the Floating Action Button at

the bottom right corner as we have constrained accordingly-->

<!--After clicking the above button the

following two buttons will pop up.

So this button is considered as parent FAB-->

<!--After opening the application it looks like regular

FAB but after user clicks it, it extends-->

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton

android:id="@+id/add_fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="end"

android:layout_marginEnd="۱۶dp"

android:layout_marginBottom="۱۶dp"

android:backgroundTint="@color/colorAccent"

android:text="Actions"

app:icon="@drawable/ic_add_black_24dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent" />

<!--Make sure that you are constraining this

button to the parent button-->

<!--Make sure to add backgroundTint attribute to match

the entire application color-->

<!--because after changing the base application theme the color

of the FAB is set Blue as default-->

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:id="@+id/add_alarm_fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="۲۴dp"

android:backgroundTint="@color/colorAccent"

app:fabSize="normal"

app:layout_constraintBottom_toTopOf="@+id/add_fab"

app:layout_constraintEnd_toEndOf="@+id/add_fab"

app:srcCompat="@drawable/ic_add_alarm_black_24dp" />

<!--Make sure that you are constraining this

Text to the add Alarm FAB button-->

<TextView

android:id="@+id/add_alarm_action_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="۸dp"

android:text="Add Alarm"

app:layout_constraintBottom_toBottomOf="@+id/add_alarm_fab"

app:layout_constraintEnd_toStartOf="@+id/add_alarm_fab"

app:layout_constraintTop_toTopOf="@+id/add_alarm_fab" />

<!--Make sure that you are constraining this button

to the add Alarm FAB button-->

<!--Make sure to add backgroundTint attribute to match

the entire application color-->

<!--because after changing the base application theme

the color of the FAB is set Blue as default-->

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:id="@+id/add_person_fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="۲۴dp"

android:backgroundTint="@color/colorAccent"

app:fabSize="normal"

app:layout_constraintBottom_toTopOf="@+id/add_alarm_fab"

app:layout_constraintEnd_toEndOf="@+id/add_alarm_fab"

app:layout_constraintStart_toStartOf="@+id/add_alarm_fab"

app:srcCompat="@drawable/ic_person_add_black_24dp" />

<!--Make sure that you are constraining this Text

to the add Person FAB button-->

<TextView

android:id="@+id/add_person_action_text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginEnd="۸dp"

android:text="Add Person"

app:layout_constraintBottom_toBottomOf="@+id/add_person_fab"

app:layout_constraintEnd_toStartOf="@+id/add_person_fab"

app:layout_constraintTop_toTopOf="@+id/add_person_fab" />

</androidx.constraintlayout.widget.ConstraintLayout>

حالا میریم سراغ قسمت java و کدنویسی :

قبل از شروع به دیدن خروجی ، بهتر است دکمه شناور والدین و دکمه های عملکرد شناور زیر را کنترل کنید ، که اگر این کار انجام نشده باشد ، ما در خوجی هیچ کاری انجام نمیشود :

package ir.bookzar.menu;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
public class Coordinatelayout extends AppCompatActivity {
FloatingActionButton mAddAlarmFab, mAddPersonFab;
ExtendedFloatingActionButton mAddFab;
TextView addAlarmActionText, addPersonActionText;
Boolean isAllFabsVisible;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_coordinatelayout);
mAddFab = findViewById(R.id.add_fab);
// FAB button
mAddAlarmFab = findViewById(R.id.add_alarm_fab);
mAddPersonFab = findViewById(R.id.add_person_fab);
// Also register the action name text, of all the
// FABs. except parent FAB action name text
addAlarmActionText = findViewById(R.id.add_alarm_action_text);
addPersonActionText = findViewById(R.id.add_person_action_text);
// Now set all the FABs and all the action name
// texts as GONE
mAddAlarmFab.setVisibility(View.GONE);
mAddPersonFab.setVisibility(View.GONE);
addAlarmActionText.setVisibility(View.GONE);
addPersonActionText.setVisibility(View.GONE);
// make the boolean variable as false, as all the
// action name texts and all the sub FABs are
// invisible
isAllFabsVisible = false;
// Set the Extended floating action button to
// shrinked state initially
mAddFab.shrink();
// We will make all the FABs and action name texts
// visible only when Parent FAB button is clicked So
// we have to handle the Parent FAB button first, by
// using setOnClickListener you can see below
mAddFab.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
if (!isAllFabsVisible) {
// when isAllFabsVisible becomes
// true make all the action name
// texts and FABs VISIBLE.
mAddAlarmFab.show();
mAddPersonFab.show();
addAlarmActionText.setVisibility(View.VISIBLE);
addPersonActionText.setVisibility(View.VISIBLE);
// Now extend the parent FAB, as
// user clicks on the shrinked
// parent FAB
mAddFab.extend();
// make the boolean variable true as
// we have set the sub FABs
// visibility to GONE
isAllFabsVisible = true;
} else {
// when isAllFabsVisible becomes
// true make all the action name
// texts and FABs GONE.
mAddAlarmFab.hide();
mAddPersonFab.hide();
addAlarmActionText.setVisibility(View.GONE);
addPersonActionText.setVisibility(View.GONE);
// Set the FAB to shrink after user
// closes all the sub FABs
mAddFab.shrink();
// make the boolean variable false
// as we have set the sub FABs
// visibility to GONE
isAllFabsVisible = false;
}
}
});
// below is the sample action to handle add person
// FAB. Here it shows simple Toast msg. The Toast
// will be shown only when they are visible and only
// when user clicks on them
mAddPersonFab.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(Coordinatelayout.this, "Person Added", Toast.LENGTH_SHORT).show();
}
});
// below is the sample action to handle add alarm
// FAB. Here it shows simple Toast msg The Toast
// will be shown only when they are visible and only
// when user clicks on them
mAddAlarmFab.setOnClickListener(
new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(Coordinatelayout.this, "Alarm Added", Toast.LENGTH_SHORT).show();
}
});
}
}

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

۷۳

۷۴

۷۵

۷۶

۷۷

۷۸

۷۹

۸۰

۸۱

۸۲

۸۳

۸۴

۸۵

۸۶

۸۷

۸۸

۸۹

۹۰

۹۱

۹۲

۹۳

۹۴

۹۵

۹۶

۹۷

۹۸

۹۹

۱۰۰

۱۰۱

۱۰۲

۱۰۳

۱۰۴

۱۰۵

۱۰۶

۱۰۷

۱۰۸

۱۰۹

۱۱۰

۱۱۱

۱۱۲

۱۱۳

۱۱۴

۱۱۵

۱۱۶

۱۱۷

۱۱۸

۱۱۹

۱۲۰

۱۲۱

۱۲۲

۱۲۳

۱۲۴

۱۲۵

۱۲۶

۱۲۷

۱۲۸

۱۲۹

package ir.bookzar.menu;

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import androidx.coordinatorlayout.widget.CoordinatorLayout;

import android.graphics.Color;

import android.os.Bundle;

import android.view.View;

import android.widget.TextView;

import android.widget.Toast;

import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class Coordinatelayout extends AppCompatActivity {

FloatingActionButton mAddAlarmFab, mAddPersonFab;

ExtendedFloatingActionButton mAddFab;

TextView addAlarmActionText, addPersonActionText;

Boolean isAllFabsVisible;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_coordinatelayout);

mAddFab = findViewById(R.id.add_fab);

// FAB button

mAddAlarmFab = findViewById(R.id.add_alarm_fab);

mAddPersonFab = findViewById(R.id.add_person_fab);

// Also register the action name text, of all the

// FABs. except parent FAB action name text

addAlarmActionText = findViewById(R.id.add_alarm_action_text);

addPersonActionText = findViewById(R.id.add_person_action_text);

// Now set all the FABs and all the action name

// texts as GONE

mAddAlarmFab.setVisibility(View.GONE);

mAddPersonFab.setVisibility(View.GONE);

addAlarmActionText.setVisibility(View.GONE);

addPersonActionText.setVisibility(View.GONE);

// make the boolean variable as false, as all the

// action name texts and all the sub FABs are

// invisible

isAllFabsVisible = false;

// Set the Extended floating action button to

// shrinked state initially

mAddFab.shrink();

// We will make all the FABs and action name texts

// visible only when Parent FAB button is clicked So

// we have to handle the Parent FAB button first, by

// using setOnClickListener you can see below

mAddFab.setOnClickListener(

new View.OnClickListener() {

@Override

public void onClick(View view) {

if (!isAllFabsVisible) {

// when isAllFabsVisible becomes

// true make all the action name

// texts and FABs VISIBLE.

mAddAlarmFab.show();

mAddPersonFab.show();

addAlarmActionText.setVisibility(View.VISIBLE);

addPersonActionText.setVisibility(View.VISIBLE);

// Now extend the parent FAB, as

// user clicks on the shrinked

// parent FAB

mAddFab.extend();

// make the boolean variable true as

// we have set the sub FABs

// visibility to GONE

isAllFabsVisible = true;

} else {

// when isAllFabsVisible becomes

// true make all the action name

// texts and FABs GONE.

mAddAlarmFab.hide();

mAddPersonFab.hide();

addAlarmActionText.setVisibility(View.GONE);

addPersonActionText.setVisibility(View.GONE);

// Set the FAB to shrink after user

// closes all the sub FABs

mAddFab.shrink();

// make the boolean variable false

// as we have set the sub FABs

// visibility to GONE

isAllFabsVisible = false;

}

});

// below is the sample action to handle add person

// FAB. Here it shows simple Toast msg. The Toast

// will be shown only when they are visible and only

// when user clicks on them

mAddPersonFab.setOnClickListener(

new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(Coordinatelayout.this, "Person Added", Toast.LENGTH_SHORT).show();

}

});

// below is the sample action to handle add alarm

// FAB. Here it shows simple Toast msg The Toast

// will be shown only when they are visible and only

// when user clicks on them

mAddAlarmFab.setOnClickListener(

new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(Coordinatelayout.this, "Alarm Added", Toast.LENGTH_SHORT).show();

}

});

}

من تو برنامه نام اکتیوی خودم رو Coordinatelayout گذاشتم شما میتونید این کارو تو هار اکتیویتی انجام بدین …

(اگر فایل gif نمی بینید روی ان کلیک کنید )

مطالعه بیشتر :

لینک ۱

مدیریت

برنامه نویسی در زمینه اندروید استودی و ویژوال استودیو و انجام پروژه های متعدد برنامه نویسی.

مطالعه بیشتر

کار با FloatingButton متریال

تعریف FloatingButton

آیکون

تعیین سطح

وارد کردن آیکن های مربوطه

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

ثبت نام در خبرنامه

با تشکر از شما

تعریف FloatingButton

آیکون

تعیین سطح

وارد کردن آیکن های مربوطه

مطالب مشابه

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی