LinearLayout larger than screen

Question

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.

Answer 1

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 :)

Answer 2

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