[Android][Java] textview로 만든 메뉴 선택 효과 따라하기

안녕하세요. 오늘은 메뉴를 선택할 때마다 메뉴의 배경을 변경해보겠습니다.

참고로 별도의 위젯이나 프래그먼트를 쓰지 않고 전부 액티비티 내에서 textview로 만들었습니다.

 

1. 따라하려는 어플

따라하려는 타 어플의 효과

메뉴를 선택하면 글자 위에 빨간색 표시가 생깁니다. 

 

2. 구현방법

textview의 배경을 변경합니다. 

 

2.1 xml파일

drawable폴더에 xml파일을 하나 만듭니다. 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="0dp"
        android:left="-10dp"
        android:right="-10dp"
        android:bottom="-10dp"
        >
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>

            <stroke android:width="8dp"
                android:color="#FF5722"/>
        </shape>
    </item>
</layer-list>

이렇게 상단만 붉어집니다. 

 

2.2 layout

<TextView
    android:id="@+id/bookState_all"
    android:layout_weight="1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="5dp"
    android:background="@drawable/stroke_top_orange"
    android:gravity="center"
    android:padding="10dp"
    android:text="전체"
    android:textColor="@color/black"
    android:textSize="17sp" />

android:background="@drawable/stroke_top_orange"

을 추가합니다.

 

2.3 class

// #메뉴1 전체
binding.bookStateAll.setOnClickListener(new View.OnClickListener() { // 클릭 후 실행
    @Override
    public void onClick(View v) {

        setUI_backgroundColor_selectOne(binding.bookStateAll); // 선택한 메뉴 파라미터로 넘기기

    }
});

private void setUI_backgroundColor_selectOne(TextView tv) { // 선택한 하나만 색상주기

    binding.bookStateAll.setBackgroundResource(0);
    binding.bookStateRead.setBackgroundResource(0);
    binding.bookStateReading.setBackgroundResource(0);
    binding.bookStateHopeToRead.setBackgroundResource(0);

    tv.setBackgroundDrawable(getResources().getDrawable(R.drawable.stroke_top_orange));

}

setBackgroundResource(0)을 하여 배경을 삭제합니다.

그러곤 파라미터로 넘겨받은 textview에 아까 만들어둔 xml파일로 배경을 설정합니다. 

 

 

3. 결과물

따라한 결과물

 

참고로 저 위의 회색선은 <View>로 만들었습니다. 

배경파일을 응용하여 다양한 효과를 줄 수 있습니다.