안드로이드 머티리얼 디자인 위젯 오픈소스 21가지


안드로이드 롤리팝이 발표되면서 머티리얼 디자인에 대한 관심과 함께 관련된 위젯이 오픈소스로 많이 공개되었다. 얼마 전까지만 해도 디자인적인 부분만을 고려해서 개발되어 었다면 이제는 성능도 함께 고려하여 성능이 우수한 위젯들이 속속 등장/업데이트되고 있는 추세다. 자신의 앱을 하위 호환성까지 유지해가며 머티리얼 디자인으로 바꿀 수 있는 유용한 위젯들을 몇 가지 소개한다.

 

1. MaterialDesignLibrary 머티리얼 관련된 위젯 모음
https://github.com/navasmdc/MaterialDesignLibrary#flat-button

 

2. MaterialEverywhere AppCompat 21 적용 예제 (블로그)
https://github.com/antoniolg/MaterialEverywhere

 

3. MaterialWidget Android 4.0 ~ 4.4에서 사용할 수 있는 머티리얼 관련 위젯 모음
https://github.com/keithellis/MaterialWidget

 

4. MaterialTabs 머티리얼 스타일의 탭바
https://github.com/neokree/MaterialTabs

 

5. material-ripple View에 Ripple 효과
https://github.com/balysv/material-ripple

 

6. RippleEffect View에 Ripple, Zoom 등 다양한 효과 (API 9+)
https://github.com/traex/RippleEffect

 

7. LDrawer Appcompat 21 툴바의 ArrowDrawable
https://github.com/ikimuhendis/LDrawer

 

8. material-design-icons 구글이 공개한 아이콘 모음
https://github.com/google/material-design-icons

 

9. AndroidMaterialDesignToolbar 머티리얼 디자인의 다양한 위젯을 적용한 예제
https://github.com/tekinarslan/AndroidMaterialDesignToolbar

 

10. MaterialEditText 머티리얼 디자인의 텍스트 입력 위젯
https://github.com/rengwuxian/MaterialEditText

 

11. material-menu Path Animation으로 툴바의 메뉴, 선택, 이전버튼
https://github.com/balysv/material-menu

 

12. material-dialogs Dialog를 상속받아 커스텀 레이아웃으로 구현한 머티리얼 디자인의 다이얼로그
https://github.com/afollestad/material-dialogs

 

13. MaterialNavigationDrawer Navigation Drawer를 쉽게 사용 할 수 있도록 Activity를 구현. 또한 Drawer 내 구현해 놓은 섹션을 쉽게 추가 가능.
https://github.com/neokree/MaterialNavigationDrawer

 

14. MaterialDialog 머티리얼 디자인의 다이얼로그로 일반 텍스트, 리스트, 입력 텍스트등 다양한 형태 지원(API 8+)
https://github.com/drakeet/MaterialDialog

 

15. materialish-progress 머티리얼 디자인의 로딩 프로그래스(API 9+)
https://github.com/pnikosis/materialish-progress

 

16. MaterialList CardView를 머티리얼 디자인 가이드라인에 맞는 다양한 형태를 지원
https://github.com/dexafree/MaterialList

 

17. android-floating-action-button 머티리얼 디자인 가이드의 화면에 떠 있는 원형의 액션 버튼으로 리스트뷰와 리사이클러뷰의 스크롤에 따른 액션 지원액션
https://github.com/futuresimple/android-floating-action-button

 

18. Android-Material-circular-button 원형의 버튼으로 컬러값의 변경시 애니메이션 지원
https://github.com/glomadrian/Android-Material-circular-button

 

19. material-drawer DrawerLayout의 컨텐츠 뷰를 머티리얼 디자인 가이드에 맞게 쉽게 사용가능.
https://github.com/HeinrichReimer/material-drawer

 

20. snackbar 머티리얼 디자인 가이드에서 소개한 스낵바를 사용 할 수 있도록 지원. 토스트와 비슷하며 지속적으로 메시지를 노출 하거나 사용자의 액션을 받을 수 있음.
https://github.com/nispok/snackbar

 

21. material-range-bar 범위를 선택 할 수 있는 SeekBar
https://github.com/oli107/material-range-bar

 

 

더 많은 UI는 아래 사이트 참고:
https://kmshack.github.io/AndroidUICollection




안드로이드 PullToRefresh 오픈소스 2가지의 구현방식


안드로이드의 새로고침 View중 가장 흔하게 쓰이는 것은 Chris Banes가 오픈소스로 공개한 PullToRefresh이다. 현재 지원이중단된 Android-PullToRefresh와 새롭게 만든 ActionBar-PullToRefresh 2가지의 종류로 구분된다.



Android-PullToRefresh의 구현 방식

ListView에 Layout을 한번더 감싸서 터치이벤트에 대한 처리를 통해 새로고침 콜백을 처리 하는 방식으로 각각의 스크롤되는 View에 대해 새로고침 View를 구현했다.

 


ActionBar-PullToRefresh의 구현방식

Layout의 터치이벤트에 대한 새로고침 상태를 콜백(delegate) 해주는 방식이다. PullToRefreshLayout을 통해 내부에 스크롤되는 뷰가 있다면 새로고침에 대한 콜백을 제공해주어 개발자는 다양한 형태 새로고침 상태에 대한 View를 만들 수 있다.

 

<uk.co.senab.actionbarpulltorefresh.extras.actionbarsherlock.PullToRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ptr_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <GridView
        android:id="@+id/ptr_gridview"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:numColumns="auto_fit"
        android:verticalSpacing="1dp"
        android:horizontalSpacing="1dp"
        android:columnWidth="100dp"
        android:stretchMode="columnWidth"
        android:gravity="fill" />


</uk.co.senab.actionbarpulltorefresh.extras.actionbarsherlock.PullToRefreshLayout>

 

Android-PullToRefresh에서 ActionBar-PullToRefresh의 코드가 상당량 줄었으며, 스크롤되는 뷰와 의존적이지 않기 때문에 확장성이 높다. 예전에 ListView를 커스텀 하는 경우 PullToRefresh코드를 일부 수정해야 했었는데, 현재 버전에서는 그럴일이 전혀 없어졌다.

 

레이아웃 내부의 스크롤되는 View를 찾아서 HeaderTransformer를 통해 새로고침에 대한 상태를 콜백 해준다. 새로고침 중, 시작, 보이기, 숨기기등에 대한 상태를 알려주며 여기에 맞게 개발자는 View상태를 구현하면 된다.

 

 

 

Android View 관련된 오픈소스 정리

Android View와 관련된 오픈소스들이 많이 공개 되고 있다. 그래서 많이 쓰이고 유용한 오픈소스를 정리 해보았다.  아직 국내에서는 오픈소스가 인색한지 모두 외국에서 만든것들이다. 나도 View관련 오픈소스를 하나준비 하겠다고 준비중인데.. 준비중이기만 하다.

 

참고로, 잘 알려지고 검증된 오픈소스라도 코드를 하나하나씩 보고 어떻게 구현되어 있는지 꼭 살펴보고 썼으면 좋겠다. 그리고 이제 개발을 시작한지 얼마 안된 분들이라면 이런 오픈소스를 사용함으로 자기 실력을 죽일 수도 있으니 한번씩 구현해보는 것도 좋을듯 하다.

 

그리고 국내 개발 커뮤니티에 보면 자기가 개발할 것에 대해 오픈소스를 찾음으로써 개발해서 삽질 하기전에 찾아서 다행이다라는 글들을 보면 씁쓸하다. 오픈소스는 좋은점도 있지만 그에 반하는 양면성을 가지고 있다는 것에 조심했으면 좋겠다.

 

 

아무튼 아래것들은 이미 유명하고 잘만들어진 오픈소스들이다.

 

 

 

 

1. ActionbarSherlock

허니컴부터 적용된 액션바를 이전버전에도 사용할 수 있게 해준다.

 

http://www.actionbarsherlock.com/
https://github.com/JakeWharton/ActionBarSherlock

 

ActionBarSherlock is an standalone library designed to facilitate the use of the action bar design pattern across all versions of Android through a single API.

The library will automatically use the native ActionBar implementation on Android 4.0 or later. For previous versions which do not include ActionBar, a custom action bar implementation based on the sources of Ice Cream Sandwich will automatically be wrapped around the layout. This allows you to easily develop an application with an action bar for every version of Android from 2.x and up.

 

 

 

2. Android-PullToRefresh

ListView, ScrollView, Viewpager, WebView 등 새로고침 기능의 View를 만들어 준다.

 

https://github.com/chrisbanes/Android-PullToRefresh

 

This project aims to provide a reusable Pull to Refresh widget for Android. It was originally based on Johan Nilsson’s library (mainly for graphics, strings and animations), but these have been replaced since.

 

 

 

 

3. StickyListHeaders

ListView의 Section Header 정보를 넣을 수 있다.

 

https://github.com/emilsjolander/StickyListHeaders

 

StickyListHeaders is an Android library that makes it easy to integrate section headers in your ListView. These section headers stick to the top like in the new People app of Android 4.0 Ice Cream Sandwich. This behavior is also found in lists with sections on iOS devices. This library can also be used for without the sticky functionality if you just want section headers.

StickyListHeaders actively supports android versions 2.3 (gingerbread) and above That said, it should be compatible with much older versions of android as well but these are not actively tested.

Here is a short gif showing the functionality you get with this library:

 

 

4. MenuDrawer
좌측 또는 우측의 슬라이드 메뉴를 구성 할 수 있다.

https://github.com/SimonVT/android-menudrawer

 

A slide-out menu implementation, which allows users to navigate between views in your app. Most commonly the menu is revealed by either dragging the edge of the screen, or clicking the ‘up’ button in the action bar.

 

 

5. SlidingMenu
MenuDrawer와 같다.

 

https://github.com/jfeinstein10/SlidingMenu

SlidingMenu is an Open Source Android library that allows developers to easily create applications with sliding menus like those made popular in the Google+, YouTube, and Facebook apps. Feel free to use it all you want in your Android apps provided that you cite this project and include the license in your app.]

 

 

6. FadingActionBar

리스트뷰 스크롤시 헤더 컨텐츠에 따라 액션바의 알파값이 변한다. 구글 음악플레이어의 아티스트정보 페이지

 

https://github.com/ManuelPeinado/FadingActionBar

 

FadingActionBar is a library which implements the cool fading action bar effect that can be seen in the new Play Music app.

 

7. DragSortListView

리스트 소팅

 

https://github.com/bauerca/drag-sort-listview

 

DragSortListView (DSLV) is an extension of the Android ListView that enables drag-and-drop reordering of list items.

 

 

8. IndexableListView

리스트뷰의 알파벳 인덱스 기능

 

https://github.com/woozzu/IndexableListView

 

 

9. ListViewAnimations

ListView 스크롤시 애니메이션(구글 플러스)

 

https://github.com/nhaarman/ListViewAnimations

 

ListViewAnimations is an Open Source Android library that allows developers to easily create ListViews with animations. Feel free to use it all you want in your Android apps provided that you cite this project and include the license in your app.

 

 

10. ViewPagerIndicator

ViewPager 인디케이터

 

https://github.com/JakeWharton/Android-ViewPagerIndicator

 

Android-ViewPagerIndicator is presented as an Android library project. A standalone JAR is not possible due to the theming capabilities offered by the indicator widgets.

 

11. PagerSlidingTabStrip

ViewPager 인디케이터

 

https://github.com/astuetz/PagerSlidingTabStrip

 

Interactive paging indicator widget, compatible with the ViewPager from the Android Support Library.

 

 

12. JazzyViewPager

ViewPager 스크롤시 애니메이션

 

https://github.com/jfeinstein10/JazzyViewPager

 

An easy to use ViewPager that adds an awesome set of custom swiping animations. Just change your ViewPagers to JazzyViewPagers and you’re good to go!

 

 

14. ViewPager3D

ViewPager 스크롤시 3D 효과

 

https://github.com/inovex/ViewPager3D

 

 

15. DirectionalViewPager

ViewPager 좌우, 아래위 스크롤

 

https://github.com/JakeWharton/Android-DirectionalViewPager

 

Implementation of the compatibility library ViewPager class that supports paging both vertically and horizontally as well as changing between the two at runtime.

 

 

 

16. VerticalSeekBarAndroid
수직 SeekBar

 

https://github.com/AndroSelva/Vertical-SeekBar-Android

 

This project is all about Customizing the normal SeekBar to Vertical Seekbar.

 

 

17. HoloCircleSeekBar
원형으로 생긴 SeekBar

 

https://github.com/JesusM/HoloCircleSeekBar

 

A Circle SeekBar inspired by Android Holo ColorPicker designed by Marie Schweiz and developed by Lars Werkman.

 

 

18. MultiChoiceAdapter
ListView, GridView에서 다중선택을 쉽게 할 수 있도록 도와준다.

 

https://github.com/ManuelPeinado/MultiChoiceAdapter

 

MultiChoiceAdapter is an implementation of ListAdapter which adds support for modal multiple choice selection as in the native Gmail app.

 

 

19. TwoWayGridView
GridView를 가로, 세로방향으로 스크롤 되도록 한다.

 

https://github.com/jess-anders/two-way-gridview

 

An Android GridView that can be configured to scroll horizontally or vertically.

 

 

20. ScrollBarPanel
스크롤바 옆에 View를 생성(Path 2.0에서 볼 수 있는 기능)

 

https://github.com/rno/Android-ScrollBarPanel

 

Android-ScrollBarPanel allows to attach a View to a scroll indicator like it’s done in Path 2.0.