How to move main content with Drawer Layout left side
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)
{
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-honeycomb android versions, i managed it using TranslateAnimation for lower version devices.
Hope it helps!
Moving the main content to reveal a drawer
I believe I've figured out a relatively simple solution. The following DrawerLayout setup is pretty standard - i.e., the content ViewGroup first, the drawer View last, using standard attributes, etc. Additionally, a technique similar to that shown in your posted link is used to slide the content with the drawer.
The trick in the example is the setup of the drawer itself. We're going to use two nested ViewGroups - the outer one is the regular sliding drawer View; the inner, a ViewGroup for the actual drawer contents. We'll then slide the inner content ViewGroup opposite the direction of the drawer's slide using a DrawerListener (an ActionBarDrawerToggle in our example), making the drawer appear static against the left side.
The example DrawerLayout, main.xml. Note the standard drawer attributes set on the drawer_container ViewGroup:
<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" />
<FrameLayout
android:id="@+id/drawer_container"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start">
<LinearLayout
android:id="@+id/drawer_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_launcher" />
...
</LinearLayout>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
This example Activity shows the few extra lines we need to add to a regular Navigation Drawer setup. Other than getting references to the Views, the main bit is in the ActionBarDrawerToggle's onDrawerSlide() method:
public class MainActivity extends Activity {
ActionBarDrawerToggle toggle;
DrawerLayout drawerLayout;
View drawerContainer;
View drawerContent;
View mainContent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerContainer = findViewById(R.id.drawer_container);
drawerContent = findViewById(R.id.drawer_content);
mainContent = findViewById(R.id.main_content);
toggle = new ActionBarDrawerToggle(...) {
@Override
public void onDrawerSlide(View drawer, float slideOffset) {
super.onDrawerSlide(drawer, slideOffset);
drawerContent.setTranslationX(drawerContainer.getWidth() * (1 - slideOffset));
mainContent.setTranslationX(drawerContainer.getWidth() * slideOffset);
}
};
drawerLayout.addDrawerListener(toggle);
}
}
Keep in mind that DrawerLayout restores the drawer opened/closed state during Activity re-creation, so you might need to account for that, for example, during orientation changes, etc.
How to move content to right side in a DrawerLayout?
Could you please try using the following attribute
android:layout_gravity = "end"
in your NavigationView? Please place this attribute in your NavigationView and check.
Align custom view to left of navigation drawer
Change your code according to my , its working . Take RelativeLayout as parent (only change with your connect_us.xml):
connect_us.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FFFFFF"
android:gravity="left">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/connect_youtube"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/ic_launcher"
android:padding="5dp" />
<ImageView
android:id="@+id/connect_facebook"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/ic_launcher"
android:padding="5dp"/>
<ImageView
android:id="@+id/connect_twitter"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/ic_launcher"
android:padding="5dp"/>
</LinearLayout>
</RelativeLayout>
Second Solution :
In your main_activity.xml (fix the width of the Navigation drawer)
I used here
android.support.design.widget.NavigationView to android:layout_width="320dp" I know its not a proper solution to fix layout_width.
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"
/>
And connect_us.xml layout also set the layout_width = "320dp"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="@color/app_bg_color"
android:orientation="horizontal"
android:gravity="start">
<ImageView
android:id="@+id/connect_youtube"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/youtube_icon"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:padding="5dp" />
<ImageView
android:id="@+id/connect_facebook"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/facebook_icon"
android:padding="5dp"/>
<ImageView
android:id="@+id/connect_twitter"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/twitter_icon"
android:padding="5dp"/>
</LinearLayout>
Move content left and right to follow Drawer open / close (Material-UI)
You can create another div as direct child of 'main', and style it's margin-left conditionally.
first, create two new styles in style object:
shiftTextLeft: {
marginLeft: '0px'
},
shiftTextRight: {
marginLeft: drawerWidth,
}
And add the div in your component:
<main className={classes.content}>
<div className={this.state.isDrawerOpen ? classes.shiftTextRight : classes.shiftTextLeft}>
<div className={classes.toolbar} />
<Typography paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
etc...
</Typography>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
... whatevs..
</Typography>
</div>
</main>
You can refer to this CodeSandbox example
Versions used:
- material-ui: 3.9.3
- material-ui-icons: 3.0.2
- react: 16.9.0
How move View alongside DrawerLayout's content whit the same Z
DrawerLayout applies that shadow - the scrim - to its child Views in its drawChild() method. It determines which children to apply it to by checking that a given child is not a drawer View. It ultimately does this by checking the gravity of the child's LayoutParams.
Knowing this, we can create a custom DrawerLayout subclass to override drawChild(), and temporarily change the gravity on the child that we don't want the scrim applied to. Since no layout is happening during the draw, this won't affect the actual placement of the View.
public class CustomDrawerLayout extends DrawerLayout {
private int noScrimId;
public CustomDrawerLayout(Context context, AttributeSet attrs) {
super(context, attrs);
// Get the ID for the no-scrim View.
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomDrawerLayout);
noScrimId = a.getResourceId(R.styleable.CustomDrawerLayout_noScrimView, View.NO_ID);
a.recycle();
}
@Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
// Is this the child we want?
final boolean isNoScrimView = child.getId() == noScrimId;
// If yes, temporarily tag it as a drawer.
if (isNoScrimView) {
((LayoutParams) child.getLayoutParams()).gravity = Gravity.LEFT;
}
// Let the super class do the draw, and save the return.
final boolean res = super.drawChild(canvas, child, drawingTime);
// Reset the gravity if we changed it.
if (isNoScrimView) {
((LayoutParams) child.getLayoutParams()).gravity = Gravity.NO_GRAVITY;
}
return res;
}
}
This example uses a custom attribute so that the "no-scrim" View can be specified in the layout. If you don't want to use that attribute, you can remove the TypedArray processing from the constructor, and just hardcode an ID. If you do want to use the custom attribute, you need to define it in your project, which you can do by sticking the following file in the values/ folder, or adding to the one that might already be there.
attrs.xml
<resources>
<declare-styleable name="CustomDrawerLayout">
<attr name="noScrimView" format="reference" />
</declare-styleable>
</resources>
CustomDrawerLayout is a drop-in replacement, and you can use it in your layouts just like you would the regular class. For example, if your ImageButtons' LinearLayout has the ID button_menu:
<com.mycompany.myapp.CustomDrawerLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:noScrimView="@+id/button_menu">
Please note that if you should happen to set a drawer View as the noScrimView, you're gonna have a bad time. Also, the noScrimView must be a direct child of the DrawerLayout, as the scrim effect is applied only to those.
For simplicity's sake, I've omitted any checks from the sample, but if you wish to include some, doing them in the onMeasure() method would be in line with how DrawerLayout handles its own checks.
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final View v = findViewById(noScrimId);
if (v != null) {
if (!(v.getLayoutParams() instanceof LayoutParams)) {
throw new IllegalStateException("noScrimView must be a child of DrawerLayout");
}
if (((LayoutParams) v.getLayoutParams()).gravity != Gravity.NO_GRAVITY) {
throw new IllegalStateException("noScrimView cannot be a drawer View");
}
}
else {
if (noScrimId != View.NO_ID) {
Log.d(getClass().getSimpleName(), "noScrimView not found");
}
}
}
How to set Navigation Drawer to be opened from right to left
In your main layout set your ListView gravity to right:
android:layout_gravity="right"
Also in your code :
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open,
R.string.drawer_close) {
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item != null && item.getItemId() == android.R.id.home) {
if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
mDrawerLayout.closeDrawer(Gravity.RIGHT);
}
else {
mDrawerLayout.openDrawer(Gravity.RIGHT);
}
}
return false;
}
};
hope it works :)
Related Topics
Java.Lang.Illegalstateexception: the Specified Child Already Has a Parent
Manage Google Maps API Key with Gradle in Android Studio
Create a Chatview Layout in Android
Android Data Binding with a Custom View
Android Lollipop, Add Popup Menu from Title in Toolbar
Manually Adding Aar with Dependency Pom/Iml File
How to Set an Animated Gif File as Live Wallpaper in Android
Room Cannot Verify the Data Integrity
How to Import Maven Dependency in Android Studio/Intellij
How to Pass Custom Component Parameters in Java and Xml
Getting Height of Text View Before Rendering to Layout
How to Use Sms Content Provider? Where Are the Docs
Determine Angle of View of Smartphone Camera
Error in Strings.Xml File in Android
In Fragment on Back Button Pressed Activity Is Blank
Android Download PDF from Url Then Open It with a PDF Reader