[JAVA][Android] Chip (칩) 기능 사용하기

안녕하세요

 

오늘은 Chip (칩) 이라는 기능에 대해서 살펴보겠습니다.

 

Chip은 짧은 텍스트, 아이콘, 또는 삭제버튼을 함께 표시할 수 있는 UI 요소입니다.

태그나 이메일 목록과 같은 정보를 표시할 때 유용하게 사용할 수 있습니다. 

Chip은 작고 가벼운 디자인으로, 여러 정보를 효율적으로 전달할 수 있습니다. 

 

우선 전체 코드입니다.

 

MainActivity.java

public class MainActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Chip chip1 = findViewById(R.id.chip1);
    Chip chip2 = findViewById(R.id.chip2);
    Chip chip3 = findViewById(R.id.chip3);
    ChipGroup chipGroup = findViewById(R.id.chipGroup);

    chip1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(getApplicationContext(), chip1.getText() + " 선택됨", Toast.LENGTH_SHORT).show();
      }
    });

    chip2.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(getApplicationContext(), chip2.getText() + " 선택됨", Toast.LENGTH_SHORT).show();
      }
    });

    chip2.setOnCloseIconClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        chipGroup.removeView(chip2);
        Toast.makeText(getApplicationContext(), chip2.getText() + " 제거됨", Toast.LENGTH_SHORT).show();
      }
    });

    chip3.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(getApplicationContext(), chip3.getText() + " 선택됨", Toast.LENGTH_SHORT).show();
      }
    });

  }
}

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">


    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="false"
        android:layout_marginTop="16dp">

        <com.google.android.material.chip.Chip
            android:id="@+id/chip1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chip 1"
            app:closeIconEnabled="false" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chip 2"
            app:closeIconEnabled="true" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chip 3"
            app:closeIconEnabled="false" />

    </com.google.android.material.chip.ChipGroup>
</LinearLayout>

 

ChipGroup을 사용해서 여러 칩을 그룹화한 후,

abb:closeIconEnabled="true" 속성을 사용해서, Chip 2 에 제거 아이콘을 추가했습니다.

 

그리고, 각 칩마다 클릭리스너를 사용해 토스트메시지를 나타내도록 했고,

Chip 2에 대해서는 CloseIcon 클릭리스너를 사용해 삭제버튼을 누를 시, Chip 2 를 없애도록 했습니다.

 

시연 영상입니다.