[리뷰]IOS7처럼 상단바 색상을 변경해보자 Tinted StatusBar

 

강좌 원문 : 원문 링크

 

 

 

 


이렇게 어플의 수만큼 로딩이 되고 있습니다.

설치한 어플이 많을수록 시간이 지체됩니다 (--)


이렇게 로딩이 끝나고 나면


 



 

이렇게 설치한 목록 + 시스템 어플목록이 쫙 나옵니다.

이제 여기서 상단바 색을 바꾸고 싶은 어플리케이션을 선택하시면 됩니다.


저는 라인을 바꿔보겠습니다 (다른 어플들은 모두 바꾸었기에...)


 

 


이 화면이 뜨겠지요... 저희는 이 상단바의 색을 바꿀겁니다.

여러분 뭐 보이시나요?

그렇습니다. 토스트입니다.


어플 목록에서 [ 메뉴키 - 설정 - 토스트 제목 표시 ]에 체크를 해두시면 


 

 


이런 토스트가 뜨게됩니다.

Package name : 은 당연히 어플 패키지이름입니다.

Activity name : 은 당연히 어플 활동부분 이름입니다.


저희는 여기서 주목할 곳은 바로 Activity name입니다!

이 Activity name은 화면을 바꿀때마다 떠주기 때문에, 자신이 원하는 곳에 들어갔을때 Activity name을 잘봐둬야겠지요?

일단 켜질때의 Activity name은 activity.SplashAcitivity 이거군요

타이밍을 잘맞춰서 저처럼 이 장면을 캡처합니다.


그러면 일단 홈키를 누르고 밖으로 나와줍니다!!!

그리고 Play 스토어에 들어가서 Color Picker라고 검색하시고 어플을 다운받으세요 무료입니다.


 



여기서 메뉴키를 누르고 [ Take picture from gallery ]를 누릅니다.

그리고 사진을 아까 캡처해두었던 사진을 가져오죠.


그러면


 

 


이렇게 되겠죠?

그 다음엔 원하는 부분을 터치하면 저 사진처럼 색의 이름과 함께 HEX 값이 나옵니다.

저희는 다 필요없고 HEX 값만 있으면 됩니다.

저 HEX 값을 외우세요.

#4ecd00 이군요.


Tinted Status Bar로 돌아옵니다. 그리고 라인에 들어가서,


 

 


이렇게 아까 그 토스트가 알려준대로 들어갑니다. 저게 시작 화면이죠

 


그리고 아까 그 HEX값을 [ ff4ecd00 ]이라고 적어줍니다.

그리고 미리보기하시면 색이 보입니다. 가끔 색코드가 바뀌는것들도 있는데 신경안쓰셔도 됩니다.

이렇게 하시고 적용을 누르시면 색이 적용됩니다. 참쉽죠?


자 이제 실험도 해볼겸 라인을 실행해볼까요?


 

 


성공입니다! 상단바의 색이 변경되었습니다!!


그리고 나머지는 여러분이 이런식으로 찾아가시면 됩니다.

참쉽죠?


참고하시라고 여러 HEX값 적어놓고 글 마치겠습니다.

도움이 되셨길 바랍니다.


 



카카오톡 갈색 : ff493334

카카오톡 & 카카오스토리 시작화면 : ffffeb00

카카오스토리 헤더색 : ffee6b50

카카오톡 선물하기 : ffd63523

카카오톡 카카오페이지 : ff00b7ff

페이스북 시작화면 : ff2c4988

페이스북 헤더색(flat UI 기준) : ff3b5998

트위터 헤더색 : ff55acee

라인 시작화면 : ff4ecd00

라인 헤더색 : ff323c52

[리뷰]IOS7처럼 상단바 색상을 변경해보자 Tinted StatusBar

 

강좌 원문 : 원문 링크

 

 

 

 


이렇게 어플의 수만큼 로딩이 되고 있습니다.

설치한 어플이 많을수록 시간이 지체됩니다 (--)


이렇게 로딩이 끝나고 나면


 



 

이렇게 설치한 목록 + 시스템 어플목록이 쫙 나옵니다.

이제 여기서 상단바 색을 바꾸고 싶은 어플리케이션을 선택하시면 됩니다.


저는 라인을 바꿔보겠습니다 (다른 어플들은 모두 바꾸었기에...)


 

 


이 화면이 뜨겠지요... 저희는 이 상단바의 색을 바꿀겁니다.

여러분 뭐 보이시나요?

그렇습니다. 토스트입니다.


어플 목록에서 [ 메뉴키 - 설정 - 토스트 제목 표시 ]에 체크를 해두시면 


 

 


이런 토스트가 뜨게됩니다.

Package name : 은 당연히 어플 패키지이름입니다.

Activity name : 은 당연히 어플 활동부분 이름입니다.


저희는 여기서 주목할 곳은 바로 Activity name입니다!

이 Activity name은 화면을 바꿀때마다 떠주기 때문에, 자신이 원하는 곳에 들어갔을때 Activity name을 잘봐둬야겠지요?

일단 켜질때의 Activity name은 activity.SplashAcitivity 이거군요

타이밍을 잘맞춰서 저처럼 이 장면을 캡처합니다.


그러면 일단 홈키를 누르고 밖으로 나와줍니다!!!

그리고 Play 스토어에 들어가서 Color Picker라고 검색하시고 어플을 다운받으세요 무료입니다.


 



여기서 메뉴키를 누르고 [ Take picture from gallery ]를 누릅니다.

그리고 사진을 아까 캡처해두었던 사진을 가져오죠.


그러면


 

 


이렇게 되겠죠?

그 다음엔 원하는 부분을 터치하면 저 사진처럼 색의 이름과 함께 HEX 값이 나옵니다.

저희는 다 필요없고 HEX 값만 있으면 됩니다.

저 HEX 값을 외우세요.

#4ecd00 이군요.


Tinted Status Bar로 돌아옵니다. 그리고 라인에 들어가서,


 

 


이렇게 아까 그 토스트가 알려준대로 들어갑니다. 저게 시작 화면이죠

 


그리고 아까 그 HEX값을 [ ff4ecd00 ]이라고 적어줍니다.

그리고 미리보기하시면 색이 보입니다. 가끔 색코드가 바뀌는것들도 있는데 신경안쓰셔도 됩니다.

이렇게 하시고 적용을 누르시면 색이 적용됩니다. 참쉽죠?


자 이제 실험도 해볼겸 라인을 실행해볼까요?


 

 


성공입니다! 상단바의 색이 변경되었습니다!!


그리고 나머지는 여러분이 이런식으로 찾아가시면 됩니다.

참쉽죠?


참고하시라고 여러 HEX값 적어놓고 글 마치겠습니다.

도움이 되셨길 바랍니다.


 



카카오톡 갈색 : ff493334

카카오톡 & 카카오스토리 시작화면 : ffffeb00

카카오스토리 헤더색 : ffee6b50

카카오톡 선물하기 : ffd63523

카카오톡 카카오페이지 : ff00b7ff

페이스북 시작화면 : ff2c4988

페이스북 헤더색(flat UI 기준) : ff3b5998

트위터 헤더색 : ff55acee

라인 시작화면 : ff4ecd00

라인 헤더색 : ff323c52

  1. ㄱㄷㄱㄷ 2014.03.24 21:37

    위에 상단바 아이폰 처럼 하신거 어떻게 하셨나요?

  2. BlogIcon 지우개 2014.04.20 09:49

    푸우님 죄송한데 상단바 공유 가능하신지요..

  3. dffelk 2014.05.05 19:20

    강좌 감사합니다.
    상단바에 시계부분 어떻게 하는지 알수있을까요? 너무 괜찮네요~

+ Recent posts