Creating a login layout, as in facebook application for Android

Question

I want to create an application with login / layout activity similar to what the Facebook application has. I mean, when the text field is focused on a soft keyboard, I pushed the whole view, but did not crush the logo. I tried android:windowSoftInputMode="adjustPan/adjustResize" , but that is not what I was trying to achieve.

I found this question about SO, maybe it will make everything clearer, but it has no solution to the problem.

I also tried various types of layouts, but the soft keyboard only pushes the focused <EditText> up. Please guide me.

UPDATE:

  <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#DDDDDD"> <RelativeLayout android:height="0dp" android:layout_weight="1" android:layout_height="0dp" android:layout_width="fill_parent" android:background="#ff0000"> <ImageView android:layout_centerVertical="true" android:layout_height="fill_parent" android:layout_width="fill_parent"></ImageView> </RelativeLayout> <RelativeLayout android:height="0dp" android:layout_height="0dp" android:layout_weight="1" android:layout_width="fill_parent" android:background="#00ff00"> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#0000ff" android:height="0dp" > <Button android:layout_width="fill_parent" android:layout_height="40dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:text="Log in" /> <EditText android:layout_width="fill_parent" android:layout_height="40dp" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:padding="4dp" android:hint="password" android:inputType="textPassword" > </EditText> <EditText android:id="@+id/editText1" android:hint="login" android:padding="4dp" android:layout_width="fill_parent" android:layout_height="40dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" ></EditText> </RelativeLayout> </LinearLayout> 

Working UPDATE solution I can’t insert the whole XML file here, but the structure should be enough. Based on the answer of Gabe Sechan.

 Layout{ Layout top weight 1 Layout mid weight 1 Layout bot weight 1 } 

Layouts for children are set to:

 android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" // should be changed accordingly to your layout design. 

And here is the Java code for activity (keyboard up / down):

 View top, mid, bot; final View activityRootView = findViewById(R.id.loginLayout); activityRootView.getViewTreeObserver().addOnGlobalLayoutListener( new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { int heightDiff = activityRootView.getRootView() .getHeight() - activityRootView.getHeight(); if (heightDiff > 100) { //keyboard up mid.setVisibility(View.INVISIBLE); top.setLayoutParams(new TableLayout.LayoutParams( LayoutParams.MATCH_PARENT, 0, 0f)); bot.setLayoutParams(new TableLayout.LayoutParams( LayoutParams.MATCH_PARENT, 0, 1f)); } else {// keyboard down // v.setVisibility(View.VISIBLE); mid.setVisibility(View.VISIBLE); top.setLayoutParams(new TableLayout.LayoutParams( LayoutParams.MATCH_PARENT, 0, 2f)); bot.setLayoutParams(new TableLayout.LayoutParams( LayoutParams.MATCH_PARENT, 0, 3f)); } } }); 

On the keyboard, you need to change the weight transfer to the keyboard and to the keyboard down to return to the default (layout that you installed via xml / java). I checked the code on 2.3.x and above. And don't forget to use android:inputType="textFilter" for the EditText login and password to remove input suggestions and save some pixels. In your manifest for android:windowSoftInputMode="adjustResize|stateHidden" activity android:windowSoftInputMode="adjustResize|stateHidden" . stateHidden used so that the keyboard will not work when activity is loading. Hope it helps. Good luck.

Answer 1

They do this with relative layouts, adjustResize and android: layout_centerVertical. Basically, they have a linear layout for their main layout, with 3 equally weighted relative layouts inside it. Each of them has a height of 0dp, so they occupy equal thirds of the screen. The top RelativeLayout contains a logo centered vertically. The middle contains the input fields and the button, vertically centered one on top of the other. The bottom contains copyright text aligned to the bottom. The end result is that as the keyboard approaches, 3 relative layouts change to 1/3 of the new screen. Then their elements are centered on a new screen.

Remember that you need adjustResize mode mode to get this, if you use panning, it just moves up and the logo scrolls in the center.

Answer 2

In Eclipse, open "File | New | Other" and in the next Wizard, select "Android Activity", then on the next page select "Login" from the list of actions. This one has the exact layout you are talking about, and you can use it as a frame. It uses ScrollView to achieve the effect you are looking for.