Android scroll layout

Question

How to create an Android interface like this

01 and 02, the height of the layout should be 1/3 of the height of the structure. By default, the layout should display a black area that scrolls down, it should show 01 and 2/3 of the black layout.

• If the main view displays 01 and 2/3 of the black layout and the user scrolls up , then he should go to the main layout (black layout)

Answer 1

Finally I found a solution

import android.os.Bundle; import android.app.Activity; import android.util.DisplayMetrics; import android.util.Log; import android.view.GestureDetector; import android.view.GestureDetector.SimpleOnGestureListener; import android.view.MotionEvent; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.Toast; public class ScrollLayoutActivity extends Activity { private static String TAG = ScrollLayoutActivity.class.getSimpleName(); private LinearLayout mTopLayout; private LinearLayout mMiddleLayout; private LinearLayout mBottomLayout; private ScrollView mScrollView; private boolean possitionTop; private boolean possitionMiddle = true; int mLayoutHeight; float mDeviceHeight; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scroll_layouts); DisplayMetrics displayMetrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); // final float height=displayMetrics.heightPixels/displayMetrics.xdpi; // device height in pixels mDeviceHeight = displayMetrics.heightPixels; mLayoutHeight = (int) mDeviceHeight / 3; mScrollView = (ScrollView) findViewById(R.id.scrv); mTopLayout = (LinearLayout) findViewById(R.id.top); mMiddleLayout = (LinearLayout) findViewById(R.id.middle); mBottomLayout = (LinearLayout) findViewById(R.id.bottom); mTopLayout.setLayoutParams(new LinearLayout.LayoutParams(mTopLayout .getLayoutParams().width, mLayoutHeight)); mBottomLayout.setLayoutParams(new LinearLayout.LayoutParams( mBottomLayout.getLayoutParams().width, mLayoutHeight)); mMiddleLayout.setLayoutParams(new LinearLayout.LayoutParams( mMiddleLayout.getLayoutParams().width, (int) mDeviceHeight)); mScrollView.setHorizontalFadingEdgeEnabled(false); mScrollView.setVerticalFadingEdgeEnabled(false); mScrollView.post(new Runnable() { public void run() { mScrollView.scrollTo(0, mLayoutHeight); } }); // findViewById(R.id.button).setOnClickListener(new // View.OnClickListener() { // // @Override // public void onClick(View v) { // Toast.makeText(ScrollLayoutActivity.this, "height : " + // mDeviceHeight, Toast.LENGTH_SHORT).show(); // } // }); Toast.makeText(this, "Device Height : " + mDeviceHeight, Toast.LENGTH_SHORT).show(); } public boolean dispatchTouchEvent(MotionEvent ev) { return mGestureDetector.onTouchEvent(ev); } SimpleOnGestureListener simpleOnGestureListener = new SimpleOnGestureListener() { @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { String swipe = ""; float sensitvity = 100; if ((e1.getX() - e2.getX()) > sensitvity) { swipe += "Swipe Left\n"; } else if ((e2.getX() - e1.getX()) > sensitvity) { swipe += "Swipe Right\n"; } else { swipe += "\n"; } if ((e1.getY() - e2.getY()) > sensitvity) { swipe += "Swipe Up\n"; if (!possitionMiddle && possitionTop) { mScrollView.scrollBy(0, mLayoutHeight); possitionTop = false; possitionMiddle = true; } else if (possitionMiddle && !possitionTop) { mScrollView.fullScroll(ScrollView.FOCUS_DOWN); possitionTop = false; possitionMiddle = false; } } else if ((e2.getY() - e1.getY()) > sensitvity) { swipe += "Swipe Down\n"; if (possitionMiddle && !possitionTop) { mScrollView.fullScroll(ScrollView.FOCUS_UP); possitionTop = true; possitionMiddle = false; } if (!possitionMiddle && !possitionTop) { mScrollView .scrollTo(mScrollView.getBottom(), mLayoutHeight); possitionTop = false; possitionMiddle = true; } } else { swipe += "\n"; } Log.d(TAG, swipe); return super.onFling(e1, e2, velocityX, velocityY); } }; GestureDetector mGestureDetector = new GestureDetector( simpleOnGestureListener); } 

Here is the layout

 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/scrv" android:layout_width="match_parent" android:layout_height="fill_parent" android:fillViewport="true" android:scrollbars="none" > <LinearLayout android:id="@+id/container2" android:layout_width="match_parent" android:layout_height="fill_parent" android:background="#1E1E1E" android:baselineAligned="false" android:orientation="vertical" > <LinearLayout android:id="@+id/top" android:layout_width="match_parent" android:layout_height="100dp" android:background="@android:color/black" android:baselineAligned="false" android:orientation="vertical" > </LinearLayout> <LinearLayout android:id="@+id/middle" android:layout_width="match_parent" android:layout_height="100dp" android:background="@android:color/white" android:baselineAligned="false" android:orientation="vertical" > <Button android:id="@+id/button" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> <LinearLayout android:id="@+id/bottom" android:layout_width="match_parent" android:layout_height="200dp" android:background="@android:color/darker_gray" android:baselineAligned="false" android:orientation="vertical" > </LinearLayout> </LinearLayout> 

find more details from here Android ScrollView with GestureDetector

Answer 2

You can use scrollview to do this.

 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="1"> <!-- everything you already have --> </TableLayout> </ScrollView> 

Answer 3

You need to create a layout where, if you scroll, unlike simple fixed headers and footers, it will be deleted if necessary. If the bodys size exceeds the available space, we want the layout to behave like this:

Please note that now that the screen size is insufficient to display all of our content, the footer and header are no longer pinned and respond to scrolling without overlapping the body.

So how do we get there? We use the layout_weight LinearLayout behavior to ensure that body area always expands at least longer as the remaining squeezed space between the header and footer. If the content is shorter, it expands until it reaches the Footers Up; if it is longer, it pushes the footer.

 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fillViewport="true"> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!-- HEADER --> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" /> <!-- BODY --> <LinearLayout android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" android:orientation="vertical" /> <!-- FOOTER --> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" /> </LinearLayout> </ScrollView> 

Also, you would like the content in the list to be anchored to the top, you can check this tutorail here: http://blog.velir.com/index.php/2010/11/17/android-snapping-horizontal-scroll /

Source: http://blogactivity.wordpress.com/2012/02/22/smart-headers-and-footers-in-scrollviews/
Edit: Updated to insert ready-made code and added a link to binding information.

Answer 4

You can get the height of the device using:

 DisplayMetrics metrics=new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics); float height=metrics.heightPixels/metrics.xdpi; 

Then set the height to the layout (using findViewById):

 layout.setLayoutParams(new ViewGroup.LayoutParams(layout.getLayoutParams().width, (int)height/3)); 

In your layout xml file, align the two layouts up and down from your parent, which should be a RelativeLayout in this case:

 android:layout_alignParentTop="true" android:layout_alignParentBottom="true"