[JAVA][Android] CollapsingToolbarLayout 상단바 확장/축소에 따라 상태바 색상 변경하기

안녕하세요, 

 

오늘은  CollapsingToolbarLayout 상단바 확장/축소에 따라 상태바 색상 변경을 해보도록 하겠습니다. 

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private AppBarLayout appBarLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // AppBarLayout 상태 감지
        appBarLayout = findViewById(R.id.appbar);
        appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
            int totalScrollRange = appBarLayout.getTotalScrollRange();
            if (Math.abs(verticalOffset) >= totalScrollRange) {
                // Toolbar가 완전히 축소되었을 때 → 검정색 상태바
                changeStatusBarColor(Color.BLACK);
            } else {
                // 확장 상태 → 빨간 상태바
                changeStatusBarColor(Color.RED);
            }
        });
    }

    // 상태바 색상 변경 함수
    private void changeStatusBarColor(int color) {
        Window window = getWindow();
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.setStatusBarColor(color);
    }
}

 

 

activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <!-- AppBarLayout -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <!-- CollapsingToolbarLayout -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 배경 이미지 -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/img"
                app:layout_collapseMode="parallax"/>

            <!-- Toolbar -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 스크롤 가능한 내용 -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="안녕하세요"
                android:textSize="24sp"
                android:textStyle="bold"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:text="테스트1"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:text="테스트2"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:text="테스트3"/>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 

시연 영상 입니다.