How to create Android UI like this
01 and 02 layouts height should be 1/3 of the devise's height. by default layout should show black area, ones scroll down it should show 01 and the 2/3 of the black layout.
You need to create a layout where, if you scroll, unlike simple fixed headers and footers, it will move out of the way if necessary. If the body’s size exceeds the available space, we want the layout to behave like this
Notice how, now that the screen’s size is not enough to display all of our content, the footer and the header are no longer anchored and respond to scrolling, without overlapping the body.
So, how do we get there? We use LinearLayout‘s layout_weight behavior to ensure that the body area will always expand to be at least as long as the remaining sandwiched space between the header and the footer. If the content’s shorter, it expands until it reaches the footer’s top; if it’s longer, it pushes the footer down.
<?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 listview to snap to the top, you could check out 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 paste-ready code & added link with information about snapping.
You can get the height of the device by using:
DisplayMetrics metrics=new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
float height=metrics.heightPixels/metrics.xdpi;
Then, set the height to your layout (taken with findViewById):
layout.setLayoutParams(new ViewGroup.LayoutParams(layout.getLayoutParams().width, (int)height/3));
In your layout XML file, align your two layouts to top and bottom of their parent, which should be a RelativeLayout in this case:
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
Finally I found the 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