How to move main content using Layer Layout on the left

Question

Just checked how to make a menu with DrawerLayout here . But the left menu moves through the main content. How can I set it in the menu, and the main content moves side by side (the menu presses the content to the right)?

Answer 1

If you do not want to use third-party libraries , you can implement it yourself by simply overriding onDrawerSlide from ActionBarDrawerToggle. There you can translate the framelayout view based on the opening% of your box.

Code example:

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"/> <ListView android:id="@+id/left_drawer" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:divider="@android:color/transparent" android:dividerHeight="0dp"/> </android.support.v4.widget.DrawerLayout> 

And here, override onDrawerSlide:

 public class ConfigurerActivity extends ActionBarActivity { private DrawerLayout mDrawerLayout; private ListView mDrawerList; private ActionBarDrawerToggle mDrawerToggle; private FrameLayout frame; private float lastTranslate = 0.0f; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_layout); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerList = (ListView) findViewById(R.id.left_drawer); frame = (FrameLayout) findViewById(R.id.content_frame); mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.acc_drawer_open, R.string.acc_drawer_close) { @SuppressLint("NewApi") public void onDrawerSlide(View drawerView, float slideOffset) { super.onDrawerSlide(drawerView, slideOffset); float moveFactor = (mDrawerList.getWidth() * slideOffset); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) { frame.setTranslationX(moveFactor); } else { TranslateAnimation anim = new TranslateAnimation(lastTranslate, moveFactor, 0.0f, 0.0f); anim.setDuration(0); anim.setFillAfter(true); frame.startAnimation(anim); lastTranslate = moveFactor; } } }; mDrawerLayout.setDrawerListener(mDrawerToggle); // ... more of your code } } 

Since setTranslationX is not available in pre-Android versions, I managed it using TranslateAnimation for devices with a lower version.

Hope this helps!

Answer 2

You might want to use this library Box Switch I wrote.

I am sure you will find ContentDisplaceDrawerToggle convenient:

 ContentDisplaceDrawerToggle mContentDisplaceToggle = new ContentDisplaceDrawerToggle(this, mDrawerLayout, R.id.content_frame); mDrawerLayout.setDrawerListener(mContentDisplaceToggle); 

ContentDisplaceDrawerToggle does exactly what you say. It moves the presentation of the content as I / O DrawerLayout .

If you want to combine different radio buttons, you can use ActionBarToggleWrapper or DrawerToggleWrapper

The usage parameters are given in the read me file.

Answer 3

Here is the working code ...

 ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) { @Override public void onDrawerSlide(View drawerView, float slideOffset) { super.onDrawerSlide(drawerView, slideOffset); mContainerFrame.setTranslationX(slideOffset * drawerView.getWidth()); mDrawerLayout.bringChildToFront(drawerView); mDrawerLayout.requestLayout(); //below line used to remove shadow of drawer mDrawerLayout.setScrimColor(Color.TRANSPARENT); }//this method helps you to aside menu drawer }; 

Answer 4

OP got a response. But for someone who wants this effect, you can use SlidingPaneLayout . It is intended for this purpose.

In the XML file:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@id/mainFrame" style="@style/MP.mainFrame" > <!--****************************Right Pane ****************************--> <LinearLayout style="@style/searchLayout"> <android.support.v4.widget.NestedScrollView style="@style/MP"> <LinearLayout style="@style/MP.verticalLinearLayout"> </LinearLayout> </android.support.v4.widget.NestedScrollView> </LinearLayout> <!--****************************Right Pane ****************************--> <!--****************************Left Pane ****************************--> <FrameLayout style="@style/MP.mainLayout"> <LinearLayout android:id="@id/fragmentContainer" style="@style/MP.fragmentContainer"/> <android.support.v7.widget.Toolbar style="@style/toolbar"> <ir.tooskar.excomponents.ExtendedTextView android:id="@id/appTitle" style="@style/WC.appTitle"/> <ir.tooskar.excomponents.ExtendedTextView android:id="@id/appBarSearchIcon" style="@style/WC.appBarSearchIcon"/> </android.support.v7.widget.Toolbar> </FrameLayout> <!--****************************Left Pane ****************************--> 

There are two panels, left and right, that stick together and thus move together. For me, the left panel is the main panel, and the switching icon is hidden on the right to display it. (View from id appBarSearchIcon ).

Remember that there is one view group called SlidingPaneLayout , which has only two children: Left and Right . >.

And an important role in the activity:

  slidingPaneLayout = (SlidingPaneLayout) findViewById(R.id.mainFrame); // Sets a color for covering left pane(Main Pane) slidingPaneLayout.setSliderFadeColor(ContextCompat.getColor(context, R.color.searchPaneFadeColor)); // The listener for Opening the Right pane(Hidden pane) findViewById(R.id.appBarSearchIcon).setOnClickListener(new OnClickListener() { @Override public void onClick(View view){ slidingPaneLayout.openPane(); } }); 

Closing the right pane is done using the API, just like Navigation Drawer.

Answer 5

In the second layout

 android:layout_gravity="start"