问题
I want to create a layout which will have a scrollview, inside the srollview at the top of the layout there will be two Textviews. In the center there will be two Edittexts and at the bottom of the layout, there will be two buttons. But everything will be under the main scrollview.
A visual description of my requirement:
I have done some coding which scrolls the top content but keeps the buttons at the bottom out of the scrollview which is not the expected functionality.
My layout coding:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<ScrollView
android:id="@+id/my_scrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/LinearLayout01"
android:scrollbars="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/welcomeToStudy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Welcome to xxxxxxxxxxxxxxx!"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#54575A"
android:textSize="28sp" />
<TextView
android:id="@+id/pleaseEnter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/welcomeToStudy"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="Please enter your details xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."
android:textSize="20sp" />
<EditText
android:id="@+id/emailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/pleaseEnter"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<EditText
android:id="@+id/passwordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/emailSignUp"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
</RelativeLayout>
</ScrollView>
<LinearLayout
android:id="@+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:layout_marginTop="5dp">
<Button
android:id="@+id/signUpBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/next_button_selector"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
<Button
android:id="@+id/registerWithFb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/next_button_xhdpi_facebook"
android:text="Sign up with Facebook"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
</LinearLayout>
</RelativeLayout>
What should I do to get the expected output?
回答1:
If I got you well, you want a white space between your password EditText and your Buttons. If that's it, then just add a dummy View like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/welcomeToStudy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to xxxxxxxxxxxxxxx!"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#54575A"
android:textSize="28sp" />
<TextView
android:id="@+id/pleaseEnter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Please enter your details xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."
android:textSize="20sp" />
<EditText
android:id="@+id/emailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<EditText
android:id="@+id/passwordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<FrameLayout
android:id="@+id/whiteSpace"
android:layout_width="match_parent"
android:layout_height="450dp"
android:layout_gravity="center_horizontal" />
<Button
android:id="@+id/signUpBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/next_button_selector"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
<Button
android:id="@+id/registerWithFb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/next_button_xhdpi_facebook"
android:text="Sign up with Facebook"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
</LinearLayout>
</ScrollView>
Now, if you want the white space to have the exact height so the Buttons don't go down too much in the ScrollView, (I think) you can't do it just by XML, but you can compute the needed height in your onCreate method:
final ScrollView mScrollView = (ScrollView)findViewById(R.id.my_scrollview);
final View whiteSpace = findViewById(R.id.whiteSpace);
final EditText password = (EditText)findViewById(R.id.passwordSignUp);
whiteSpace.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
// Check OS version as removeOnGlobalLayoutListener is available API>=11
// and removeGlobalOnLayoutListener is deprecated in API<11
if(Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
whiteSpace.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
whiteSpace.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
// Compute the height
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) whiteSpace.getLayoutParams();
params.height = mScrollView.getHeight() - whiteSpace.getTop();
whiteSpace.setLayoutParams(params);
}
});
This is the expected output:
If you want a different height then just change the value assigned in
params.height = mScrollView.getHeight() - whiteSpace.getTop();
as my value is calculated to be the exact height needed so the Buttons can be just below your visible screen. Computing another value depends on your requirements and it's out of the scope of your question.
回答2:
You just need to put your buttons inside the RelativeLayout that is the child of the ScrollView. You don't actually need the root RelativeLayout then, but I've left it in in case there's some other reason you need it -- if there's something else you really don't want to scroll.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<ScrollView
android:id="@+id/my_scrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/LinearLayout01"
android:scrollbars="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/welcomeToStudy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Welcome to xxxxxxxxxxxxxxx!"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#54575A"
android:textSize="28sp" />
<TextView
android:id="@+id/pleaseEnter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/welcomeToStudy"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="Please enter your details xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."
android:textSize="20sp" />
<EditText
android:id="@+id/emailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/pleaseEnter"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<EditText
android:id="@+id/passwordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/emailSignUp"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<Button
android:id="@+id/signUpBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/passwordSignUp"
android:background="@drawable/next_button_selector"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
<Button
android:id="@+id/registerWithFb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="@+id/signUpBtn"
android:background="@drawable/next_button_xhdpi_facebook"
android:text="Sign up with Facebook"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
回答3:
Add the linear layout contents to your relative layout inside scrollview will work I think. Or make the scrollview as root parent also will work.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<ScrollView
android:id="@+id/my_scrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@+id/LinearLayout01"
android:scrollbars="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/welcomeToStudy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Welcome to xxxxxxxxxxxxxxx!"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#54575A"
android:textSize="28sp" />
<TextView
android:id="@+id/pleaseEnter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/welcomeToStudy"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="Please enter your details xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."
android:textSize="20sp" />
<EditText
android:id="@+id/emailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/pleaseEnter"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<EditText
android:id="@+id/passwordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/emailSignUp"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<Button
android:id="@+id/signUpBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/next_button_selector"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
<Button
android:id="@+id/registerWithFb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:background="@drawable/next_button_xhdpi_facebook"
android:text="Sign up with Facebook"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
回答4:
First of all i want to tell u that scroll view only works when the layout is not fitting into the screen then extra content android shows int the scroll view. if the content is fit into the device screen size then scroll view will not work. if you design your layout according to the big screen device the and then u use that layout into small screen device the this layout shows into scroll. but if you design your layout according to the small screen device the and then u use that layout into big screen device the this layout does not show into scroll.
i used this layout into small screen size mobile. e.i samsung s2.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<ScrollView
android:id="@+id/my_scrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/welcomeToStudy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:text="Welcome to xxxxxxxxxxxxxxx!"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#54575A"
android:textSize="28sp" />
<TextView
android:id="@+id/pleaseEnter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/welcomeToStudy"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:text="Please enter your details xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."
android:textSize="20sp" />
<EditText
android:id="@+id/emailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/pleaseEnter"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<EditText
android:id="@+id/passwordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/emailSignUp"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<LinearLayout
android:id="@+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="35dp"
android:orientation="vertical"
android:layout_below="@+id/passwordSignUp">
<Button
android:id="@+id/signUpBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
<Button
android:id="@+id/registerWithFb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Sign up with Facebook"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
</LinearLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
回答5:
try this..
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:weightSum="3" >
<LinearLayout
android:id="@+id/top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="@+id/welcomeToStudy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to xxxxxxxxxxxxxxx!"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#54575A"
android:textSize="28sp"
android:gravity="center"/>
<TextView
android:id="@+id/pleaseEnter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Please enter your details xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."
android:textSize="20sp"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:id="@+id/middle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<EditText
android:id="@+id/emailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<EditText
android:id="@+id/passwordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
</LinearLayout>
<LinearLayout
android:id="@+id/bot"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:id="@+id/signUpBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
<Button
android:id="@+id/registerWithFb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Sign up with Facebook"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
</LinearLayout>
</LinearLayout>
</ScrollView>
回答6:
On the basis of peguerosdc's answer, I made some modifications and got the whole thing to work. The new layout code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >
<ScrollView
android:id="@+id/my_scrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="@+id/main_relative_layout"
android:layout_width="match_parent"
android:layout_height="53dp" >
<TextView
android:id="@+id/welcomeToStudy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:text="Welcome to xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#54575A"
android:textSize="28sp" />
<TextView
android:id="@+id/pleaseEnter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/welcomeToStudy"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:text="Please enter your details xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx."
android:textSize="20sp" />
<EditText
android:id="@+id/emailSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/pleaseEnter"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:ems="10"
android:hint="Email"
android:inputType="textEmailAddress"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<EditText
android:id="@+id/passwordSignUp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/emailSignUp"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
android:textSize="24sp" >
</EditText>
<LinearLayout
android:id="@+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/passwordSignUp"
android:layout_marginTop="35dp"
android:orientation="vertical" >
<Button
android:id="@+id/signUpBtn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/next_button_selector"
android:text="Sign Up"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
<Button
android:id="@+id/registerWithFb"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="@drawable/next_button_xhdpi_facebook"
android:text="Sign up with Facebook"
android:textColor="#FFFFFF"
android:textSize="20sp" >
</Button>
</LinearLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
The approach is to change the main_relative_layout value programatically according to the device screen size in order to accommodate the layout in the screens. I did not use a whitespace though, I aligned the LinearLayout01 to ParentBottom.
The code to get the screen size of the device and change main_relative_layout programatically (inside onCreate):
// for button placement purely design workout
DisplayMetrics displayMetrics = this.getResources().getDisplayMetrics();
float dpHeight = displayMetrics.heightPixels / displayMetrics.density;
float dpWidth = displayMetrics.widthPixels / displayMetrics.density;
Log.e("Screen height:", "" + dpHeight);
RelativeLayout rl = (RelativeLayout) findViewById(R.id.main_relative_layout);
rl.getLayoutParams().height = dpToPx((int) dpHeight - 70);
The method dpToPx:
//method to convert from dp to px
public int dpToPx(int dp) {
DisplayMetrics displayMetrics = SignUp.this.getResources().getDisplayMetrics();
int px = Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
return px;
}
来源：https://stackoverflow.com/questions/27518889/scroll-view-with-two-buttons-at-the-bottom-of-the-layout