I just came across this app and saw this custom animation for a DrawerLayout.
I'm guessing it has to take a screenshot first, then draw a custom View in the Activity, but I'm not sure about that, nor the details.
Does anyone know how to do this?
You can do this by translating and scaling the content View in the onDrawerSlide() method of a DrawerListener on your DrawerLayout. Since the content View itself is resizing, and there's a separate TextView that appears in the bottom right corner, we'll stick both of these in another holder ViewGroup. If that label TextView isn't needed, the holder ViewGroup can be omitted, as well.
A basic DrawerLayout setup for the example:
<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"
android:background="#222222">
<RelativeLayout android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#E97411" />
<ImageView android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#EEEEEE"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:visibility="gone"
android:textSize="26dp"
android:text="My App" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#555555" />
</android.support.v4.widget.DrawerLayout>
The example Activity shows the standard View initializations, and the DrawerListener that is actually doing the work.
public class MainActivity extends AppCompatActivity {
private static final float END_SCALE = 0.7f;
private DrawerLayout drawerLayout;
private NavigationView navigationView;
private Toolbar toolbar;
private TextView labelView;
private View contentView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.navigation_view);
toolbar = (Toolbar) findViewById(R.id.toolbar);
labelView = (TextView) findViewById(R.id.label);
contentView = findViewById(R.id.content);
toolbar.setNavigationIcon(new DrawerArrowDrawable(this));
toolbar.setNavigationOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
if (drawerLayout.isDrawerOpen(navigationView)) {
drawerLayout.closeDrawer(navigationView);
}
else {
drawerLayout.openDrawer(navigationView);
}
}
}
);
drawerLayout.setScrimColor(Color.TRANSPARENT);
drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {
#Override
public void onDrawerSlide(View drawerView, float slideOffset) {
labelView.setVisibility(slideOffset > 0 ? View.VISIBLE : View.GONE);
// Scale the View based on current slide offset
final float diffScaledOffset = slideOffset * (1 - END_SCALE);
final float offsetScale = 1 - diffScaledOffset;
contentView.setScaleX(offsetScale);
contentView.setScaleY(offsetScale);
// Translate the View, accounting for the scaled width
final float xOffset = drawerView.getWidth() * slideOffset;
final float xOffsetDiff = contentView.getWidth() * diffScaledOffset / 2;
final float xTranslation = xOffset - xOffsetDiff;
contentView.setTranslationX(xTranslation);
}
#Override
public void onDrawerClosed(View drawerView) {
labelView.setVisibility(View.GONE);
}
}
);
}
}
The example uses a SimpleDrawerListener, but the onDrawerSlide() method can be overridden similarly in an ActionBarDrawerToggle, if using that. The super method would need to be called, in that case, to preserve the hamburger-arrow animation.
Do note that DrawerLayout retains the drawer state during Activity recreation, so you might need to account for this when handing orientation changes, etc.
Drawer behavior is a library use Android DrawerLayout Support library as Parent Class [Easy to migrate], that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.
If current project use Android DrawerLayout Support library and kinda boring with the effect. Then, just change the layout code and calling necessary method for animation/effect.
Check out github code
Gradle
dependencies {
implementation 'com.infideap.drawerbehavior:drawer-behavior:0.1.5'
}
if the gradle unable to sync, you may include this line in project level gradle,
repositories {
maven{
url "https://dl.bintray.com/infideap2/Drawer-Behavior"
}
}
Related
I have two drawers on left and on right. Now right drawer is in the lock-closed state, but left drawer can be open and close. On opening drawer, I am pushing the middle content using drawer offset. Now I also want right drawer (which is opened by default) should move/adjust the content also but I am unable to do it. Because when the left drawer is opened it pushes the content under the right drawer. So what I want the right drawer on default opening should adjust the content and when I open left drawer content should adjust and should not move under the right drawer.
Here is my code:
<DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true">
<RelativeLayout
android:id="#+id/main_screen"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/bg">
<include
android:id="#+id/includedView"
layout="#layout/view" />
</RelativeLayout>
<!-- ======= side menu ====== -->
<RelativeLayout
android:id="#+id/leftMenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="left">
<include
layout="#layout/leftmenuLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rightMenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right">
<include
layout="#layout/rightmenuLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</RelativeLayout>
<!-- ======================= -->
</DrawerLayout>
DrawerAcivity:
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerLayout.setScrimColor(Color.parseColor("#00000000"));
main_screen = (RelativeLayout) findViewById(R.id.main_screen);
leftMenu= (RelativeLayout) findViewById(R.id.leftMenu);
rightMenu= (RelativeLayout)
findViewById(R.id.rightMenu);
Display display = getWindowManager().getDefaultDisplay();
size = new Point();
display.getSize(size);
mDrawerLayout.addDrawerListener(new CustomDrawerLayout.DrawerListener() {
#Override
public void onDrawerSlide(View drawerView, float slideOffset) {
float moveFactor = 0;
moveFactor = (drawerView.getWidth() * slideOffset);
main_screen.setTranslationX(moveFactor);
}
#Override
public void onDrawerOpened(View drawerView) {
invalidateOptionsMenu();
}
#Override
public void onDrawerClosed(View drawerView) {
invalidateOptionsMenu();
}
#Override
public void onDrawerStateChanged(int newState) {
}
});
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, rightMenu);
mDrawerLayout.openDrawer(GravityCompat.END);
mDrawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, leftMenu);
ViewGroup.LayoutParams params = leftMenu.getLayoutParams();
params.width = (((size.x / 2) / 4));
rl_slider_menu.setLayoutParams(params);
ViewGroup.LayoutParams paramsRight =
rightMenu.getLayoutParams();
paramsRight.width = ((size.x / 3));
rightMenu.setLayoutParams(paramsRight);
DrawerLayout.LayoutParams paramsContent = (DrawerLayout.LayoutParams) main_screen.getLayoutParams();
paramsContent.setMargins(0, 0, (((size.x / 2) / 4)), 0); //substitute parameters for left, top, right, bottom
main_screen.setLayoutParams(paramsContent);
main_screen.invalidate();
This actually turns out to be a pretty simple implementation, once you get your head wrapped around it.
We simply need to keep track of both drawers' inset measures, scale the content View to the remaining space, and then translate it by the difference of half of each inset. For example. building on the code in the question:
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
private float leftInset, rightInset;
#Override
public void onDrawerSlide(View drawerView, float slideOffset) {
if (drawerView == leftMenu) {
leftInset = slideOffset * leftMenu.getWidth();
}
else {
rightInset = slideOffset * rightMenu.getWidth();
}
final float scale = 1 - (leftInset + rightInset) / main_screen.getWidth();
main_screen.setScaleX(scale);
final float translation = leftInset / 2 - rightInset / 2;
main_screen.setTranslationX(translation);
}
...
}
I'd like to create a navigation drawer effect, but rather than the drawer sliding out from the right.I Created code and my code working perfect when my slide menu is left side.this is a my java code.
DrawerLayout drawerLayout;
View drawerView;
View drawerContent;
View mainContent;
ActionBarDrawerToggle toggle;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerView = findViewById(R.id.drawer_view);
drawerContent = findViewById(R.id.drawer_content);
mainContent = findViewById(R.id.main_content);
toggle = new ActionBarDrawerToggle(
TestLayout.this,
drawerLayout,
R.drawable.ic_drawer,
R.string.u_drawer_call_center,
R.string.u_drawer_call_center
) {
#Override
public void onDrawerSlide(View drawer, float slideOffset)
{
super.onDrawerSlide(drawer, slideOffset);
drawerContent.setX(drawerView.getWidth() * (1 - slideOffset));
mainContent.setX(drawerView.getWidth() * slideOffset);
}
public void onDrawerClosed(View view) {
}
public void onDrawerOpened(View drawerView) {
}
};
drawerLayout.setDrawerListener(toggle);
drawerLayout.closeDrawer(drawerView);
drawerContent.setX(drawerView.getWidth());
}
}
as i said i can move main content when my slide menu is left side.but now i want slide menu right side.i rewrited my xml code but i can't move main content
this is a my xml code
<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"
android:background="#000000">
<FrameLayout android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc" />
<LinearLayout android:id="#+id/drawer_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right">
<LinearLayout android:id="#+id/drawer_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
i also changed source code
drawerContent.setX(drawerLayout.getWidth() - (drawerView.getWidth() * (1 - slideOffset)));
mainContent.setX(drawerLayout.getWidth() - (drawerView.getWidth() * slideOffset));
but this code not working.I don't know how to use my code when i have slide menu right side.
if anyone knows solution please help me
thanks everyone
Other than changing the layout_gravity on the drawer_view as you've already done, the necessary changes are minor. In my original code, negate every occurrence of drawerView.getWidth(). That is:
toggle = new ActionBarDrawerToggle(...) {
...
#Override
public void onDrawerSlide(View drawer, float slideOffset) {
super.onDrawerSlide(drawer, slideOffset);
drawerContent.setX(-drawerView.getWidth() * (1 - slideOffset));
mainContent.setX(-drawerView.getWidth() * slideOffset);
...
}
};
...
drawerContent.setX(-drawerView.getWidth());
You will then need to override MainActivity's onOptionsItemSelected() method as follows:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
if(drawerLayout.isDrawerOpen(Gravity.END)) {
drawerLayout.closeDrawer(Gravity.END);
}
else {
drawerLayout.openDrawer(Gravity.END);
}
return true;
}
...
return super.onOptionsItemSelected(item);
}
I am trying to create a horizontal LinearLayout which is wider than the screen of the device. It contains a Button which will move the layout to view the part outside the screen when it is clicked. The problem is that android is not creating the part outside the screen, so when I press the button, the view moves to show black screen where the remaining view should have been.
My code-
MainActivity.java
public class MainActivity extends BaseGameActivity implements OnClickListener {
private Context mContext;
private int mScreenHeight;
private int mScreenWidth;
private LinearLayout mViewContainer;
private View mTransparentContainer;
private Button mSliderBtn;
private View mSlidingView;
private View mHomeView;
private int mSlidingWidth;
private boolean mIsSlidingMenuVisible = false;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = getApplicationContext();
mScreenHeight = UserScreen.getHeight(mContext);
mScreenWidth = UserScreen.getWidth(mContext);
mSlidingWidth = (int) (getResources().getDimension(R.dimen.sliding_menu_offset) + 0.5f);
mViewContainer = new LinearLayout(mContext);
mViewContainer.setOrientation(LinearLayout.HORIZONTAL);
mViewContainer.setLayoutParams(new LinearLayout.LayoutParams(mScreenWidth + mSlidingWidth, mScreenHeight));
setContentView(mViewContainer);
LinearLayout homeContainer = new LinearLayout(mContext);
LinearLayout.LayoutParams homeContainerParams = new LinearLayout.LayoutParams(mScreenWidth, LayoutParams.MATCH_PARENT);
mHomeView = getLayoutInflater().inflate(R.layout.activity_main, homeContainer);
mHomeView.setBackgroundColor(0x80ffffff);
mViewContainer.addView(homeContainer, homeContainerParams);
LinearLayout slidingContainer = new LinearLayout(mContext);
LinearLayout.LayoutParams slidingContainerParams = new LinearLayout.LayoutParams(mSlidingWidth, LayoutParams.MATCH_PARENT);
mSlidingView = getLayoutInflater().inflate(R.layout.slider_menu, slidingContainer);
mViewContainer.addView(slidingContainer, slidingContainerParams);
initUi();
// other code
}
public void initUi() {
mSliderBtn = (Button) mHomeView.findViewById(R.id.button_slider);
mSliderBtn.setOnClickListener(this);
mTransparentContainer = mHomeView.findViewById(R.id.transparent_container);
mTransparentContainer.setOnClickListener(this);
// other code
}
#Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button_slider:
mSliderBtn.setEnabled(false);
mIsSlidingMenuVisible = true;
mTransparentContainer.setVisibility(View.VISIBLE);
mTransparentContainer.bringToFront();
tableMoveLeft(mViewContainer, mSlidingWidth);
break;
case R.id.transparent_container:
mSliderBtn.setEnabled(true);
mIsSlidingMenuVisible = false;
mTransparentContainer.setVisibility(View.GONE);
tableMoveRight(mViewContainer, mSlidingWidth);
break;
// other cases
}
}
// Animation Functions
public void tableMoveLeft(final View container, final float newPos){
ObjectAnimator moveLeft = ObjectAnimator.ofFloat(container, "translationX", 0, -newPos);
moveLeft.setDuration(300);
moveLeft.start();
}
public void tableMoveRight(final View container, final float newPos){
ObjectAnimator moveRight = ObjectAnimator.ofFloat(container, "translationX", -newPos, 0);
moveRight.setDuration(300);
moveRight.start();
}
// other code
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_menu"
tools:context="${relativePackage}.${activityClass}" >
<!-- other code -->
<Button
android:id="#+id/button_slider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="10dip"
android:layout_marginTop="30dip"
android:background="#drawable/move" />
<View
android:id="#+id/transparent_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#80800000"
android:visibility="gone" />
</RelativeLayout>
slider_menu.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="#drawable/image_info_bg_popup"
android:orientation="vertical" >
<!-- Other Code -->
</LinearLayout>
My Output on clicking the button
Using a ScrollView is not a solution because I dont want the user to freely scroll the view, and also there is a ViewPager in the main layout which will conflict with it. Please help. Thanks.
Android officially introduced sliding panel menu by introducing a newer concept called Navigation Drawer. Most of the time Sliding Menu (Navigation Drawer) will be hidden and can be shown by swiping the screen from left edge to right or tapping the app icon on the action bar.
For example, the following layout uses a DrawerLayout with two child views: a FrameLayout to contain the main content (populated by a Fragment at runtime), and a ListView for the navigation drawer.
<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">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<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:background="#111"/>
for additional info about NavigationDrawer, please take a look into these links :
http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/
http://developer.android.com/training/implementing-navigation/nav-drawer.html
The problem was that the layout with size larger than screen size was set as the root container of the activity. I don't know what was the problem caused by that, but to fix it-
#Override
public void onCreate(Bundle savedInstanceState) {
super(savedInstanceState);
LinearLayout rootContainer = new LinearLayout(mContext);
setContentView(rootContainer);
// other code
rootContainer.addView(mViewContainer);
}
Any explanations of why having a root view larger than screen size created a problem are welcome :)
I have an Action Bar. It has two drawers coming from left and right.
For the left, I'm using the Action Bar Toggle button on the top left as shown in the image below. Can I put that toggle button in the right side too?
I can use a custom linear layout view (ImageView - EditText - ImageView) to add it to the getActionBar.setCustomView() method and implement click listeners on the imageview's to show drawers.
My question is, does android provide a right toggle button like the left?
You have to make some changes in your .xml file and Java code.
First Step
Let start with your .xml file.
Code
First FrameLayout: represent to action-bar, note we have ImageView called drawer_indicator and it's our right toggle.
Second FrameLayout: represent our fragment containers.
<?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:orientation="vertical" >
<!-- Action-bar looking view -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="#dimen/actionbar_dimen"
android:background="#color/blue" >
<ImageView
android:id="#+id/drawer_indicator"
android:layout_width="#dimen/actionbar_dimen"
android:layout_height="#dimen/actionbar_dimen"
android:layout_gravity="right"
android:background="#drawable/drawer_selector"
android:scaleType="centerInside" />
<TextView
android:id="#+id/indicator_style"
android:layout_width="wrap_content"
android:layout_height="#dimen/actionbar_dimen"
android:layout_gravity="center"
android:background="#drawable/drawer_selector"
android:gravity="center"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:text="#string/tests"
android:textColor="#android:color/white"
android:textStyle="bold" />
</FrameLayout>
<!-- Action-bar Ends -->
<!-- Drawer Layout -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<!-- our Fragment Content-->
<FrameLayout
android:id="#+id/view_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_gray"
android:gravity="center" />
<!-- slide menu android:layout_gravity="end" to make it come from right-->
<LinearLayout
android:id="#+id/drawer_content"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#android:color/white"
android:gravity="center"
android:orientation="vertical" >
<!-- drawer list-->
<ListView
android:id="#+id/DrawerList"
android:layout_width="240dp"
android:layout_height="match_parent"
/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
Second Step
Get DrawerArrowDrawable from this link
private DrawerArrowDrawable drawerArrowDrawable;
private float offset;
private boolean flipped;
ListView DrawerList;
DrawerLayout drawer;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// to make activity full screen
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
// it must before setContentView
setContentView(R.layout.home_view);
// drawer list
DrawerList = (ListView) findViewById(R.id.DrawerList);
// drawer item list
ArrayList<DrawerItem> Items = new ArrayList<DrawerItem>();
// fill arraylist
Items.add(new DrawerItem(getResources().getString(R.string.tests),
R.drawable.test));
// drawer adapter
DrawerAdapter adapter = new DrawerAdapter(this, Items);
// set adapter to our drawer list
DrawerList.setAdapter(adapter);
// attach listener to drawer list
DrawerList.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// handle select item here
}
});
// initialize our drawer layout
drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
// right toggle button
final ImageView imageView = (ImageView) findViewById(R.id.drawer_indicator);
final Resources resources = getResources();
// its custom class
drawerArrowDrawable = new DrawerArrowDrawable(resources);
drawerArrowDrawable.setStrokeColor(resources
.getColor(R.color.light_gray));
imageView.setImageDrawable(drawerArrowDrawable);
drawer.setDrawerListener(new DrawerLayout.SimpleDrawerListener() {
#Override
public void onDrawerSlide(View drawerView, float slideOffset) {
offset = slideOffset;
// Sometimes slideOffset ends up so close to but not quite 1 or 0.
if (slideOffset >= .995) {
flipped = true;
drawerArrowDrawable.setFlip(flipped);
} else if (slideOffset <= .005) {
flipped = false;
drawerArrowDrawable.setFlip(flipped);
}
drawerArrowDrawable.setParameter(offset);
}
});
// attach listener to toggle image view
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
openDrawer();
}
});
}
I hope it be clear to you.
How can I open Drawer Layout moving all the view and not just slide over?
The idea would be to make the menu like Facebook and not like GMail, for example. I've been looking for information and haven't found anything. It can be done? It's possible with Drawer Layout? How?
Thank you very much.
If you dont want to use third-party libraries, you can implement it yourself just overriding the onDrawerSlide from the ActionBarDrawerToggle. There you can translate your framelayout view based on the opening % of your drawer.
Example with code:
<?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)
{
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-honeycomb android versions, i managed it using TranslateAnimation for lower version devices.
Hope it helps!
The thing you are using is navigation drawer but you have to use
menu drawer##
for the menu like facebook and gmail.
i have implemented it and this link will help you to do so.
Here's a link!
this will tell you all the steps for making menu drawer.
dont forget to Vote Up the answer if it is helfull.
thanks.