<!-- themes.xml -->
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Sunflower" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
</style>
</resources>
Theme.MaterialComponents.DayNight.NoActionBar
로 변경
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
<ImageView>
</ImageView>
<Toolbar>
</Toolbar>
</CollapsingToolbarLayout>
</AppBarLayout>
<ViewPager2>
</ViewPager2>
</CoordinatorLayout>
behavior
을 설정하여 다양한 움직임 및 애니메이션 상호작용을 구현할 수 있음<!-- fragment_view_pager.xml -->
<layout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
...
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
fitsSystemWindows="true"
: 상태바(Statusbar)가 툴바(Toolbar)를 가리는 경우 뷰가 차지할 수 있는 영역을 상태바 및 소프트키 영역을 제외한 영역까지 확장해주는 역할
<layout>
<CoordinatorLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
...
</CoordinatorLayout>
</layout>
app:layout_behavior="..$ScroolingViewBehavior"
: 스크롤 시 액션바를 줄어들게 함
<layout>
<CoordinatorLayout>
...
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/Theme.Sunflower_clone.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
app:toolbarId="@id/toolbar">
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</CoordinatorLayout>
</layout>
app:layout_scrollFlags
android:fitsSystemWindows="true"
: 스크롤 시 앱바가 상태바를 침범하기 때문에 필요
android:theme="@style/Theme.Sunflower_clone.AppBarOverlay"
<!-- themes.xml -->
<resource>
...
<style name="Theme.Sunflower_clone.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>
</resource>
AppBar 내 Toolbar의 글자색을 흰색으로 변경 (Dark.ActionBar)
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:layout_collapseMode="parallax">
<TextView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:textAppearance="?attr/textAppearanceHeadline5"/>
</com.google.android.material.appbar.MaterialToolbar>
app:contentInsetStart="0dp"
: 왼쪽 공백 없애기
app:layout_collapseMode="parallax"
android:textAppearance
: 텍스트 크기 및 스타일 설정
<!-- tab_icon_color_selector.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorOnPrimary" android:state_activated="true" />
<item android:color="?attr/colorPrimaryDark"/>
</selector>
<!-- colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="sunflower_black">#de000000</color>
<color name="sunflower_gray_50">#fafafa</color>
<color name="sunflower_gray_50_a600">#99fafafa</color>
<color name="sunflower_green_300">#6dc790</color>
<color name="sunflower_green_500">#49bb79</color>
<color name="sunflower_green_700">#005d2b</color>
<color name="sunflower_green_900">#1a231e</color>
<color name="sunflower_white">#deffffff</color>
<color name="sunflower_yellow_300">#f8f99f</color>
<color name="sunflower_yellow_500">#ffff63</color>
</resources>
<style name="Theme.Sunflower_clone" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">@color/sunflower_green_500</item>
<item name="colorOnPrimary">@color/sunflower_yellow_500</item>
<item name="colorPrimaryDark">@color/sunflower_green_700</item>
<item name="colorOnSurface">@color/sunflower_black</item>
<item name="colorAccent">@color/sunflower_green_700</item>
<item name="colorSurface">@color/sunflower_gray_50</item>
<item name="colorSecondary">@color/sunflower_yellow_500</item>
<item name="android:colorBackground">@color/sunflower_green_500</item>
</style>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
style="@style/Widget.MaterialComponents.TabLayout.Colored"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIconTint="@drawable/tab_icon_color_selector"
app:tabTextColor="?attr/colorPrimaryDark"/>
style="@style/Widget.MaterialComponents.TabLayout.Colored"
: TabLayout 스타일 설정 (배경색, 글자색, Indicator 색 등) → colorPrimary or colorOnPrimary 미리 설정 필요 (3번)