[JAVA][Android] CollapsingToolbarLayout 상단바 확장될 때만 클릭할 수 있는 버튼 만들기

안녕하세요, 

 

오늘은  CollapsingToolbarLayout  상단바 확장될 때만 클릭할 수 있는 버튼을 만들어 보도록 하겠습니다. 

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private AppBarLayout appBarLayout;
    private ImageView headerImage;
    private CollapsingToolbarLayout collapsingToolbar;

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

        // 툴바 및 CollapsingToolbar 설정
        collapsingToolbar = findViewById(R.id.collapsing_toolbar);
        collapsingToolbar.setTitle("툴바");

        // Floating Action Button (FAB) 클릭 이벤트
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(v ->
                Toast.makeText(MainActivity.this, "FAB 클릭", Toast.LENGTH_SHORT).show()
        );

        headerImage = findViewById(R.id.header_image);
        appBarLayout = findViewById(R.id.appbar);

        // AppBarLayout 스크롤 리스너
        appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
            int totalScrollRange = appBarLayout.getTotalScrollRange();

            // 이미지 페이드 아웃 효과
            float alpha = 1.0f - (Math.abs(verticalOffset) / (float) totalScrollRange);
            headerImage.setAlpha(alpha);
        });
    }

}

 

 

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="300dp"
        android:fitsSystemWindows="true">

        <!-- CollapsingToolbarLayout -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="16dp"
            app:expandedTitleMarginBottom="32dp"
            app:titleEnabled="true"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleStyle"
            app:expandedTitleTextAppearance="@style/ExpandedTitleStyle">

            <!-- 배경 이미지 (패럴랙스 효과) -->
            <ImageView
                android:id="@+id/header_image"
                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"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        </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"
        android:padding="16dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="100dp">
            <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>

    <!-- Floating Action Button -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 res > values > themes 

해당 파일에서 resource 사이에 아래 코드 추가

<!-- 확장 시 타이틀 스타일 -->
<style name="ExpandedTitleStyle" parent="TextAppearance.AppCompat.Large">
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:textSize">32sp</item>
    <item name="android:textStyle">bold</item>
</style>

<!-- 축소 시 타이틀 스타일 -->
<style name="CollapsedTitleStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">#000000</item>
    <item name="android:textSize">18sp</item>
</style>

 

 

시연 영상 입니다.