Membuat Aplikasi CRUD SQLite dengan Content Provider dan Circular Reveal Animation di Android Part1
Sebelumnya kita sudah membuat Aplikasi CRUD dengan SQLite sederhana, kali ini kita akan membuat CRUD dengan Content Provider dan akan kita tambahkan beberapa fitur seperti circular reveal animation material color picker, butterknife, kotlin untuk menjalankan library circular revealnya. jika anda masih menggunakan android studio 2.3 ke bawah anda harus menambahkan dulu plugin kotlinnya. dan akan ditambahkan juga foto, akan kita bahas bagaimana cara memasukan foto ke database SQLite.
demo Aplikasi CRUD SQLite di Android denganContent Provider dan Circular Reveal Animation
Langkah pertama Persiapan
1.buatlah
projek baru kemudian tambahkan beberapa library berikut:
compile 'com.android.support:design:26.1.0'
compile 'com.hendraanggrian:reveallayout:0.5.3'
compile 'com.afollestad.material-dialogs:core:0.9.4.5'
compile 'com.android.support:support-v4:26.1.0'
compile 'com.turki-alkhateeb:materialcolorpicker:1.0.7'
compile 'com.hendraanggrian:reveallayout:0.5.3'
compile 'com.afollestad.material-dialogs:core:0.9.4.5'
compile 'com.android.support:support-v4:26.1.0'
compile 'com.turki-alkhateeb:materialcolorpicker:1.0.7'
compile 'com.jakewharton:butterknife:8.7.0' compile 'com.hendraanggrian:bundler:0.5.0' compile 'com.android.support.constraint:constraint-layout:1.0.2'
kapt 'com.jakewharton:butterknife-compiler:8.7.0' kapt 'com.hendraanggrian:bundler-compiler:0.5.0'
2. di
arrays.xml tambahkan kode berikut, array ini natinya akan digunakan untuk
mengisi nama gender dan pilihan untuk material dialog
<?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="array_gender_options"> <item>@string/gender_unknown</item> <item>@string/gender_male</item> <item>@string/gender_female</item> </string-array> <string-array name="upload_images"> <item>Pick from gallery</item> <item>Click from Camera</item> <item>Remove Image</item> </string-array> <string-array name="itemIds"> <item>gallery_image</item> <item>camera_image</item> <item>remove_image</item> </string-array> </resources>
3.
tambahkan beberapa warna di file colors.xml seperti berikut, warna-warna ini
natinya akan digunakan untuk warna thema nya, themanya nanti akan bisa
diganti-ganti:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="colorShop">#9a1e1b</color> <color name="colorShop2">#071f53</color> <color name="colorNavText">#ffffff</color> <color name="colorSettings">#40000000</color> <color name="colorClick">#abcdef</color> </resources>
4. tambahkan
beberapa item di file string.xml
<resources> <string name="app_name">Employee</string> <string name="gender_male">Male</string> <string name="gender_female">Female</string> <string name="gender_unknown">Unknown</string> </resources>
5.
tambahkan beberapa thema di style.xml
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> <style name="AppTheme_red" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/red_colorPrimary</item> <item name="colorPrimaryDark">@color/red_colorPrimaryDark</item> <item name="colorAccent">@color/red_colorAccent</item> </style> <style name="AppTheme_pink" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/pink_colorPrimary</item> <item name="colorPrimaryDark">@color/pink_colorPrimaryDark</item> <item name="colorAccent">@color/pink_colorAccent</item> </style> <style name="AppTheme_darpink" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/darkpink_colorPrimary</item> <item name="colorPrimaryDark">@color/darkpink_colorPrimary</item> <item name="colorAccent">@color/darkpink_colorAccent</item> </style> <style name="AppTheme_violet" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/violet_colorPrimary</item> <item name="colorPrimaryDark">@color/violet_colorPrimaryDark</item> <item name="colorAccent">@color/violet_colorAccent</item> </style> <style name="AppTheme_blue" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/blue_colorPrimary</item> <item name="colorPrimaryDark">@color/blue_colorPrimaryDark</item> <item name="colorAccent">@color/blue_colorAccent</item> </style> <style name="AppTheme_skyblue" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/skyblue_colorPrimary</item> <item name="colorPrimaryDark">@color/skyblue_colorPrimaryDark</item> <item name="colorAccent">@color/skyblue_colorAccent</item> </style> <style name="AppTheme_green" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/green_colorPrimary</item> <item name="colorPrimaryDark">@color/green_colorPrimaryDark</item> <item name="colorAccent">@color/green_colorAccent</item> </style> <style name="AppTheme_grey" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/grey_colorPrimary</item> <item name="colorPrimaryDark">@color/grey_colorPrimaryDark</item> <item name="colorAccent">@color/grey_colorAccent</item> </style> <style name="AppTheme_brown" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/brown_colorPrimary</item> <item name="colorPrimaryDark">@color/brown_colorPrimaryDark</item> <item name="colorAccent">@color/brown_colorAccent</item> </style> <color name="red_colorPrimary">#ff0000</color> <color name="red_colorPrimaryDark">#DF0000</color> <color name="red_colorAccent">#F7F72D</color> <color name="pink_colorPrimary">#e91e63</color> <color name="pink_colorPrimaryDark">#CB1755</color> <color name="pink_colorAccent">#2095f2</color> <color name="darkpink_colorPrimary">#9b26af</color> <color name="darkpink_colorPrimaryDark">#7a1ea1</color> <color name="darkpink_colorAccent">#f34235</color> <color name="violet_colorPrimary">#6639b6</color> <color name="violet_colorPrimaryDark">#502ca7</color> <color name="violet_colorAccent">#e81d62</color> <color name="blue_colorPrimary">#3F51B5</color> <color name="blue_colorPrimaryDark">#3445A2</color> <color name="blue_colorAccent">#e81d62</color> <color name="skyblue_colorPrimary">#03A9F4</color> <color name="skyblue_colorPrimaryDark">#0094D7</color> <color name="skyblue_colorAccent">#fec006</color> <color name="green_colorPrimary">#4CAF50</color> <color name="green_colorPrimaryDark">#419744</color> <color name="green_colorAccent">#785447</color> <!--<color name="colorPrimary">#3F51B5</color>--> <!--<color name="colorPrimaryDark">#3445A2</color>--> <color name="grey_colorPrimary">#9d9d9d</color> <color name="grey_colorPrimaryDark">#606060</color> <color name="grey_colorAccent">#f90</color> <color name="brown_colorPrimary">#795548</color> <color name="brown_colorPrimaryDark">#63453B</color> <color name="brown_colorAccent">#e81d62</color> <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /> </resources>
6. buatlah
folder menu kemudian buat menu_catalog.xml
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".EmployeeActivity"> <item android:id="@+id/action_search" android:icon="@drawable/ic_search" app:showAsAction="always" android:title="Search" app:actionViewClass="android.support.v7.widget.SearchView" /> <item android:id="@+id/delete_all" app:showAsAction="never" android:title="Delete All Employees" /> <item android:id="@+id/setting" app:showAsAction="never" android:title="Setting" /> </menu>
Selanjutnya
buat lagi menu_editor dan isikan dua item untuk save dan delete
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/action_save" android:icon="@drawable/ic_check" app:showAsAction="always" android:title="add" /> <item android:id="@+id/action_delete" android:icon="@drawable/ic_delete_forever" app:showAsAction="always" android:title="delete" /> </menu>
7. buat
folder xml di res dan buat file searchable.xml dengan isi sebagai berikut
<?xml version="1.0" encoding="utf-8"?> <searchable xmlns:android="http://schemas.android.com/apk/res/android" android:label="EmployeeDirectory" android:hint="Search Employees" android:searchSuggestAuthority="com.giviews.employee" android:searchSuggestIntentAction="android.intent.action.VIEW" android:searchSuggestIntentData="content://com.giviews.employee.data.EmployeeContract/employees-path" android:searchSuggestSelection="first_name LIKE ? OR last_name LIKE ?" android:searchSuggestThreshold="2" android:voiceSearchMode="showVoiceSearchButton|launchRecognizer" > </searchable>
8. di folder drawable tambahkan beberapa icon, untuk menambahkan icon pada android studio bisa dilihat pada halaman ini
cukup sudah
persiapan kita selanjutnya akan kita lanjutkan ke part2 kita akan membuat
database helper, contract dan provider