[Android] Create a sliding menu without using NavigationView

The sliding menu was created with DialogFragment. It is an image that Dialog Fragment covers on Activity.

Creating an animation

Animation that slides from left to right (res / anim / slide_in.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="250"
        android:fromXDelta="-100%"
        android:toXDelta="0%" />

    <alpha
        android:duration="250"
        android:fromAlpha="0.8"
        android:toAlpha="1.0" />
</set>

Animation that slides from right to left (res / anim / slide_out.xml)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="250"
        android:fromXDelta="0%"
        android:toXDelta="-100%" />

    <alpha
        android:duration="250"
        android:fromAlpha="1.0"
        android:toAlpha="0.2" />
</set>

Define the style of the created animation in themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    ....
    <style name="SlideInMenuAnimation">
        <item name="android:windowEnterAnimation">@anim/slide_in</item>
        <item name="android:windowExitAnimation">@anim/slide_out</item>
    </style>
    ....
</resources>

Creating a sliding menu

Layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/slide_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".SlideInMenuFragment">

    <LinearLayout
        android:id="@+id/menu_area"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!--Space margin at the same height as the Action Bar-->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/design_default_color_primary"
            android:minHeight="?android:attr/actionBarSize" />

        <!--Menu part-->
        <ListView
            android:id="@+id/menu_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</FrameLayout>

Dialog Fragment implementation

public class SlideInMenuFragment extends DialogFragment {

    public SlideInMenuFragment() {
        // Required empty public constructor
    }

    public static SlideInMenuFragment newInstance() {
        SlideInMenuFragment fragment = new SlideInMenuFragment();
        Bundle args = new Bundle();
        fragment.setArguments(args);
        return fragment;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
        Dialog dialog = new Dialog(getActivity());
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.fragment_slide_in_menu);

        //Full-screen Dialog, left-justified
        Window window = dialog.getWindow();
        window.getAttributes().windowAnimations = R.style.SlideInMenuAnimation;
        window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        window.setGravity(Gravity.TOP | Gravity.START);
        window.setLayout(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);

        //Set the root view of Layout
        FrameLayout rootView = dialog.findViewById(R.id.slide_menu);
        onViewCreated(rootView, savedInstanceState);
        return dialog;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        String[] menuArray = {"menu", "menu", "menu"};
        //Set the contents of the menu
        ListView menu = view.findViewById(R.id.menu_list);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getContext(), android.R.layout.simple_list_item_1, menuArray);
        menu.setAdapter(adapter);
    }
}

Call by MainActivity

public class MainActivity extends AppCompatActivity {

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

        //Set a button on the left edge of the ActionBar
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            //The ↓ icon uses the standard sort icon, but it will be nice to change it to ≡.
            actionBar.setHomeAsUpIndicator(android.R.drawable.ic_menu_sort_by_size);
        }
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        if (id == android.R.id.home) {
            //Menu display
            FragmentManager fragmentManager = getSupportFragmentManager();
            SlideInMenuFragment fragment = SlideInMenuFragment.newInstance();
            fragment.show(fragmentManager, fragment.getClass().getSimpleName());
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
    
}

result

Click the icon to the left of the action bar image.png  ↓ image.png The menu opens. Tap the transparent part of the background to close the menu.

Note

With this implementation, you can operate gestures and the menu does not pop out. I implemented this method because I had to change the menu myself, but After all it is better to use NavigationView.

Recommended Posts

[Android] Create a sliding menu without using NavigationView
Create a fortune using Ruby
Create a tomcat project using Eclipse
Create a Java project using Eclipse
Create a filtering function using acts-as-taggable-on
[Kotlin / Android] Create a custom view
Create a web environment quickly using Docker
Create a RESTful API service using Grape
Create a prefectural select bar using active_hash
Create a login function using Swift's Optional
Realize a decision table without using conditional branching
Create a Privoxy + Tor environment instantly using Docker
[Android] Inherit ImageView to create a new class
Let's create a REST API using WildFly Swarm.
[Rails] How to create a graph using lazy_high_charts
Create a Spring Boot application using IntelliJ IDEA
When performing a full outer join without using a full outer join
Create an environment for Tomcat and Postgres on a Chromebook without using developer mode
Create a portfolio app using Java and Spring Boot
Create a Java development environment using jenv on Mac
I tried using a database connection in Android development
A memorandum when trying to create a GUI using JavaFX
Find the remainder divided by 3 without using a number
Create a frameless non-rectangular window in JavaFX without a taskbar
Create a login authentication screen using the session function