[안드로이드] 이미지에서 색상 추출(Palette), toolbar 커스텀 (트위터 따라하기)

트위터 하다가 갑자기 어? 이거 어케 만든 거지? 궁금해져서 만들어보게 되었다.

근데....!!!!!!
생각처럼 잘 되진 않는다....

 

일단 지금 만든 거라도 올려본다.

---

내가 만들고 싶은 최종본 : 

1, 헤더 이미지에서 추출한 색으로 상태바와 툴바 배경색 변경

2, 툴바와 탭 레이아웃 고정(pin)

3, 탭 레이아웃에서 글자 수에 따라 indicator 크기 변경

4, 닉네임까지 스크롤 되면 toolbar에 타이틀 보이기

5, 스크롤 할 때마다 인장 작아지고 커지는 애니메이션

 

내가 만든 것 : 

3번까진 했다.

 

---

1, 헤더 이미지에서 추출한 색으로 상태바와 툴바 배경색 설정하기

 

1-1, 라이브러리 추가

implementation 'androidx.palette:palette-ktx:1.0.0' // 색상 추출 라이브러리

 

1-2, 코드 짜기

// collapsingToolbarLayout 색을 배경 이미지에서 추출한 색으로
val bitmap = BitmapFactory.decodeResource(resources, R.drawable.img_header)
Palette.from(bitmap).generate { palette ->
	val vibrantColor = palette!!.getVibrantColor(Color.BLACK)   // 기본 컬러는 검정색
	collapsingToolbarLayout.setContentScrimColor(vibrantCoor)
    window.statusBarColor = vibrantColor        // @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
}

---

참고

https://developer.android.com/training/material/palette-colors?hl=ko 

Palette API로 색상 선택  |  Android 개발자  |  Android Developers

---

2, 툴바와 탭 레이아웃 고정(pin)하기

 

2-1, 탭 레이아웃과 연결될 뷰페이저2 라이브러리 추가

implementation "androidx.viewpager2:viewpager2:1.0.0" // viewpager2

 

2-1, xml 파일 만들기

아래의 구조로 레이아웃을 만든다.

<!--FrameLayout 속성-->
<androidx.coordinatorlayout.widget.CoordinatorLayout >
 
    <!--LinearLayout(VERTICAL) 속성-->
    <com.google.android.material.appbar.AppBarLayout>

        <!--FrameLayout 속성-->
        <!--스크롤시 접히거나 나타날 부분 넣는 layout-->
        <com.google.android.material.appbar.CollapsingToolbarLayout>

            <!--헤더(배경)-->
            <ImageView />

            <!--툴바-->
            <androidx.appcompat.widget.Toolbar />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <!--탭 레이아웃-->
        <com.google.android.material.tabs.TabLayout />

    </com.google.android.material.appbar.AppBarLayout>

    <!--스크롤할 뷰 (NestedScrollView, RecyclerView 등)-->
    <!--app:layout_behavior="@string/appbar_scrolling_view_behavior" 추가!!-->
    <androidx.viewpager2.widget.ViewPager2 />

    <!--글쓰기 버튼-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

---

참고

아래 블로그가 정말 큰 도움이 되었다!

https://m.blog.naver.com/pistolcaffe/221017061017

CollapsingToolbarLayout 분석

https://black-jin0427.tistory.com/16

[Android, Collapsing Tool bar] Collapsing Tool bar 에서의 status bar

http://blog.iamsuleiman.com/toolbar-animation-with-android-design-support-library/

Toolbar Animation with Android Design Support Library

https://kangmin1012.tistory.com/33

[Android/Kotlin] CoordinatorLayout 사용하기 (1) - 기초

http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html?m=1 

Learn Programming Together: Android Tip: Custom CoordinatorLayout Behavior

https://velog.io/@bonimddal2/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-CollapsingToolbarLayout%EC%9C%BC%EB%A1%9C-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EC%83%81%EB%8B%A8%EB%B0%94-%EB%A7%8C%EB%93%A4%EA%B8%B0

[안드로이드] CollapsingToolbarLayout으로 움직이는 상단바 만들기

https://jhshjs.tistory.com/24

[안드로이드 Toolbar] CollapsingToolbarLayout 스크롤시 툴바 가리기 속성

---

3, 탭 레이아웃에서 글자 수에 따라 indicator 크기 변경하기

 

3-1. drawable에 custom_tab_indicator.xml 생성

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--두께(높이)-->
    <size android:height="4dp"/>
    <!-- 모서리 둥글게-->
    <corners android:radius="50dp"/>
</shape>

 

3-2, tablayoyt에 아래 속성 추가

 

글자 수에 따라 indicator 길이 변경하기

app:tabIndicatorFullWidth="false"

indicator 모양 둥글고 두껍게 하기(커스텀)
app:tabIndicator="@drawable/custom_tab_indicator"

indicator 색 파란 색으로 변경하기
app:tabIndicatorColor="@color/blue"

---

참고

https://itnext.io/android-tablayout-and-tabitem-268ac06ba966

All-in-One — Android TabLayout and TabItem

---

MainActivity는 딱히 중요하지 않지만 그래도 올려본다.