본문으로 건너뛰기

디자인 커스터마이징

이 페이지에서는 BuzzAd Android용 SDK에서 제공하는 UI의 디자인을 변경하기 위한 방법을 확인할 수 있습니다.

✏️  참고
추가적인 디자인 변경을 원하는 경우, 고급 설정 토픽을 참고해 UI를 직접 구현하세요.

피드 배경 색상 변경하기​

✅  중요
이 기능은 BuzzAd Android용 SDK v3.27.x부터 사용할 수 있습니다.

피드 배경 색상을 변경할 수 있습니다.

final BuzzAdFeedTheme buzzAdFeedTheme =
      BuzzAdFeedTheme.getDefault()
        .backgroundColor(R.color.YOUR_BACKGROUND_COLOR) // Feed의 배경 색상
BuzzAdFeed.setDefaultTheme(buzzAdFeedTheme);

✏️  참고
backgroundColor 변경 시 Toolbar, Header, Tab background의 BackgroundColor도 함께 변경됩니다.

탭 디자인 변경하기​

피드 탭이 활성화되어 있는 경우, 탭의 UI 디자인을 변경할 수 있습니다.
이때 tabTextColorSelector처럼 이름에 selector가 포함된 옵션은 Android 개발 정책에 따라 설정하는 리소스에 <selector>가 포함되어야 합니다. 자세한 내용은 Android 공식 문서를 참고하세요.

탭 UI 디자인을 변경하려면 다음의 예시를 참고하세요.

// BuzzAdFeedTheme 설정을 통해 색상 등 UI 구성 요소를 변경할 수 있습니다.
final BuzzAdFeedTheme buzzAdFeedTheme = 
      BuzzAdFeedTheme.getDefault()
          ...생략...
          .tabTextColorSelector(R.color.YOUR_TEXT_COLOR) // 탭의 텍스트 색상(state_selected 필수 적용)
          .tabBackgroundColor(R.color.YOUR_TAB_BACKGROUND_COLOR) // 탭의 배경 색상
          .tabIndicatorSelector(R.drawable.YOUR_TAB_INDICATOR_SELECTOR); // 탭의 인디케이터에 대한 Selector
BuzzAdFeed.setDefaultTheme(buzzAdFeedTheme);

✅  중요
tabIndicatorSelector 기능은 BuzzAd Android용 SDK v3.17.x부터 사용할 수 있습니다.

// tab indicator selector example
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <layer-list>
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="YOUR_SELECTED_COLOR" android:width="2dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item android:state_selected="false">
        <layer-list>
            <item android:top="-5dp" android:left="-5dp" android:right="-5dp">
                <shape android:shape="rectangle">
                    <stroke android:color="YOUR_UNSELECTED_COLOR" android:width="1dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

필터 디자인 변경하기​

피드 필터가 활성화되어 있는 경우, 필터의 UI 디자인을 변경할 수 있습니다.
이때 filterTextColorSelector, filterBackgroundColorSelector처럼 이름에 selector가 포함된 옵션은 Android 개발 정책에 따라 설정하는 리소스에 지정한 <selector>가 포함되어야 합니다. Android 개발 정책에 대한 자세한 내용은 Android 공식 문서를 참고하세요.

필터 UI 디자인을 변경하려면 다음의 예시를 참고하세요.

final BuzzAdFeedTheme buzzAdFeedTheme = 
      BuzzAdFeedTheme.getDefault()
          ...생략...
          .filterTextColorSelector(R.color.YOUR_TEXT_COLOR) // 필터의 텍스트 색상(state_selected 필수 적용)
          .filterBackgroundColorSelector(R.color.YOUR_BACKGROUND_COLOR); // 필터의 배경 색상
BuzzAdFeed.setDefaultTheme(buzzAdFeedTheme);

CTA 버튼 디자인 변경하기​

CTA 버튼의 디자인을 변경하려면 CTA 버튼 커스터마이징하기 토픽을 참고하세요.