Implementasi Navigation Drawer dengan Slide Content

Kebanyakan aplikasi biasanya menggunakan navigation drawer standar, yang dimana ketika navigation drawer itu dibuka, maka contentnya akan tertutup (berada dibelakang navigation drawer). Implementasi hal tersebut, banyak ditemukan di tutorial-tutorial atau contoh kasus. Namun, bagaimana jika anda ingin ketika navigation drawer tersebut dibuka, maka akan menggeser content yang ada (slide content).

Implementasi slide content ini pada awalnya dilakukan dengan menggunakan slide menu, padahal kita tidak ingin banyak mengubah codingan yang sudah ada atau tetap menggunakan drawerlayout yang sudah digunakan.

Untuk mengatasi hal tersebut dapat dilakukan dengan trik seperti berikut :

berikut contoh gambaran xml implementasi navigation drawer :

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- Framelayout to display Fragments -->

    <RelativeLayout
        android:id="@+id/mainView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >


    </RelativeLayout>

    <!-- Listview to display slider menu -->

    <RelativeLayout
        android:id="@+id/drawerView"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start" >

        <ListView
            android:id="@+id/list_slidermenu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/list_background"
            android:divider="@color/list_divider"
            android:dividerHeight="1dp" />
    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

Lalu pada file java :

public class ProfileActivity extends ActionBarActivity {
    ....
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;

    RelativeLayout drawerView;
    RelativeLayout mainView;
    ....

    @Override
    protected void onCreate(Bundle savedInstanceState) {


        ............. //
        .............//
        drawerView = (RelativeLayout) findViewById(R.id.drawerView);
        mainView = (RelativeLayout) findViewById(R.id.mainView);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.app_name, R.string.app_name) {
            public void onDrawerClosed(View view) {
                supportInvalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView) {
                supportInvalidateOptionsMenu();
            }

            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
                mainView.setTranslationX(slideOffset * drawerView.getWidth());
                mDrawerLayout.bringChildToFront(drawerView);
                mDrawerLayout.requestLayout();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

    }

}

Yang menjadi catatan adalah pada mDrawerToggle melakuan method onDrawerSlide. Silahkan mencoba

Implementasi Navigation Drawer dengan Slide Content

Bacaan terkait

Membuat dan Print Dokumen di Flutter

Mendapatkan String App Hash untuk SMS Retriever Android

flutter_stetho : Debug Flutter (Network) Menggunakan Chrome Dev Tools

Komentar (0)

Tulis komentar