Tutorial Xamarin Android : Membuat Navigation Drawer Part 1 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Tutorial Xamarin Android : Membuat Navigation Drawer Part 1, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel animasi fragment,
Artikel multi fragment,
Artikel navigation drawer xamarin,
Artikel xamarin android fragment,
Artikel xamarin fragment, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Tutorial Xamarin Android : Membuat Navigation Drawer Part 1
link : Tutorial Xamarin Android : Membuat Navigation Drawer Part 1
Selamat pagi semua, setelah menikmati akhir pekan saya mulai melakukan eksperiment kembali, pada kesempatan kali ini adalah membuat Navigation Drawer pada Xamarin Android. Secara fungsi mirip dengan tutorial saya sebelumnya yaitu Membuat Left Drawer Menu Xamarin Android. Navigation Drawer ini memiliki desain UI yang lebih keren, oleh karena itu untuk beberapa project alangkah baiknya menggunakan Navigation Drawer ya.
Langkah 4
Buka file String.xml lalu update seperti berikut
Langkah 5
Buatlah sebuah folder pada Resources -> Namai dengan values-v21 lalu klik kanan -> add new files dengan tipe xml dengan nama Styles.xml lalu masukan kembali code seperti berikut
Langkah 6
Buatlah folder dengan nama menu lalu tambahkan 2 buah new files dengan nama action_menu.xml dan navmenu.xml
code untuk action_menu.xml (menu pada toolbar) adalah sebagai berikut
code untuk navmenu.xml(menu pada navigasi drawer)
Langkah 7
Buatlah sebuah folder dengan nama anim lalu tambahkan 2 buah file baru dengan nama Slide_in.xml dan Slide_out.xml , file ini untuk menganimasikan fragments
Slide_in.xml
Slide_out.xml
Langkah 8
Pada folder Layout buatlah sebuah layout dengan nama app_bar.axml untuk memasang action bar dengan code
Langkah 9
Membuat sebuah header pada drawer, buat dengan nama headerdrawerlayout.axml dengan code berikut
Langkah 10
Buka file Main.axml lalu ubah codenya seperti ini
Langkah 11
Buat sebuah layout untuk menampung fragment home yaitu homeLayout.axml masukan code berikut
Langkah 12
Buat kembali sebuah layout untuk menampung fragment pesan buat dengan nama writeLayout.axml laluketikan code seperti berikut
Bersambung Part 2 ya
Anda sekarang membaca artikel Tutorial Xamarin Android : Membuat Navigation Drawer Part 1 dengan alamat link https://dev-create.blogspot.com/2020/02/tutorial-xamarin-android-membuat_81.html
Judul : Tutorial Xamarin Android : Membuat Navigation Drawer Part 1
link : Tutorial Xamarin Android : Membuat Navigation Drawer Part 1
Tutorial Xamarin Android : Membuat Navigation Drawer Part 1
Selamat pagi semua, setelah menikmati akhir pekan saya mulai melakukan eksperiment kembali, pada kesempatan kali ini adalah membuat Navigation Drawer pada Xamarin Android. Secara fungsi mirip dengan tutorial saya sebelumnya yaitu Membuat Left Drawer Menu Xamarin Android. Navigation Drawer ini memiliki desain UI yang lebih keren, oleh karena itu untuk beberapa project alangkah baiknya menggunakan Navigation Drawer ya.
Ikuti langkah berikut ini
Langkah 1
Buatlah sebuah project dengan nama Tutorial Navigation Drawer
Langkah 2
Instalasi Komponen yang dibutuhkan
- App Compat v7
- Support Design Library
Anda bisa menginstalnya dengan cara klik kanan pada Folder Component -> Get More Component lalu cari App Compat v7 dan Support Design Library. Tunggulah hingga selesai.
Langkah 3
Buatlah sebuah file pada folder Values dengan nama Styles.xml lalu masukan code seperti berikut
<?xml version="1.0" encoding="UTF-8" ?> <resources> <style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="windowNoTitle">true</item> <item name="windowActionBar">false</item> <item name="colorControlNormal">#0C92CF</item> <item name="colorPrimary">#2196F3</item> <item name="colorPrimaryDark">#1976D2</item> <item name="colorAccent">#0C92CF</item> </style> <style name="Temaku" parent="MyTheme.Base"> </style> </resources>
Langkah 4
Buka file String.xml lalu update seperti berikut
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Tutorial Navigation Drawer</string> <string name="strBottomLine">From Xamarin Indonesia</string> <string name="open_drawer">Open drawer</string> <string name="close_drawer">Close drawer</string> </resources>
Langkah 5
Buatlah sebuah folder pada Resources -> Namai dengan values-v21 lalu klik kanan -> add new files dengan tipe xml dengan nama Styles.xml lalu masukan kembali code seperti berikut
<?xml version="1.0" encoding="UTF-8" ?> <resources> <style name="MyTheme" parent="MyTheme.Base"> <item name="android:windowContentTransitions">true</item> <item name="android:windowAllowEnterTransitionOverlap">true</item> <item name="android:windowAllowReturnTransitionOverlap">true</item> <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> <item name="android:windowSharedElementExitTransition">@android:transition/move</item> </style> </resources>
Langkah 6
Buatlah folder dengan nama menu lalu tambahkan 2 buah new files dengan nama action_menu.xml dan navmenu.xml
code untuk action_menu.xml (menu pada toolbar) adalah sebagai berikut
<?xml version="1.0" encoding="UTF-8" ?> <!-- menu yang tampil pada sisi kanan toolbar --> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:myapp="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/action_refresh" android:icon="@drawable/ic_action_refresh" android:title="Refresh" myapp:showAsAction="always" /> <item android:id="@+id/action_attach" android:icon="@drawable/ic_action_attach" android:title="Help" myapp:showAsAction="always"/> </menu>
code untuk navmenu.xml(menu pada navigasi drawer)
<?xml version="1.0" encoding="UTF-8" ?> <!-- menu yang tampil pada drawer navigation --> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_home_black_24dp" android:title="Home" /> <item android:id="@+id/nav_messages" android:icon="@drawable/ic_question_answer_black_24dp" android:title="Pesan" /> <item android:id="@+id/nav_friends" android:icon="@drawable/ic_supervisor_account_black_24dp" android:title="Member" /> <item android:id="@+id/nav_SearchApartment" android:icon="@drawable/ic_devices_black_24dp" android:title="Perangkat" /> </group> <item android:title="Review"> <menu> <item android:title="Post" /> <item android:title="Ratings" /> </menu> </item> </menu>
Langkah 7
Buatlah sebuah folder dengan nama anim lalu tambahkan 2 buah file baru dengan nama Slide_in.xml dan Slide_out.xml , file ini untuk menganimasikan fragments
Slide_in.xml
<?xml version="1.0" encoding="UTF-8" ?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:interpolator/bounce"> <translate android:fromYDelta="-100%" android:toYDelta="0" android:duration="1000" android:startOffset="500" /> <alpha android:fromAlpha="0.3" android:toAlpha="1.0" android:duration="1000" android:startOffset="500"/> </set>
Slide_out.xml
<?xml version="1.0" encoding="UTF-8" ?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:interpolator/anticipate"> <translate android:fromYDelta="0" android:toYDelta="100%" android:duration="650" /> <alpha android:fromAlpha="1.0" android:toAlpha="0.5" android:duration="650"/> </set>
Langkah 8
Pada folder Layout buatlah sebuah layout dengan nama app_bar.axml untuk memasang action bar dengan code
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
Langkah 9
Membuat sebuah header pada drawer, buat dengan nama headerdrawerlayout.axml dengan code berikut
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="178dp" android:orientation="vertical" android:weightSum="1" android:background="@drawable/imgbg"> <LinearLayout android:layout_width="match_parent" android:layout_height="54dp" android:orientation="vertical" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:textColor="#ffffff" android:text="@string/app_name" android:textSize="20dp" android:textStyle="bold" android:typeface="sans" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:layout_marginLeft="16dp" android:layout_marginTop="2dp" android:text="@string/strBottomLine" android:textSize="14dp" android:textStyle="normal" /> </LinearLayout> </RelativeLayout>
Langkah 10
Buka file Main.axml lalu ubah codenya seperti ini
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px" android:fitsSystemWindows="true"> <android.support.v4.widget.DrawerLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px" android:id="@+id/drawer_layout"> <LinearLayout android:id="@+id/layout_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/app_bar" /> <FrameLayout android:id="@+id/HomeFrameLayout" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/navmenu" app:headerLayout="@layout/headerdrawerlayout" /> </android.support.v4.widget.DrawerLayout> </LinearLayout>
Langkah 11
Buat sebuah layout untuk menampung fragment home yaitu homeLayout.axml masukan code berikut
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffffff" android:minWidth="25px" android:minHeight="25px"> <ImageView android:src="@drawable/xamagon" android:layout_width="match_parent" android:layout_height="200dp" android:id="@+id/imageView1" android:layout_gravity="center" android:layout_marginTop="69.5dp" /> <TextView android:id="@+id/textView1" android:text="Xamarin Indonesia" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#ff263238" android:textStyle="bold" android:gravity="center" android:textSize="@dimen/abc_action_bar_content_inset_material" /> </LinearLayout>
Langkah 12
Buat kembali sebuah layout untuk menampung fragment pesan buat dengan nama writeLayout.axml laluketikan code seperti berikut
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffff5722"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:text="Fragment Tulis Pesan" android:textSize="22dp" android:textStyle="bold" android:typeface="sans" android:gravity="center" android:layout_gravity="center" android:layout_centerInParent="true" /> </RelativeLayout>
Bersambung Part 2 ya
Demikianlah Artikel Tutorial Xamarin Android : Membuat Navigation Drawer Part 1
Sekianlah artikel Tutorial Xamarin Android : Membuat Navigation Drawer Part 1 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Tutorial Xamarin Android : Membuat Navigation Drawer Part 1 dengan alamat link https://dev-create.blogspot.com/2020/02/tutorial-xamarin-android-membuat_81.html