Implementing the pull-down menu NavigationDrawer using DrawerLayout using arbitrary markup

The other day for one of the applications developed by our team, the customer made an amendment to the design, which required to develop a sliding menu with a rather non-standard arrangement of the view components. Although at the moment there are different types of implementation of this task, they either turned out to be too voluminous or did not provide the implementation of the necessary functionality.

Having considered this problem for some time, I decided to implement this menu based on the standard DrawerLayout component, which was based on 2 root elements - RelativeLayout for the main window markup, and also another RelativeLayout as a container for the side menu. I would like to add that exactly 2 root elements should be inside DrawerLayout, more information about this container can be found in the official Google documentation.

Implementation

Xml file markup for the main activity

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!--    --> </RelativeLayout> <!-- ,    --> <RelativeLayout android:id="@+id/left_drawer" android:layout_width="300dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="none" <!--    ,  ,       ,        --> android:clickable="true" android:background="#FFFFFF" xmlns:android="http://schemas.android.com/apk/res/android" /> </android.support.v4.widget.DrawerLayout> 

The markup of the main activity is ready, now let's start writing the class that will execute the main logic. Create a class that inherits RelativeLayout. This class implements all the logic of our menu, including setting the markup and defines all the view.

 public class NavigationLayout extends RelativeLayout { Button ok; public NavigationLayout(Context context,RelativeLayout parent) { super(context); initView(context,parent); } public void initView(final Context context,RelativeLayout parent) { //   xml   View view= LayoutInflater.from(context).inflate(R.layout.view_drawer_layout,parent,true); ok=(Button)view.findViewById(R.id.ok); ok.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(context,"Ok",Toast.LENGTH_SHORT).show(); } }); } } 

You should pass context and parent to the constructor.
')
parent - RelativeLayout, which was declared in the markup for the main activity ()

Further, the function initView (final Context context, RelativeLayout parent) - inflates the main markup, which will be placed in the pull-out menu, as well as define all view components and their listeners here.

In R.layout.view_drawer_layout, for example, I declared just one button.

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="300dp" android:background="@color/screen_background" android:layout_height="match_parent"> <Button android:layout_width="110dp" android:layout_height="55dp" android:textAllCaps="false" android:id="@+id/ok" android:text="Next" android:textStyle="bold" android:textSize="25sp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:textColor="@color/buttonTextColor" /> </RelativeLayout> 

At this stage, the main part is ready, it remains only to add our NavigationLayout using addView to the main parent container.

Create a class inheriting from AppCompactActivity

 public class ParentNavigationActivity extends AppCompatActivity { NavigationLayout navigationLayout; RelativeLayout left_drawer; @Override public void setContentView(@LayoutRes int layoutResID) { super.setContentView(layoutResID); setupMenu(); } public void setupMenu() { left_drawer=(RelativeLayout) findViewById(R.id.left_drawer); navigationLayout=new NavigationLayout(getApplicationContext(),left_drawer); left_drawer.addView(navigationLayout); } } 

This class overrides the standard setContentView method, adding to it a call to a function that 'initializes' the pull-down menu. Also here we create an object of the class previously written by us NavigationLayout and add it using left_drawer.addView (navigationLayout) to the parent, which is the container of the side menu.

The only thing left to do is to make everything work, you just need to create a screen (activity) and inherit the ParentNavigationActivity that we have just created.

 public class MainActivity extends ParentNavigationActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test); } } 

Thus, when ParentNavigationActivity is inherited and the setContentView function is called, a ready menu appears in our activity.



I would like to add that the 2 containers underlying DrawerLayout do not have to be RelativeLayout. Instead, you can use constraintlayout, framelayout, linearlayout, and others.

At this stage, the development of the pull-out menu is complete!

This method is quite simple to implement, as well as flexible in terms of adding a menu to any activity. I hope that this article will help android developers to simplify the creation of a side menu for their applications.