Pada kesempatan kali ini kita akan membuat aplikasi pengenalan Ikan sekaligus belajar Android Navigation Drawer.

1. Buat poject dengan nama Mengenal Ikan, isi domain dengan “agusharyanto.net” lalu klik next terus sampai pada pilihan activity pilih “Basic Activity” lalu klik next terus sampai finish. Tunggu sebentar maka project akan terbuat

2. Langkah pertama adalah kita persiapkan layout untuk navigation drawer. Untuk itu pada direktory layout buatlah layout baru dengan nama navheader

1	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2	android:layout_width="match_parent"

3	android:layout_height="222dp"

4	android:background="?attr/colorPrimaryDark"

5	android:orientation="vertical"

6	android:padding="16dp">

7

8	LinearLayout>

3. Kita tambahkan NavigationDrawer di layout activity_main.xml

01	xml version="1.0" encoding="utf-8"?>

02	<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	xmlns:app="http://schemas.android.com/apk/res-auto"

04	android:id="@+id/drawer"

05	android:layout_width="match_parent"

06	android:layout_height="match_parent"

07	android:fitsSystemWindows="true">

08	<android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"

09	xmlns:app="http://schemas.android.com/apk/res-auto"

10	xmlns:tools="http://schemas.android.com/tools"

11	android:layout_width="match_parent"

12	android:layout_height="match_parent"

13	tools:context="agusharyanto.net.mengenalikan.MainActivity">

14	<android.support.design.widget.AppBarLayout

15	android:layout_width="match_parent"

16	android:layout_height="wrap_content"

17	android:theme="@style/AppTheme.AppBarOverlay">

18	<android.support.v7.widget.Toolbar

19	android:id="@+id/toolbar"

20	android:layout_width="match_parent"

21	android:layout_height="?attr/actionBarSize"

22	android:background="?attr/colorPrimary"

23	app:popupTheme="@style/AppTheme.PopupOverlay" />

24	android.support.design.widget.AppBarLayout>

25	<include layout="@layout/content_main" />

26	<android.support.design.widget.FloatingActionButton

27	android:id="@+id/fab"

28	android:layout_width="wrap_content"

29	android:layout_height="wrap_content"

30	android:layout_gravity="bottom|end"

31	android:layout_margin="@dimen/fab_margin"

32	app:srcCompat="@android:drawable/ic_dialog_email" />

33	android.support.design.widget.CoordinatorLayout>

34	<android.support.design.widget.NavigationView

35	android:id="@+id/nav_view"

36	android:layout_width="wrap_content"

37	android:layout_height="match_parent"

38	android:layout_gravity="start"

39	android:fitsSystemWindows="true"

40	app:headerLayout="@layout/navheader"

41	app:menu="@menu/menu_navigation" />

42	android.support.v4.widget.DrawerLayout>

4. pada direktory res/menu buat menu baru nama menu_navigation yang nantinya akan menjadi menu di dalam navigation drawer.

01	<menu xmlns:android="http://schemas.android.com/apk/res/android">

02	<group android:checkableBehavior="single">

03

<item

04	android:icon="@android:drawable/ic_media_play"

05	android:tint="@color/button_grey"

06	android:title="Ikan Mas"

07	android:id="@+id/ic_mas"/>

08

<item

09	android:icon="@android:drawable/ic_media_play"

10	android:tint="@color/button_grey"

11	android:title="Ikan Lele"

12	android:id="@+id/ic_lele"/>

13

<item

14	android:icon="@android:drawable/ic_media_play"

15	android:tint="@color/button_grey"

16	android:title="Ikan Cupang"

17	android:id="@+id/ic_cupang"/>

18

group>

19

20

menu>

5. kalau masih ada error pada color jangan khawatir. Pada directory res/values edit color.xml lalu tambahkan warna berikut.

01	xml version="1.0" encoding="utf-8"?>

02	<resources>

03	<color name="colorPrimary">#3F51B5color>

04	<color name="colorPrimaryDark">#303F9Fcolor>

05	<color name="colorAccent">#FF4081color>

06	<color name="white">#FFFFFFcolor>

07	<color name="dark_grey">#424242color>

08	<color name="medium_grey">#9E9E9Ecolor>

09	<color name="button_grey">#757575color>

10	resources>

6. Siapkan gambar untuk button menu navigation drawernya. Klik directory res/drawable lalu pilih new “Image Asset” lalu klik button clipart untuk memilih gambar menu yang diinginkan.

7. cari gambar ikan mas di internet simpan dengan nama ikanmas.jpg, ikan lele simpan dengan ikanlele.jpg dan ikan cupang dengan ikancupang.jpg taruh semuanya pada directory res/drawable

8. Edit layout content_main.xml lalu ketikan kode berikut.

01	xml version="1.0" encoding="utf-8"?>

02	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	xmlns:app="http://schemas.android.com/apk/res-auto"

04	xmlns:tools="http://schemas.android.com/tools"

05	android:layout_width="match_parent"

06	android:layout_height="match_parent"

07	app:layout_behavior="@string/appbar_scrolling_view_behavior"

08	tools:context="agusharyanto.net.mengenalikan.MainActivity"

09	tools:showIn="@layout/activity_main">

10

11	<ImageView

12	android:id="@+id/imageView"

13	android:layout_width="300dp"

14	android:layout_height="wrap_content"

15	app:srcCompat="@drawable/ikanmas"

16	android:layout_centerHorizontal="true"

17

/>

18

19	RelativeLayout>

9. Sekarang kita edit MainActivity.java lalu ketikan kode berikut.

001	package agusharyanto.net.mengenalikan;

002

003	import android.os.Bundle;

004	import android.support.design.widget.FloatingActionButton;

005	import android.support.design.widget.NavigationView;

006	import android.support.design.widget.Snackbar;

007	import android.support.v4.view.GravityCompat;

008	import android.support.v4.widget.DrawerLayout;

009	import android.support.v7.app.ActionBar;

010	import android.support.v7.app.AppCompatActivity;

011	import android.support.v7.widget.Toolbar;

012	import android.view.Menu;

013	import android.view.MenuItem;

014	import android.view.View;

015	import android.widget.ImageView;

016	import android.widget.Toast;

017

018	public class MainActivity extends AppCompatActivity {

019	private DrawerLayout mDrawerLayout;

020	private ImageView imageView;

021

022

@Override

023	protected void onCreate(Bundle savedInstanceState) {

024	super.onCreate(savedInstanceState);

025	setContentView(R.layout.activity_main);

026	imageView = (ImageView) findViewById(R.id.imageView);

027	Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

028	setSupportActionBar(toolbar);

029

030	FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

031	fab.setOnClickListener(new View.OnClickListener() {

032

@Override

033	public void onClick(View view) {

034	Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

035	.setAction("Action", null).show();

036

}

037

});

038

039	// Create Navigation drawer and inflate layout

040	NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

041	mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);

042

043	// Adding menu icon to Toolbar

044	ActionBar supportActionBar = getSupportActionBar();

045	if (supportActionBar != null) {

046	supportActionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white);

047	supportActionBar.setDisplayHomeAsUpEnabled(true);

048

}

049

050	// Set behavior of Navigation drawer

051	navigationView.setNavigationItemSelectedListener(

052	new NavigationView.OnNavigationItemSelectedListener() {

053	// This method will trigger on item Click of navigation menu

054

@Override

055	public boolean onNavigationItemSelected(MenuItem menuItem) {

056	int id = menuItem.getItemId();

057

058	// Set item in checked state

059	menuItem.setChecked(true);

060	// TODO: handle navigation

061	// Closing drawer on item click

062	mDrawerLayout.closeDrawers();

063	String PACKAGE_NAME = getApplicationContext().getPackageName();

064	//noinspection SimplifiableIfStatement

065	if (id == R.id.ic_mas) {

066	Toast.makeText(MainActivity.this,"Ikan Mas",Toast.LENGTH_SHORT).show();

067	int idimv = getResources().getIdentifier(PACKAGE_NAME+":drawable/ikanmas", null, null);

068	imageView.setImageResource(idimv);

069	return true;

070	}else if (id == R.id.ic_lele) {

071	Toast.makeText(MainActivity.this,"Ikan Lele",Toast.LENGTH_SHORT).show();

072	int idimv = getResources().getIdentifier(PACKAGE_NAME+":drawable/ikanlele", null, null);

073	imageView.setImageResource(idimv);

074	return true;

075	}else if (id == R.id.ic_cupang) {

076	int idimv = getResources().getIdentifier(PACKAGE_NAME+":drawable/ikancupang", null, null);

077	imageView.setImageResource(idimv);

078	Toast.makeText(MainActivity.this,"Ikan Cupang",Toast.LENGTH_SHORT).show();

079	return true;

080

}

081	return true;

082

}

083

});

084

085

}

086

087

@Override

088	public boolean onCreateOptionsMenu(Menu menu) {

089	// Inflate the menu; this adds items to the action bar if it is present.

090	getMenuInflater().inflate(R.menu.menu_main, menu);

091	return true;

092

}

093

094

@Override

095	public boolean onOptionsItemSelected(MenuItem item) {

096	// Handle action bar item clicks here. The action bar will

097	// automatically handle clicks on the Home/Up button, so long

098	// as you specify a parent activity in AndroidManifest.xml.

099	int id = item.getItemId();

100

101	//noinspection SimplifiableIfStatement

102	if (id == R.id.action_settings) {

103	return true;

104	}else if (id == android.R.id.home) {

105	mDrawerLayout.openDrawer(GravityCompat.START);

106

}

107

108	return super.onOptionsItemSelected(item);

109

}

110

}

9. Jalankan programnya.

Semoga bermanfaat

Salam Hangat Developer Android

Agus Haryanto