Floating Action Button

Floating Action Button 은 화면에 떠있는 버튼으로 머터리얼 디자인에서 자주 사용하는 기본 위젯이다.

 

https://www.youtube.com/watch?v=cASXtRa6yDc 동영상을 보면 이해될 것이다.

 

 

앱 build.gradle 추가사항

dependencies {
    implementation 'com.google.android.material:material:1.1.0'
}

 

 

ConstraintLayout 의 모든 보기에는 가로 및 세로 제약조건을 각각 하나 이상 추가해야 한다.

 

 

아래 그림에서 ConstraintLayout 에서 버튼의 위치를 결정하는 것은 1번과 2번이다.

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"

 

 

 

5번을 누르면 floating 버튼의 색상을 쉽게 변경할 수 있다.

6번은 floating 버튼 안의 이미지를 작성하는 것이다.

Vector Drawable을 사용하고 롤리팝 미만의 기기를 지원해야 할 때는 src 대신에 srcCompat 속성을 사용해야 한다.

 

 

 

 

검색으로 원하는 이미지를 찾아도 된다.

 

이름이 자동으로 추가된 것을 확인할 수 있다.

 

 

 

<?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">     <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Hello World!"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toTopOf="parent"/>     <com.google.android.material.floatingactionbutton.FloatingActionButton         android:id="@+id/fabMain"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_margin="16dp"         android:backgroundTint="#00BCD4"         android:tooltipText="메시지 전송"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toEndOf="parent"         app:srcCompat="@drawable/ic_baseline_menu_24"         tools:ignore="MissingConstraints" /> </androidx.constraintlayout.widget.ConstraintLayout>

 

public class MainActivity extends AppCompatActivity {     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         FloatingActionButton fab = findViewById(R.id.fabMain);         fab.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 Snackbar.make(view,"실제 클릭 이벤트를 대신 보여준다.",Snackbar.LENGTH_LONG)                         .setAction("Action",null)                         .show();             }         });     } }

 

테스트 파일 첨부 (Java 기반 코드인데 코틀린으로 변환 목적으로 앱 build.gradle이 코틀린 관련 추가되어 있음)

floatingbutton.zip

다운로드

 

코틀린으로 코드를 변환해보자.

 

자동변환 전후 Java코드와 kotlin 코드를 보자.

FloatingActionButton fab = findViewById(R.id.fabMain); fab.setOnClickListener(new View.OnClickListener() {     @Override     public void onClick(View view) {         Snackbar.make(view,"실제 클릭 이벤트를 대신 보여준다.",Snackbar.LENGTH_LONG)                 .setAction("Action",null)                 .show();     } });

val fab = findViewById<FloatingActionButton>(R.id.fabMain) fab.setOnClickListener { view ->     Snackbar.make(view, "실제 클릭 이벤트를 대신 보여준다.", Snackbar.LENGTH_LONG)         .setAction("Action", null)         .show() }

 

코틀린 코드를 좀 더 정리하면....

fabMain.setOnClickListener { view ->     Snackbar.make(view, "실제 클릭 이벤트를 대신 보여준다.", Snackbar.LENGTH_LONG)         .setAction("Action", null)         .show() }