안드로이드/머티리얼 디자인5 [안드로이드] 머티리얼 디자인 - Menu(DropDown) 이번엔 DropDown에 대해 알아보겠습니다~ 이번 예제에서는 두 종류의 DropDown을 사용해볼 예정입니다. 프로젝트 전체 layout 입니다. 먼저, res > menu 디렉토리에 xml 파일을 생성하고, 그 menu xml을 inflate하는 방식입니다. 그리고 다음 코드를 작성합니다. showDropDownMenu(v: View)의 파라미터 v는 해당 드랍다운 메뉴가 발생하는 뷰의 입니다. 이 예제에서는 버튼 클릭 시 드랍다운 메뉴가 버튼 아래로 나타나게 됩니다. menu를 inflate한 후에 아이콘의 margin을 설정해주는 코드를 작성했습니다.(공식 홈페이지 참고했습니다.) 각 메뉴마다 이벤트를 처리할 수 있습니다. 드랍다운 메뉴가 dismiss 됐을때의 이벤트를 처리할 수 있습니다. 버튼.. 2022. 4. 10. [안드로이드] 머티리얼 디자인 - NavigationRailView 대부분의 앱들이 가로 네비게이션바를 채택하고 사용하고 있습니다. 하지만 구글에서는 세로 네비게이션바도 제공하고 있습니다. 바로 NavigationRailView... res > menu > menu_navigation_rail.xml 을 생성합니다. 액티비티의 layout에 NavigationRailView를 추가합니다. app:menu="@menu/menu_navigation_rail" = menu_navigation_rail.xml 연결 app:itemRippleColor="@android:color/transparent" = ripple 색상을 투명색으로 설정 app:headerLayout="@layout/layout_rail_header" = NavigationRailView 상단에 커스텀 레이아.. 2022. 3. 28. [안드로이드] 머리티얼 디자인 - CollapsingToolbarLayout 이번엔 CollapsingToolbarLayout을 사용하여 아래와 같은 기능을 만들어 보겠습니다. 머티리얼 AppBar을 xml에 작성할때와 비슷합니다. CollapsingToolbarLayout을 AppBarLayout으로 감싸주는 정도의 차이가 있습니다. 속성을 하나씩 설명드리겠습니다. - app:contentScrim="@color/blue" Collapse Mode로 들어갈때 툴바의 색상을 파란색으로 설정합니다. - app:scrimAnumationDuration = "200" Collapse/Expanded 전환 애니메이션의 속도를 설정합니다. -app:collapsedTitleTextColor="color/yellow" Collapse되었을때의 툴바의 제목 색상을 설정합니다. - app:la.. 2022. 3. 24. [안드로이드] 머티리얼 디자인 - Text fields(EditText) 이번에 알아볼 머티리얼 디자인의 component는 Text fields 입니다. Text fields는 EditText와 똑같다고 보시면 됩니다. 아래의 예시를 참고해주세요. Text fields를 구현하기 위해서 Material Design 홈페이지에 접속합니다. https://material.io/components/text-fields Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io IMPLEMENTATIO.. 2022. 1. 25. [안드로이드] 머티리얼 디자인 - Appbar 안녕하세요. 안드로이드 머티리얼 디자인 중 앱바의 사용법을 알아보겠습니다. 적용 순서는 다음과 같습니다. - 앱바 화면에 표시 - 앱바에 아이콘 추가 - 앱바 아이콘 터치 이벤트 먼저, 앱바에 들어가는 메뉴들의 아이콘을 생성합니다. drawable > 마우스 우클릭 > New > Vector assets > Clip Art에서 원하는 아이콘을 생성할 수 있습니다. 아이콘 생성 후 res에 menu 폴더를 만들고 menu_app_bar.xml 파일을 생성하고 다음 코드를 작성합니다. app:showAsAction 속성의 기능은 다음과 같습니다. - app:showAsAction="always" : 항상 보이게 표시 - app:showAsAction="never" : 항상 overflow 에 표시 - app.. 2021. 12. 23. 이전 1 다음
