Android Side Menu

Yang saya maksud dengan Android Side Menu sebenarnya sama saja seperti NavigationDrawer

navigation-drawer-3

tapi tadi saya searching digoogle nemu yang rada unik menu navigasinya

screenshot_2016-09-09-23-16-48_id-co-passionit-androidsidemenuyalantis

untuk membuat NavigationDrawer kaya gambar diatas caranya gampang kok

  1. download library lewat gradle
    allprojects {
        repositories {
            jcenter()
            maven {
                url "https://jitpack.io"
            }
        }
    }
    compile 'com.yalantis:sidemenu:1.0'
    compile ('com.github.ozodrukh:CircularReveal:2.0.1') {
        transitive = true;
    }
  2. untuk layoutnya menggunakan DrawerLayout dan RevealFrameLayout
    <android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <io.codetail.widget.RevealFrameLayout
            android:id="@+id/container_frame"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <LinearLayout
                android:id="@+id/content_overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"/>
    
            <LinearLayout
                android:id="@+id/content_frame"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"/>
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:minHeight="?attr/actionBarSize"
                android:background="?attr/colorPrimary"/>
    
        </io.codetail.widget.RevealFrameLayout>
    
        <ScrollView
            android:id="@+id/scrollView"
            android:scrollbarThumbVertical="@android:color/transparent"
            android:layout_width="@dimen/sliding_menu_width"
            android:layout_height="match_parent"
            android:layout_gravity="start|bottom">
    
            <LinearLayout
                android:id="@+id/left_drawer"
                android:orientation="vertical"
                android:layout_width="@dimen/sliding_menu_width"
                android:layout_height="wrap_content"
                android:divider="@android:color/transparent"
                android:background="@android:color/transparent">
            </LinearLayout>
        </ScrollView>
    </android.support.v4.widget.DrawerLayout>
  3. pada class MainActivity membuat method list menu
    private void createMenuList() {
        SlideMenuItem menuItem0 = new SlideMenuItem(ContentFragment.CLOSE, R.drawable.icn_close);
        list.add(menuItem0);
        SlideMenuItem menuItem = new SlideMenuItem(ContentFragment.BUILDING, R.drawable.icn_1);
        list.add(menuItem);
        SlideMenuItem menuItem2 = new SlideMenuItem(ContentFragment.BOOK, R.drawable.icn_2);
        list.add(menuItem2);
        SlideMenuItem menuItem3 = new SlideMenuItem(ContentFragment.PAINT, R.drawable.icn_3);
        list.add(menuItem3);
        SlideMenuItem menuItem4 = new SlideMenuItem(ContentFragment.CASE, R.drawable.icn_4);
        list.add(menuItem4);
        SlideMenuItem menuItem5 = new SlideMenuItem(ContentFragment.SHOP, R.drawable.icn_5);
        list.add(menuItem5);
        SlideMenuItem menuItem6 = new SlideMenuItem(ContentFragment.PARTY, R.drawable.icn_6);
        list.add(menuItem6);
        SlideMenuItem menuItem7 = new SlideMenuItem(ContentFragment.MOVIE, R.drawable.icn_7);
        list.add(menuItem7);
    }
  4. karena yang namanya NavigationDrawer menggunakan Fragment, maka class Fragment pun harus dipanggil
    contentFragment = ContentFragment.newInstance(R.drawable.content_music);
    getSupportFragmentManager().beginTransaction()
            .replace(R.id.content_frame, contentFragment)
            .commit();
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawerLayout.setScrimColor(Color.TRANSPARENT);
    linearLayout = (LinearLayout) findViewById(R.id.left_drawer);
    linearLayout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            drawerLayout.closeDrawers();
        }
    });
  5. Meletakan menu navigasi pada action bar dan membuat navigasi agar bisa nongol dan sembunyi atau buka tutup
    private void setActionBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        drawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                drawerLayout,         /* DrawerLayout object */
                toolbar,  /* nav drawer icon to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description */
                R.string.drawer_close  /* "close drawer" description */
        ) {
    
            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                linearLayout.removeAllViews();
                linearLayout.invalidate();
            }
    
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                if (slideOffset > 0.6 && linearLayout.getChildCount() == 0)
                    viewAnimator.showMenuContent();
            }
    
            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }
        };
        drawerLayout.setDrawerListener(drawerToggle);
    }
    
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        drawerToggle.syncState();
    }
    
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        drawerToggle.onConfigurationChanged(newConfig);
    }
    
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (drawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        switch (item.getItemId()) {
            case R.id.action_settings:
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
    
    private ScreenShotable replaceFragment(ScreenShotable screenShotable, int topPosition) {
        this.res = this.res == R.drawable.content_music ? R.drawable.content_films : R.drawable.content_music;
        View view = findViewById(R.id.content_frame);
        int finalRadius = Math.max(view.getWidth(), view.getHeight());
        /*SupportAnimator animator = ViewAnimationUtils.createCircularReveal(view, 0, topPosition, 0, finalRadius);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.setDuration(ViewAnimator.CIRCULAR_REVEAL_ANIMATION_DURATION);
    
        findViewById(R.id.content_overlay).setBackgroundDrawable(new BitmapDrawable(getResources(), screenShotable.getBitmap()));
        animator.start();*/
        ContentFragment contentFragment = ContentFragment.newInstance(this.res);
        getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, contentFragment).commit();
        return contentFragment;
    }
    
    @Override
    public ScreenShotable onSwitch(Resourceble slideMenuItem, ScreenShotable screenShotable, int position) {
        switch (slideMenuItem.getName()) {
            case ContentFragment.CLOSE:
                return screenShotable;
            default:
                return replaceFragment(screenShotable, position);
        }
    }
    
    @Override
    public void disableHomeButton() {
        getSupportActionBar().setHomeButtonEnabled(false);
    
    }
    
    @Override
    public void enableHomeButton() {
        getSupportActionBar().setHomeButtonEnabled(true);
        drawerLayout.closeDrawers();
    
    }
    
    @Override
    public void addViewToContainer(View view) {
        linearLayout.addView(view);
    }

    Kalo ngodingnya bener mah pasti g akan error, kalo masih error juga silahkan download disini projeknya.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s