There is a design like this:
How do you place the sliding menu icon over to the top left corner? Plus I did want to add on a swipe feature to the screen:
The code that I have so far is broken down into activity_main .xml layout, the FlyOutContainer.java file which implements the fly-over/sliding menu and finally the MainActivity.java file which is the backbone of the app itself.
activity_main
<com.example.btshome.FlyOutContainer xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#444488"
android:orientation="vertical" >
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="toggleMenu"
android:text="Button 1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="toggleMenu"
android:text="Button 2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="toggleMenu"
android:text="Button 3" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#888888"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="this is some text that you will see" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="toggleMenu"
android:text="Toggle Menu" />
</LinearLayout>
</com.example.btshome.FlyOutContainer>
FlyOutContainer
public class FlyOutContainer extends LinearLayout{
private View menu;
private View content;
protected static final int menuMargin =100;
public enum MenuState{
CLOSED,OPEN
};
protected int currentContentOffset = 0;
protected MenuState menuCurrentState = MenuState.CLOSED;
public FlyOutContainer(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
}
public FlyOutContainer(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public FlyOutContainer(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
protected void onAttachedToWindow(){
super.onAttachedToWindow();
this.menu = this.getChildAt(0);
this.content = this.getChildAt(1);
this.menu.setVisibility(View.GONE);
}
protected void onLayout(boolean changed, int left, int top, int right, int bottom){
if(changed)
this.calculateChildDimensions();
this.menu.layout(left, top, right - menuMargin, bottom);
this.content.layout(left + this.currentContentOffset, top, right + this.currentContentOffset, bottom);
}
public void toggleMenu(){
switch(this.menuCurrentState){
case CLOSED:
this.menu.setVisibility(View.VISIBLE);
this.currentContentOffset = this.getMenuWidth();
this.content.offsetLeftAndRight(currentContentOffset);
this.menuCurrentState = MenuState.OPEN;
break;
case OPEN:
this.content.offsetLeftAndRight(-currentContentOffset);
this.currentContentOffset = 0;
this.menuCurrentState = MenuState.CLOSED;
this.menu.setVisibility(View.GONE);
break;
}
this.invalidate();
}
private int getMenuWidth() {
// TODO Auto-generated method stub
return this.menu.getLayoutParams().width;
}
private void calculateChildDimensions() {
// TODO Auto-generated method stub
this.content.getLayoutParams().height = this.getHeight();
this.content.getLayoutParams().width = this.getWidth();
this.menu.getLayoutParams().width = this.getWidth()-menuMargin;
this.menu.getLayoutParams().height = this.getHeight();
}
}
MainActivity
public class MainActivity extends Activity {
FlyOutContainer root;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.root = (FlyOutContainer) this.getLayoutInflater().inflate(R.layout.activity_main, null);
this.setContentView(root);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public void toggleMenu(View v){
this.root.toggleMenu();
}
}
Basically the FlyOutContainer extends the LinearLayout and capitalizes on the existing LinearLayout placement capabilities. I did try to make the content screen react to the onClick event but that does not work obviously. Can anyone please help me get the design I want? and the swipe screen feature.
