Freshchat - Android SDK 테마 및 사용자 정의

1. 기존 테마 선택
2. 사용자 정의 테마 생성 및 적용
1. 텍스트 모양
2. 뷰 모양 사용자 정의
3. 드로어블 및 아이콘
4. SDK 문자열 사용자 정의
5. 알림 아이콘
6. 주제 이름 및 환영 메시지 사용자 정의

1. 기존 테마 선택

Freshchat SDK는 하위 호환성을 제공하기 위해 appcompat-v7에 의존하므로 모든 Freshchat 테마는 Theme.AppCompat.* 테마에서 상속됩니다. Freshchat SDK 구성 요소에 적용된 테마를 변경하려면 앱의 styles.xml에서 Theme.Freshchat.SelectedTheme의 부모를 Theme.Freshchat.*의 변형 중 하나로 변경하십시오.

예시:

<style name="Theme.Freshchat.SelectedTheme" parent="@style/Theme.Freshchat.Light.DarkActionBar" />

Freshchat SDK는 Theme.Freshchat.Light 및 Theme.Freshchat.Light.DarkActionBar와 함께 제공됩니다.

2. 사용자 정의 테마 생성 및 적용

Freshchat SDK의 테마는 Android 테마 시스템을 기반으로 구축되었으며, 따라서 ActionBar 배경색, ActionBar 텍스트 색상, 상태 표시줄 색상 등과 같은 표준 Android 테마 속성을 지원합니다. Android 디자인 가이드: Android Material Theme Attributes를 참조하십시오.

예를 들어, colorPrimary를 사용자 정의하려면 다음을 포함하십시오.

<item name="colorPrimary">@color/my_awesome_color</item>

다음은 Freshchat SDK 전용 사용자 정의 목록입니다:

2.1 텍스트 모양

Freshchat SDK는 SDK의 여러 요소에 대한 텍스트 모양 변경을 지원합니다. 여기에서 텍스트 모양 구현의 기본 스타일을 참조할 수 있습니다.

참고: *나열된 TextStyles는 일반적으로 텍스트 뷰에 대한 표준 Android 뷰 스타일이며, 따라서 textAppearance는 textColor, textSize 등과 같은 사용자 정의를 포함할 수 있습니다.

텍스트 모양 사용자 정의 단계

단계 1: 스타일로 사용자 정의 텍스트 모양 정의

예를 들어, MyCustomTextAppearance 스타일은 다음과 같이 정의됩니다.

<style name="MyCustomTextAppearance" parent="TextAppearance.AppCompat.Medium">
    <item name="android:textColor">@color/textColorPrimary</item>
    <item name="android:textColorHighlight">@color/textColorHighlight</item>
    <item name="android:textColorHint">@color/textColorHint</item>
    <item name="android:textColorLink">@color/textColorLink</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
</style>

단계 2: 텍스트 모양 스타일을 사전 정의된 Freshchat textAppearance 사용자 정의 속성에 매핑

예를 들어, 위에서 정의한 MyCustomTextAppearance 스타일은 freshchatChannelNameTextStyle 스타일의 텍스트 모양입니다.

<style name="MyCustomTheme" parent="Theme.Freshchat.Light.DarkActionBar">
    <item name="freshchatChannelNameTextStyle">@style/CustomChannelNameTextStyle</item>
</style>

<style name="CustomChannelNameTextStyle" parent="Widget.Freshchat.ChannelName">
    <item name="android:textAppearance">@style/MyCustomTextAppearance</item>
</style>

단계 3: 모든 Freshchat SDK 활동에 사용자 정의 테마 설정. 가장 간단한 방법은 앱의 styles.xml / themes.xml에서 Theme.Freshchat.SelectedTheme의 부모를 재정의하고 설정하는 것입니다.

<style name="Theme.Freshchat.SelectedTheme" parent="MyCustomTheme" />

대안으로 각 활동에 대해 다른 테마를 적용하려면 앱의 AndroidManifest.xml에 활동 항목을 포함하고 거기서 테마를 재정의하십시오.

예를 들어, manifest 병합에 의해 테마를 대체할 수 있도록 android:theme 및 tools:replace 속성으로 사용자 정의 테마를 포함하십시오.

Freshchat SDK 활동 목록은 이 Freshchat Android SDK Manifest를 참조하십시오.

<activity
    android:name="com.freshchat.consumer.sdk.activity.ChannelListActivity"
    android:theme="@style/MyCustomTheme"
    tools:replace="android:theme" />

<activity
    android:name="com.freshchat.consumer.sdk.activity.ConversationDetailActivity"
    android:theme="@style/MyAlternateTheme"
    tools:replace="android:theme" />

2.2 뷰 모양 사용자 정의

Freshchat SDK는 다음 뷰의 모양을 사용자 정의할 수 있도록 허용합니다. 뷰가 텍스트 컨테이너 뷰인 경우, 텍스트 모양도 스타일의 일부로 사용자 정의할 수 있습니다.

• freshchatChannelNameTextStyle -> 주제 이름 뷰 스타일
• freshchatChannelDescriptionTextStyle -> 주제 설명 뷰 스타일
• freshchatChannelLastUpdatedAtTextStyle -> 주제 마지막 업데이트 시간 뷰 스타일
• freshchatChannelUnreadCountTextStyle -> 주제 읽지 않은 수 뷰 스타일
• freshchatChannelListStyle -> 주제 목록 뷰 스타일
• freshchatChannelListItemStyle -> 목록의 각 주제 스타일
• freshchatChannelAltIconStyle -> 아이콘이 없을 때 주제 아이콘의 대체 뷰 스타일
• freshchatTeamMemberNameTextStyle -> 팀 멤버 이름 뷰 스타일
• freshchatUserMessageTextStyle -> 사용자 메시지 뷰 스타일
• freshchatTeamMemberMessageTextStyle -> 팀 멤버 메시지 뷰 스타일
• freshchatUserMessageTimeTextStyle -> 사용자 메시지 시간 뷰 스타일
• freshchatTeamMemberMessageTimeTextStyle -> 팀 멤버 메시지 시간 뷰 스타일