Sheet menu

Hello.
This will be tutorial about implementing very fancy menu view. It looks nice and is easy to implement.

First, add this library to dependencies:

build.gradle(Module:app)
compile 'com.github.whalemare:sheetmenu:1.3.3'

Next, add maven dependency into project module, within ‘allprojects repositories’:

build.gradle(Project:NameOfProject)
allprojects {
    repositories {
        google()
        jcenter()
        maven {url 'https://jitpack.io'}
    }
}

Next, create menu. Inside of ‘res’ folder, right click, create a new directory, and name it menu. Inside of new created menu folder, make a new file by right clicking on a menu folder-> New menu resource file and name it main_menu.
Inside of it, paste this code:

main_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_atom"
        android:icon="@drawable/nameOfYourIcon"
        android:title="Atom"/>

    <item
        android:id="@+id/action_disc"
        android:icon="@drawable/nameOfYourIcon2"
        android:title="Disco"/>

</menu>

Now, create a layout look:

activity_main.xml
<?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"
    tools:context="com.notifications.youtube.azem.virtuoozatutorials.MainActivity">


    <Button
        android:id="@+id/btn_show_menu"
        android:layout_centerInParent="true"
        android:text="Show menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

And finally, inside of MainActivity, paste this code:

MainActivity.java
public class MainActivity extends AppCompatActivity {



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button= (Button)findViewById(R.id.btn_show_menu);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showMenu();
            }

        });
    }

    private void showMenu() {
        SheetMenu.with(this)
                .setTitle("Select option:").
                setMenu(R.menu.main_menu)
                .setClick(new MenuItem.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                        if (menuItem.getItemId() == R.id.action_atom)
                            Toast.makeText(MainActivity.this, "Atom action", Toast.LENGTH_LONG).show();
                        else
                            Toast.makeText(MainActivity.this, "Disco action", Toast.LENGTH_LONG).show();

                        return false;
                    }
                }).show();
    }
}

And that is it. This will create this fancy menu layout like you can see on youtube for example 😀

Share with your friends
Tagged with: