About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

Belajar Membuat Aplikasi Android mengenal Ikan dengan Navigation Drawer

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="222dp"
    android:background="?attr/colorPrimaryDark"
    android:orientation="vertical"
    android:padding="16dp">

</LinearLayout>

3. Kita tambahkan NavigationDrawer di layout activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="agusharyanto.net.mengenalikan.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navheader"
        app:menu="@menu/menu_navigation" />
</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.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:icon="@android:drawable/ic_media_play"
            android:tint="@color/button_grey"
            android:title="Ikan Mas"
            android:id="@+id/ic_mas"/>
        <item
            android:icon="@android:drawable/ic_media_play"
            android:tint="@color/button_grey"
            android:title="Ikan Lele"
            android:id="@+id/ic_lele"/>
        <item
            android:icon="@android:drawable/ic_media_play"
            android:tint="@color/button_grey"
            android:title="Ikan Cupang"
            android:id="@+id/ic_cupang"/>
    </group>

</menu>

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

<?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="white">#FFFFFF</color>
    <color name="dark_grey">#424242</color>
    <color name="medium_grey">#9E9E9E</color>
    <color name="button_grey">#757575</color>
</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.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="agusharyanto.net.mengenalikan.MainActivity"
    tools:showIn="@layout/activity_main">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ikanmas"
        android:layout_centerHorizontal="true"
         />

</RelativeLayout>

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

package agusharyanto.net.mengenalikan;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.imageView);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        // Create Navigation drawer and inflate layout
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);

// Adding menu icon to Toolbar
        ActionBar supportActionBar = getSupportActionBar();
        if (supportActionBar != null) {
            supportActionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white);
            supportActionBar.setDisplayHomeAsUpEnabled(true);
        }

// Set behavior of Navigation drawer
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    // This method will trigger on item Click of navigation menu
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        int id = menuItem.getItemId();

                        // Set item in checked state
                        menuItem.setChecked(true);
                        // TODO: handle navigation
                        // Closing drawer on item click
                        mDrawerLayout.closeDrawers();
                        String PACKAGE_NAME = getApplicationContext().getPackageName();
                        //noinspection SimplifiableIfStatement
                        if (id == R.id.ic_mas) {
                            Toast.makeText(MainActivity.this,"Ikan Mas",Toast.LENGTH_SHORT).show();
                            int idimv = getResources().getIdentifier(PACKAGE_NAME+":drawable/ikanmas", null, null);
                            imageView.setImageResource(idimv);
                            return true;
                        }else if (id == R.id.ic_lele) {
                            Toast.makeText(MainActivity.this,"Ikan Lele",Toast.LENGTH_SHORT).show();
                            int idimv = getResources().getIdentifier(PACKAGE_NAME+":drawable/ikanlele", null, null);
                            imageView.setImageResource(idimv);
                            return true;
                        }else if (id == R.id.ic_cupang) {
                            int idimv = getResources().getIdentifier(PACKAGE_NAME+":drawable/ikancupang", null, null);
                            imageView.setImageResource(idimv);
                            Toast.makeText(MainActivity.this,"Ikan Cupang",Toast.LENGTH_SHORT).show();
                            return true;
                        }
                        return true;
                    }
                });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }else if (id == android.R.id.home) {
            mDrawerLayout.openDrawer(GravityCompat.START);
        }

        return super.onOptionsItemSelected(item);
    }
}

9. Jalankan programnya.

Semoga bermanfaat

Salam Hangat Developer Android

Agus Haryanto

Share

1 comment to Belajar Membuat Aplikasi Android mengenal Ikan dengan Navigation Drawer

  • Try

    Halo mas, sy mau tanya.. Klo mau bkin aplikasi android studio supaya aplikasinya online kayak Tokopedia atau gojek itu gimana? Soalnya yg di bikin offline terus.. Mksih

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free