안드로이드 앱 만들기 Floating Action Button 과 ExpandableFab 의 차이

이번에 새로운 앱을 만들면서 적용해 보았던... Fab 에 대한 이해를 위해서

이걸 적용하게된 이유는 액션바를 제거해 달라는 요구가 있었기 때문에 액션바 때문에 화면의 일부를 사용할 수 없다는 게 불편하기도 하고 해서 다른 방법으로 메뉴를 구성해 보아야 했는데, google에 제공하는 Fab 보다는 쉽게 구현이 가능한 방법을 찾아보다가 아래 링크를 찾았다.

 

nambicompany.github.io/expandable-fab/

ExpandableFab

이걸 적용하기 위한 간단한 설명을 해 두고자 한다. 물론 위 링크를 따라다녀 보면 알 수 있는 내용이기는 하겠지만, 

한번 찾았던 것을 다시 찾는 것도 힘든 일이기도 하고... 물론 그 사이에 추가 개선된 내용이 있어도 모르고 지나가는 불운(?)이 있을 지 모르지만...

 

일단 적용을 위해서는 build.gradle에 아래 한줄을 추가했다.

 

dependencies {

implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'androidx.navigation:navigation-fragment:2.3.3'
implementation 'androidx.navigation:navigation-ui:2.3.3'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
implementation 'com.nambimobile.widgets:expandable-fab:1.0.2'
}

 

다른 것들은 기본적으로 생성되는 gradle 내용이고 빨간색 한줄만 추가해 주면 된다. 그리고 나서 gradle sync 실행으로 준비는 끝이다.  (2021.2.16현재까지 제공된 버전은 1.0.2 인데.. 나중에는 업데이트가 될까 ?)

 

layout.xml 에 추가하는 내용은 아래와 같다...  

구조는 ExpandableFabLayout 안에

          Overlay  : 화면 overlay을 위해서 필요하고 아래 예시 처럼 overlay_alpha 의 값을 지정하면

                       Fab 가 동작하는 동안 아래 화면을 흐리게 만들어 준다.  그런게 필요 없다면 없어도 무방~

          ExpandableFab : 기본표시 되어야 하는 것 

                                efab_iconAnimationRotationDeg 값을 조정하면 메뉴가 움직일떄 표시되는 + 기호의

                                움직임이 달라짐

          FabOption : 이것은 메뉴로 나타나는 버튼을 추가할 수 있다. 몇개를 넣어도 되므로 화면에 나오는

                           구조에 따라서 여러개를 사용할 수 있다.

 

    <com.nambimobile.widgets.efab.ExpandableFabLayout
        android:id="@+id/expandable_fab_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <com.nambimobile.widgets.efab.Overlay
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:overlay_alpha="0.75"
        app:overlay_color="#000000"
        app:overlay_openingAnimationDurationMs="1000" />

    <com.nambimobile.widgets.efab.ExpandableFab
        android:id="@+id/expandable_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="@dimen/ui_margin_medium"
        android:layout_marginEnd="@dimen/ui_margin_medium"
        app:efab_color="#9374DE"
        app:efab_iconAnimationRotationDeg="-225"
        app:efab_closingAnticipateTension="0"
        app:label_text="@string/app_name"/>

        <com.nambimobile.widgets.efab.FabOption
            android:id="@+id/fab_menu_setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_color="#FF8800"
            app:fab_icon="@drawable/ic_launcher_foreground"
            app:label_backgroundColor="#808080"
            app:label_text="@string/action_settings"
            app:label_textColor="#FFC0CB" />
            
   </com.nambimobile.widgets.efab.ExpandableFabLayout            

 

activity 내에서 사용은 아래 예시와 같이 간단하게 구현할 수 있다.

    ActivityMainBinding binding ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        View view = binding.getRoot() ;
        setContentView(view);
        setSupportActionBar(binding.toolbar);

        binding.fabMenuSetting.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Mesg", Toast.LENGTH_LONG).show();
            }
        });

    }

 

view binding 에 대해서는 나중에 또...

 

그럼~