[Android] FloatingActionButton 이미지 자체를 버튼으로 설정하는 법 | android:foreground = "@drawable/이미지"

 

다음과 같이 가운데 부분에는 버튼을 구현하고자 FloatingActionButton으로 구현했다.

 

android:src로 설정하면

사진 본연의 것이 아닌,,, 기본 설정으로 변해서 사진이미지 대로 안나왔었는데 ㅠ

android:foreground="@drawable/icon_add_circle"

이렇게 설정해주니 이미지 자체가 floating button이 될 수 있었다!!!

이미지가 잘 보여도 근처에 그림자가 지고, 깔끔하게 이미지만 딱 보이려면 아래 속성을 추가해야 한다.. ㅎㅎ

 

app:itemActiveIndicatorStyle="@android:color/transparent"
app:backgroundTint="@android:color/transparent"
app:elevation="0dp"
app:borderWidth="0dp"

 

순서대로

1) 이미지 클릭 시에 근처 색깔이 보라색으로 변하는 현상이 있었다... 저걸 추가해줘야함!

2) 그리고 floating 그림자가 자꾸 생겨서 찾아보니 backgroundtint를 투명으로 설정해줘야함!

3) elevation 까지 0dp로 주니까 미리보기 화면에서는 이미지 버튼이 안보였지만, 막상 실행해보니 잘 보였음

4) 그리고 겉 테두리도 0dp로 줘야 이미지 자체만 딱 보인다

 

 

++ bottomnavigationView 추가 설정 : 아이템 클릭 시 근처 배경이 회색으로 나타났다가 사라지는데

app:itemRippleColor="@android:color/transparent"

 

이것도 추가로 해줘야 한다. . . ㅎㅎ

 

navigationview가 가운데만 이미지만 보이게 하려면 다른 건 navigationview에서 설정을 해주고, 버튼을 두기 원하는 공간을 빈칸으로 둔 담에, 그 공간을 floatingactionbutton으로 설정해줘야 하는 듯 싶다

 

일부 코드 

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="76dp"
            android:background="#FFFFFF"
            app:itemRippleColor="@android:color/transparent"
            app:itemActiveIndicatorStyle="@android:color/transparent"
            app:itemIconTint="@drawable/bottom_navigation_setting"
            app:itemTextColor="@color/bottom_gray"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/nav_menu" />
            
<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/postButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="@{() -> viewModel.postButtonClick()}"
            android:foreground="@drawable/icon_add_circle"
            app:itemActiveIndicatorStyle="@android:color/transparent"
            app:backgroundTint="@android:color/transparent"
            app:elevation="0dp"
            app:borderWidth="0dp"
            app:layout_constraintBottom_toBottomOf="@+id/bottomNavigationView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/nav_host_fragment"
            app:maxImageSize="@dimen/design_fab_size_normal"
            />

 

참고 ! 

가운데 부분을 막기 위한 로직은 isenabled 처리했다. 

 

val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        val navController = navHostFragment.navController

        // 가운데 메뉴(제보하기)에 대한 터치 이벤트를 막기 위한 로직
        binding.bottomNavigationView.apply {
            setupWithNavController(navController)
            background = null
            menu.getItem(2).isEnabled = false
        }

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">


    <item android:id="@+id/homeFragment"
        android:icon="@drawable/icon_home_on"
        android:title="@string/bottom_navigation_home" />

    <item android:id="@+id/analysisFragment"
        android:icon="@drawable/icon_leaderboard_off"
        android:title="@string/bottom_navigation_analysis" />

    <item android:id="@+id/add"
        android:title="" />

    <item android:id="@+id/calculateFragment"
        android:icon="@drawable/icon_calculate_off"
        android:title="@string/bottom_navigation_calculate" />

    <item android:id="@+id/mypageFragment"
        android:icon="@drawable/icon_person_off"
        android:title="@string/bottom_navigation_mypage" />

</menu>

 

메뉴 부분 "", 로 해주고 icon 이미지를 안줬다 id 만 줬다.