안드로이드 앱 개발에서 사용자 인터페이스(UI)는 매우 중요한 요소입니다.
사용자 경험을 향상시키기 위해서는 직관적이고 효율적인 UI를 제공해야 합니다.
이 글에서는 ‘플로팅 액션 버튼(Floating Action Button, FAB)’에 대해 살펴보겠습니다.
특히, 확장된 플로팅 액션 버튼에 대해 자세히 설명하고, 이를 구현하는 방법을 단계별로 안내하겠습니다.
플로팅 액션 버튼(FAB)란?
플로팅 액션 버튼은 화면의 특정 영역에 떠 있는 원형 버튼으로, 일반적으로 가장 중요한 행동을 표현합니다.
예를 들어, 메모 앱에서는 ‘새 메모 만들기’, 채팅 앱에서는 ‘메시지 작성하기’와 같은 주요 작업을 수행하는 버튼입니다.
FAB는 매우 직관적이며, 사용자가 쉽게 접근할 수 있도록 도와줍니다.
확장된 플로팅 액션 버튼의 필요성
기본적인 FAB는 하나의 작업을 수행하는 데 최적화되어 있지만, 사용자에게 여러 가지 관련 작업을 보여줄 필요가 있을 때 확장된 형태가 필요합니다.
확장된 FAB는 사용자가 버튼을 눌렀을 때 여러 개의 추가 버튼이나 옵션을 펼쳐 보여주는 형태입니다.
이를 통해 사용자는 더 많은 선택지를 통해보다 다양한 작업을 수행할 수 있습니다.
확장된 플로팅 액션 버튼의 디자인
확장된 FAB 디자인은 크게 두 가지로 나눌 수 있습니다:
1. 기본 FAB
2. 확장된 상태에서 보여줄 추가 아이콘들.
이 두 가지 요소를 잘 결합하면 사용자에게 직관적인 UI를 제공할 수 있습니다.
안드로이드 스튜디오에서 프로젝트 설정하기
먼저 안드로이드 스튜디오를 열고 새로운 프로젝트를 생성합니다.
언어는 ‘Java’로 선택하고, ‘Empty Activity’를 선택하여 기본 템플릿을 제공합니다.
// build.gradle (Module: app)
dependencies {
implementation 'com.android.support:design:28.0.0'
}
위와 같은 종속성을 추가하여 Material Components에 대한 지원을 추가합니다.
최신 버전의 라이브러리를 사용하기 위해 구글의 Maven repository를 사용할 수 있도록 설정합니다.
레이아웃 파일 디자인하기
‘res/layout/activity_main.xml’ 파일을 열고 기본 레이아웃을 설정합니다.
다음은 플로팅 액션 버튼과 추가 버튼을 포함한 XML 코드입니다.
<RelativeLayout 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">
<com.getkeepsafe.taptargetview.TapTargetView
android:id="@+id/tap_target_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tapTarget="여기서 새로운 메모를 만드세요!"
app:outerCircleColor="#f44336"
app:targetCircleColor="#ffffff"
app:textColor="#000000">
</com.getkeepsafe.taptargetview.TapTargetView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
app:srcCompat="@drawable/ic_add">
</android.support.design.widget.FloatingActionButton>
<LinearLayout
android:id="@+id/expanded_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentEnd="true"
android:layout_above="@id/fab"
android:visibility="gone">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_item_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_item1">
</android.support.design.widget.FloatingActionButton>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_item_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_item2">
</android.support.design.widget.FloatingActionButton>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_item_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_item3">
</android.support.design.widget.FloatingActionButton>
</LinearLayout>
</RelativeLayout>
MainActivity.java 파일의 구현
‘MainActivity.java’ 파일을 열고 버튼 클릭 이벤트를 처리하는 코드를 추가합니다.
FAB가 클릭되었을 때 추가 버튼을 확장하거나 축소하는 로직을 구현합니다.
package com.example.fabexample;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
private FloatingActionButton fab;
private LinearLayout expandedMenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab = findViewById(R.id.fab);
expandedMenu = findViewById(R.id.expanded_menu);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (expandedMenu.getVisibility() == View.GONE) {
expandedMenu.setVisibility(View.VISIBLE);
} else {
expandedMenu.setVisibility(View.GONE);
}
}
});
findViewById(R.id.fab_item_1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 아이템 1에 대한 행동을 추가
}
});
findViewById(R.id.fab_item_2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 아이템 2에 대한 행동을 추가
}
});
findViewById(R.id.fab_item_3).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 아이템 3에 대한 행동을 추가
}
});
}
}
아이콘 및 디자인 요소 추가하기
프로젝트의 ‘res/drawable’ 폴더에 사용될 아이콘을 추가합니다.
이러한 아이콘은 각 작업에 대해 명확한 경고를 제공하고, 사용자가 쉽게 알아볼 수 있도록 도와줍니다.
또한, 사용자 피드백을 고려하여 버튼의 색상과 크기를 조정합니다.
애니메이션 추가
확장된 FAB의 전환 효과를 개선하기 위해 애니메이션을 추가할 수 있습니다.
버튼이 확장되거나 축소될 때 부드러운 애니메이션을 통해 사용자 경험을 더욱 향상시킬 수 있습니다.
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (expandedMenu.getVisibility() == View.GONE) {
expandedMenu.setVisibility(View.VISIBLE);
expandedMenu.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down));
} else {
expandedMenu.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up));
expandedMenu.setVisibility(View.GONE);
}
}
});
애니메이션 XML 만들기
‘res/anim’ 폴더에 슬라이드 애니메이션 XML 파일을 생성합니다.
// slide_down.xml
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta=-100%
android:toYDelta=0
android:duration=300 />
// slide_up.xml
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta=0
android:toYDelta=-100%
android:duration=300 />
테스트 및 디버깅
코드를 작성하고 모든 요소가 완벽하게 작동하는지 확인한 후,
여러 기기에서 앱을 테스트하여 UI가 올바르게 표시되는지 확인합니다.
여기서는 시뮬레이터나 실제 기기를 사용하여 테스트를 진행할 수 있습니다.
결론
이번 강좌에서는 확장된 플로팅 액션 버튼을 사용하여
안드로이드 앱의 사용자 경험을 개선하는 방법을 배웠습니다.
FAB는 간단한 버튼이지만, 올바르게 구현하면 사용자에게 큰 편리함을 제공할 수 있습니다.
이 강좌를 통해 배운 내용을 바탕으로 여러분의 앱에 다양한 기능을 추가해 보시기 바랍니다.