[Android] Toolbar Menu Icon Shadow 효과 적용

배경 이미지가 계속해서 바뀌는 액티비티에서

배경이미지가 흰색이고, Toolbar Background가 투명색, Toolbar 메뉴 아이콘이 흰색일 때 메뉴 아이콘이 보이지 않는 이슈가 발생했다.

 

따라서 배경 이미지가 흰색일 경우에 대응하기 위해 Vector 아이콘에 그림자 효과를 적용함으로써 해결할 수 있었다.

 

아이디어는 layer-list 태그를 이용하여 Vector Item 2개를 중첩시켜 놓는 것이다. 

 

아래 코드에서 아이콘 pathData 속성만 교체해주면 shawdow가 적용된 아이콘을 사용할 수 있다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<-- 그림자 색상 아이콘-->
    <item>
        <vector android:height="24dp"
            android:viewportHeight="24" android:viewportWidth="24"
            android:width="24dp" >
            <group android:translateY="2">
                <path android:fillColor="#80000000"
                    android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
            </group>
        </vector>
    </item>

<-- 흰색 아이콘 -->
    <item>
        <vector android:height="24dp"
            android:viewportHeight="24" android:viewportWidth="24"
            android:width="24dp" >
            <path android:fillColor="#FFF"
                android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
        </vector>
    </item>

</layer-list>

 

Toolbar에 title에 shadow 효과를 주고 싶으면, setElevation(float)을 설정하면 된다.

        setSupportActionBar(viewDataBinding.editToolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setDisplayShowCustomEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(R.drawable.arrow_left)
        supportActionBar?.elevation = 4.0f //그림자 적용

 

그림자 효과가 적용된 아이콘들 이미지이다.