Android Development-Implementation of Drawer-style Menu Bar Imitating Netease Cloud Music in Android Application

Preface

To achieve the same effect as Netease Cloud Music's drawer menu bar in Android applications, you need to use the Navigation View control in Android, which is under the design package, so it is a Material Design design feature introduced in Android 5.0.

Material Design is a new set of interface design language invented by Google's design engineers based on traditional excellent design principles, combined with rich creativity and science and technology, including visual, sports, interactive effects and other characteristics. It is a new interface design language and a new feature of Android 5.0 launched by Google at the 2014 Google I/O conference.

Preparations before coding

Because the Navigation View control is under the design package, first open the application-level build.gradle file of your application, and find the dependencies section, add the dependency Library of the design package, such as the build.gradle example (excerpt).

dependencies {
    ...
   implementation 'com.android.support:design:28.0.0'
}

Create a new layout file activity_home_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_page_bg"
    android:orientation="vertical">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <include
            android:id="@+id/include"
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!--Remove background´╝îWill affect 4.4 System status bar-->
        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/color_page_bg"
            android:fitsSystemWindows="true" />

    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

The outer layer of Navigation View layout in the layout interface is nested by Drawer Layout layout. The purpose of this is to achieve better gesture sideslip opening or closing drawer menu bar in the parent layout. There is also the Android: backgroundattribute to be set in the Navigation View layout, which will affect the status bar style of Android 4.4 system if not set.

Create a new Active class for Home Activity. Java

public class HomeActivity extends BaseActivity {

    public static HomeActivity instance;
    // Head URL
    public static final String IC_AVATAR = "https://clouddisc.oss-cn-hongkong.aliyuncs.com/image/ic_user.png?x-oss-process=style/thumb";

    private long exitTime = 0;

    @BindView(R.id.drawer_layout)
    DrawerLayout drawerLayout;
    @BindView(R.id.nav_view)
    NavigationView navView;

    @BindView(R.id.vp_content)
    ViewPager vp_content;

    private List<Fragment> mFragment;
    @BindView(R.id.iv_title_one)
    ImageView ivTitleOne;
    @BindView(R.id.iv_title_two)
    ImageView ivTitleTwo;
    @BindView(R.id.iv_title_three)
    ImageView ivTitleThree;

    @Override
    protected int getLayoutId() {
        instance = this;
        return R.layout.activity_home_layout;
    }

    @Override
    protected void initView() {
        ButterKnife.bind(this);
        StatusBarUtil.setColorNoTranslucentForDrawerLayout(this, drawerLayout,
                this.getResources().getColor(R.color.colorTheme));
        initDrawerLayout();
        initContentFragment();
    }

    @Override
    protected void initData() {

    }

    private void initDrawerLayout() {
        navView.inflateHeaderView(R.layout.nav_header_main);
        View headerView = navView.getHeaderView(0);
        ImageView iv_avatar = headerView.findViewById(R.id.iv_avatar);
        GlideUtil.displayCircle(iv_avatar, IC_AVATAR);
        LinearLayout ll_nav_account = headerView.findViewById(R.id.ll_nav_account);
        ll_nav_account.setOnClickListener(listener);
        LinearLayout ll_nav_password = headerView.findViewById(R.id.ll_nav_password);
        ll_nav_password.setOnClickListener(listener);
        LinearLayout ll_nav_feedback = headerView.findViewById(R.id.ll_nav_feedback);
        ll_nav_feedback.setOnClickListener(listener);
        LinearLayout ll_nav_version_update = headerView.findViewById(R.id.ll_nav_version_update);
        ll_nav_version_update.setOnClickListener(listener);
        LinearLayout ll_nav_score = headerView.findViewById(R.id.ll_nav_score);
        ll_nav_score.setOnClickListener(listener);
        LinearLayout ll_nav_account_switch = headerView.findViewById(R.id.ll_nav_account_switch);
        ll_nav_account_switch.setOnClickListener(listener);

        LinearLayout ll_nav_logout = headerView.findViewById(R.id.ll_nav_logout);
        ll_nav_logout.setOnClickListener(this::onClick);

    }

    private PerfectClickListener listener = new PerfectClickListener() {

        @Override
        protected void onNoDoubleClick(final View v) {
            drawerLayout.closeDrawer(GravityCompat.START);
            drawerLayout.postDelayed(() -> {
                switch (v.getId()) {
                    case R.id.ll_nav_account:
                        ToastUtil.showToast("Personal Center");
                        Intent accountIntent = new Intent(HomeActivity.this, TestActivity.class);
                        accountIntent.putExtra("text", "Personal Center");
                        startActivity(accountIntent);
                        break;
                    case R.id.ll_nav_password:
                        ToastUtil.showToast("Password Settings");
                        Intent passwordIntent = new Intent(HomeActivity.this, TestActivity.class);
                        passwordIntent.putExtra("text", "Password Settings");
                        startActivity(passwordIntent);
                        break;
                    case R.id.ll_nav_feedback:
                        ToastUtil.showToast("Feedback");
                        Intent feedbackIntent = new Intent(HomeActivity.this, TestActivity.class);
                        feedbackIntent.putExtra("text", "Feedback");
                        startActivity(feedbackIntent);
                        break;
                    case R.id.ll_nav_version_update:
                        ToastUtil.showToast("Version Update");
                        Intent updateIntent = new Intent(HomeActivity.this, TestActivity.class);
                        updateIntent.putExtra("text", "Version Update");
                        startActivity(updateIntent);
                        break;
                    case R.id.ll_nav_score:
                        ToastUtil.showToast("Give a score.");
                        Intent scoreIntent = new Intent(HomeActivity.this, TestActivity.class);
                        scoreIntent.putExtra("text", "Give a score.");
                        startActivity(scoreIntent);
                        break;
                    case R.id.ll_nav_account_switch:
                        ToastUtil.showToast("Switching Accounts");
                        Intent switchIntent = new Intent(HomeActivity.this, TestActivity.class);
                        switchIntent.putExtra("text", "Switching Accounts");
                        startActivity(switchIntent);
                        break;
                    default:
                        break;
                }
            }, 260);
        }
    };

    private void initContentFragment() {

        mFragment = new ArrayList<>();
        mFragment.add(new MusicFragment());
        mFragment.add(new MovieFragment());
        mFragment.add(new MineFragment());
        //Maximum number of preloads
        vp_content.setOffscreenPageLimit(2);
        //Setting up the adapter
        vp_content.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            //Selected item
            @Override
            public Fragment getItem(int position) {
                return mFragment.get(position);
            }

            //Number of item s returned
            @Override
            public int getCount() {
                return mFragment.size();
            }
        });
        // Set the default to load the second Fragment
        setCurrentItem(1);
        // ViewPager Slide Monitor
        vp_content.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int position) {
                setCurrentItem(position);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

    }

    @OnClick({R.id.ll_title_menu, R.id.iv_title_one, R.id.iv_title_two, R.id.iv_title_three})
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ll_title_menu:
                // Open drawer menu
                drawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.iv_title_one:
                // The goal is to reduce cpu consumption.
                if (vp_content.getCurrentItem() != 0) {
                    setCurrentItem(0);
                }
                break;
            case R.id.iv_title_two:
                if (vp_content.getCurrentItem() != 1) {
                    setCurrentItem(1);
                }
                break;
            case R.id.iv_title_three:
                if (vp_content.getCurrentItem() != 2) {
                    setCurrentItem(2);
                }
                break;
            case R.id.ll_nav_logout:
                // Log out
                finish();
                break;
            default:
                break;
        }
    }

    /**
     * Switch pages
     *
     * @param position Classification Corner
     */
    private void setCurrentItem(int position) {
        boolean isOne = false;
        boolean isTwo = false;
        boolean isThree = false;
        switch (position) {
            case 0:
                isOne = true;
                break;
            case 1:
                isTwo = true;
                break;
            case 2:
                isThree = true;
                break;
            default:
                isTwo = true;
                break;
        }
        vp_content.setCurrentItem(position);
        ivTitleOne.setSelected(isOne);
        ivTitleTwo.setSelected(isTwo);
        ivTitleThree.setSelected(isThree);
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN) {

            if ((System.currentTimeMillis() - exitTime) > 2000) {
                ToastUtil.showToast("Press once more to exit the application");
                exitTime = System.currentTimeMillis();
            } else {
//                    Intent intent = new Intent(Intent.ACTION_MAIN);
//                    intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
//                    intent.addCategory(Intent.CATEGORY_HOME);
//                    startActivity(intent);
                finish();
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

}

This logic code mainly implements three Fragment interfaces: opening and closing drawer menu bar, clicking event of item item in drawer menu bar and loading and switching in host Activity. Specific code logic implementation can see the annotations in the code. A nav_header_main.xml layout interface is also needed to load the drawer menu bar in the host Activity. The layout interface is as follows.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_page_bg"
    android:orientation="vertical">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:id="@+id/ll_header_bg"
                android:layout_width="match_parent"
                android:layout_height="173dp"
                android:background="@drawable/homepage_header"
                android:gravity="bottom"
                android:orientation="vertical"
                android:theme="@style/ThemeOverlay.AppCompat.Dark">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#4000"
                    android:gravity="bottom"
                    android:orientation="vertical"
                    android:paddingLeft="16dp"
                    android:paddingTop="16dp"
                    android:paddingRight="16dp"
                    android:paddingBottom="16dp">

                    <ImageView
                        android:id="@+id/iv_avatar"
                        android:layout_width="60dp"
                        android:layout_height="60dp"
                        android:scaleType="centerCrop" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:paddingTop="16dp">

                        <TextView
                            android:id="@+id/tv_username"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="_Rain knocks on the window on the other side_"
                            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                            android:textColor="@color/colorWhite"
                            android:textSize="17sp" />

                        <TextView
                            android:id="@+id/tv_level"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginLeft="6dp"
                            android:background="@drawable/shape_bg_level"
                            android:gravity="center"
                            android:paddingLeft="6dp"
                            android:paddingTop="1dp"
                            android:paddingRight="6dp"
                            android:paddingBottom="1dp"
                            android:text="Lv.100"
                            android:textColor="@color/colorWhite"
                            android:textSize="10sp"
                            android:textStyle="italic|bold" />

                    </LinearLayout>

                </LinearLayout>

            </RelativeLayout>

            <LinearLayout
                android:id="@+id/ll_nav_account"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_marginTop="8dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="16dp"
                android:paddingRight="16dp">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/user_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:drawableEnd="@drawable/arrow_right"
                    android:text="Personal Center"
                    android:textColor="@color/colorContent"
                    android:textSize="15sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_nav_password"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="16dp"
                android:paddingRight="16dp">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/password_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:drawableEnd="@drawable/arrow_right"
                    android:text="Password Settings"
                    android:textColor="@color/colorContent"
                    android:textSize="15sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_nav_feedback"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="16dp"
                android:paddingRight="16dp">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/feedback_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:drawableEnd="@drawable/arrow_right"
                    android:text="Feedback"
                    android:textColor="@color/colorContent"
                    android:textSize="15sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_nav_version_update"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="16dp"
                android:paddingRight="16dp">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/update_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:drawableEnd="@drawable/arrow_right"
                    android:text="Version Update"
                    android:textColor="@color/colorContent"
                    android:textSize="15sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_nav_score"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="16dp"
                android:paddingRight="16dp">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/score_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:drawableEnd="@drawable/arrow_right"
                    android:text="Give a score."
                    android:textColor="@color/colorContent"
                    android:textSize="15sp" />

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0.3dp"
                android:background="@color/colorNavLine" />

            <LinearLayout
                android:id="@+id/ll_nav_account_switch"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="16dp"
                android:paddingRight="16dp">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/account_switch_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:drawableEnd="@drawable/arrow_right"
                    android:text="Switching Accounts"
                    android:textColor="@color/colorContent"
                    android:textSize="15sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_nav_logout"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingLeft="16dp"
                android:paddingRight="16dp">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:src="@drawable/logout_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:drawableEnd="@drawable/arrow_right"
                    android:text="Log out"
                    android:textColor="@color/colorContent"
                    android:textSize="15sp" />

            </LinearLayout>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

</LinearLayout>

The results of the interface operation are as follows:

apk Installation Pack Download Experience Address:

You can scan the following two-dimensional code for download and installation, or click on the following link https://fir.im/dmenu Download and install the experience.

---- The end ----

Coding is not easy. If you think this blog is good, you can appreciate a cup of coffee.~~

Demo Program Source Download Address 1 (GitHub)
Demo Program Source Download Address II (Code Cloud)

Tags: Android DrawerLayout xml Fragment

Posted on Mon, 29 Jul 2019 19:30:40 -0700 by ejwf