Membuat Aplikasi CRUD SQLite dengan Content Provider dan Circular Reveal Animation di Android Part1
Nov 11, 2017
Add Comment
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
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Membuat Aplikasi CRUD SQLite dengan Content Provider dan Circular Reveal Animation di Android Part1"
Post a Comment