My interface looks like this:
XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/profile_fields_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_person_name_label" />
<EditText
android:id="#+id/person_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_emailId_label" />
<EditText
android:id="#+id/person_emailId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_phoneNo_label" />
<EditText
android:id="#+id/person_phoneNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="10"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_password_label" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_retypePassword_label" />
<EditText
android:id="#+id/retype_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/learner_tutor_status_label" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/learner_tutor_status_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<!--Floating Button-->
<Button
android:id="#+id/create_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/create_account_string"
style="#style/Widget.AppCompat.Button.Colored"/>
</FrameLayout>
Now, you can see at the bottom there is I am here to.... This is a dropdown and when I choose one of the options, my code dynamically adds a few views to the hierarchy but the problem is they are not visible(not all of them; just I am a... is visible.)
I checked the layout hierarchy through the Layout inspector and turns out that the hierarchy is alive but the floating button(Create Account) has overshadowed it.
Now, I know if I were to replace the root FrameLayout with a LinearLayout, it would be visible but the problem is that if then I would click on a EditText button, the keypad would cover the screen with the Create Account button as covered too. I actually want this button to be on the screen at all times.
Does anyone how can I get around this problem?
Your layout is not totally correct because your floating button hides the bottom of your ScrollView all the time. You should replace the FrameLayout with a vertical LinearLayout (just like you said) and then specify the window behavior of your activity when the soft keyboard pops up with the windowSoftInputMode attribute in your activity element on the AndroidManifest.xml file. If you use android:windowSoftInputMode="adjustResize", the window will resize accordingly and the button should be always visible.
Related
I have a horizontal layout with two views in it: an EditText that will show a chosen path, and a "Browse" Button to the right of the EditText.
I want the EditText to expand as required, but not to the extent that it pushes the Button off the screen.
Here is my current xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
I have tried all types of layout, I have tried using toLeftOf, toRightOf and everything I can think of, I think I now need help if I am to get this working.
You can achieve this using layout weights:
<LinearLayout
android:layout_width="match_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
This xml can be interpreted as saying: "let the EditText take up all the horizontal room that is not filled by other views" (in this case, the only other view is the Button).
Try with RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"
android:layout_toLeftOf="#+id/browse_button"
android:layout_alignParentLeft="true" />
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_alignParentRight="true" />
</RelativeLayout>
I'm facing a View mixing up issue when I put Fragment which contains a EditText in a ViewPager.
You can see my actual layout design in image_1 .
Case 1: I put the Fragment inside a ViewPager and clicked on first EditText in the layout to enter something. But the result was image_2. All the View got mixed because there in no enough space for containing all View. But with respect to android's actual behavior all the Views inside the layout should move up and focus the current selected EditText.
Case 2: I put Fragment directly to Activity without ViewPager. I tried the same thing.(image_3). I got desired android behavior here.
1) Why is it so?2) How can I solve this issue?
image_1
image_2
image_3
My layout code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/container_dropshadow" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/content_margin"
android:background="#color/dark_background" >
<Button
android:id="#+id/sendButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:onClick="send"
android:text="#string/send" />
<EditText
android:id="#+id/descriptionEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/sendButton"
android:hint="#string/description"
android:inputType="textMultiLine|textNoSuggestions"
android:maxLength="500" />
<EditText
android:id="#+id/departmentEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/descriptionEditText"
android:hint="Department"
android:inputType="textNoSuggestions"
android:singleLine="true" />
<EditText
android:id="#+id/subjectEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/departmentEditText"
android:hint="Subject"
android:inputType="textNoSuggestions"
android:singleLine="true" >
<requestFocus />
</EditText>
<LinearLayout
android:id="#+id/selectAFileLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/subjectEditText"
android:layout_margin="8dp"
android:background="#drawable/bg_browse"
android:gravity="center_horizontal|center_vertical"
android:orientation="horizontal" >
<TextView
android:id="#+id/fileTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="6"
android:gravity="center"
android:padding="2dp"
android:text="Select a file"
android:textStyle="italic" />
<Button
android:id="#+id/browseFileButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="getFile"
android:text="..." />
</LinearLayout>
<TextView
android:id="#+id/messageTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/selectAFileLinearLayout"
android:layout_marginBottom="#dimen/upload_file_title_margin_bottom"
android:gravity="center_horizontal"
android:text="#string/upload_files_message"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff"
android:textSize="#dimen/heading_font_size" />
</RelativeLayout>
</FrameLayout>
Add the following in manifest for your activity
android:windowSoftInputMode="adjustPan"
I have a vertical layout: 2 text field and a horizontal bar of buttons:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff00"
android:orientation="vertical"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_send"
android:layout_weight="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
</LinearLayout>
</LinearLayout>
I want the button bar to have wrap_content size policy (can't even have them fixed size because this app has different localizations). I also want the text fields to have the same width as the button box. Here's how the above xml looks in designer (Eclipse + ADT) with platform 17 selected (and how I want it to look). Colors are just for easy debugging:
And here's how it looks on an Android 4.1 tablet:
This layout is used as a custom layout to a Dialog. No manipulations has been done to the Dialog apart from setting content and title.
Interesting fact: it looks exactly as I want it to (and same as ADT designer shows) on Android 3.1 tablet. But not on 4.1.
How can I achieve the desired layout?
You might want to use RelativeLayout to accomplish what you're looking for. Try changing your xml to the following:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="#ff00ff00"
android:padding="4dp" >
<EditText
android:id="#+id/et_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textEmailAddress" >
</EditText>
<EditText
android:id="#+id/et_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/buttonbar"
android:layout_alignRight="#+id/buttonbar"
android:layout_below="#+id/et_email"
android:layout_marginTop="2dp"
android:background="#ff00ffff"
android:inputType="textMultiLine"
android:maxLines="5"
android:minLines="5" />
<RelativeLayout
android:id="#+id/buttonbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/et_comment" >
<Button
android:id="#+id/btn_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toLeftOf="#+id/btn_show"
android:text="OK" />
<Button
android:id="#+id/btn_show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Some very long text" />
<Button
android:id="#+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_show"
android:layout_alignTop="#+id/btn_show"
android:layout_toRightOf="#+id/btn_show"
android:text="Cancel" />
</RelativeLayout>
</RelativeLayout>
This seems silly but it seems to work. Try putting in a nested layout. Change your outer layout width/height to fill parent. Then, inside that make another linear layout with all of your views and such. Give the inner LinearLayout the wrap_content values and that should do it. There's got to be a better way to do it than this but I can't think of it at the moment.
I have a layout where I have RelativeLayout with some Edittext which use the default style and are baseline aligned with some Textfield. The issue is the Edittext are losing the default Holo Light style line (the line under the text). If I take out the baseline then the line is shown though, of course, the Edittext loses the alignment.
I suspect this is bug or at least a very strange behavior, but I will give it a try by asking here in SO :-)
This is how it looks (Edittexts are the blank spaces to the right of Opens and Closes TextViews):
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dip"
android:layout_weight="50"
android:orientation="vertical" >
<EditText
android:id="#+id/store_name_edit"
android:hint="#string/store_name"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_code_edit"
android:hint="#string/store_code"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_group_edit"
android:hint="#string/store_group"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_type_edit"
android:hint="#string/store_type"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<EditText
android:id="#+id/store_address_edit"
android:hint="#string/store_street"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="20dip"
android:textSize="20sp"
android:text="#string/store_description" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/opening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_opening_hours" />
<TextView
android:id="#+id/opens"
android:layout_below="#id/opening"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_open" />
<EditText
android:id="#+id/opens_edit"
android:layout_toRightOf="#id/opens"
android:layout_alignBaseline="#id/opens"
android:layout_height="wrap_content"
android:layout_width="100dip"
android:textSize="18sp" />
<TextView
android:id="#+id/closes"
android:layout_alignBaseline="#id/opens"
android:layout_toRightOf="#id/opens_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/store_close" />
<EditText
android:id="#+id/closes_edit"
android:layout_alignBaseline="#id/opens"
android:layout_toRightOf="#id/closes"
android:layout_height="wrap_content"
android:layout_width="100dip"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
My guess is the containing RelativeLayout somehow isn't expanding to allow for the lines on the EditTexts to show.
Change the containing RelativeLayout to:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp">
I realise this may not be the best solution but it's a start. Another option might be to try using alignParentBottom instead of baseline on all the "bottom" row elements.
Yes, this is yet another edittext grow question on SO. And yes I've already gone through all those edittext grow questions. But this ones a bit specific.
UI:
A simple android layout with edittext and button below it. When text is less, the edittext view is still covering whole screen leaving space for button below.
Once user starts entering text, edittext grows vertically to accommodate text. At the same time, the button should also kept pushing downwards to let edittext grow.
User can vertically scroll through screen to view full text.
UI after entering significant text:
Here's the layout with edittext and button below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:clipToPadding="false"
android:fadingEdge="none"
android:fillViewport="true"
android:padding="13dp"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- some fixed width image -->
<ImageView
android:id="#+id/someimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:src="#drawable/page_white_text" />
<EditText
android:id="#+id/some"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/someimage"
android:background="#null"
android:gravity="top"
android:minLines="10"
android:minHeight="50dp"
android:textColor="#222222"
android:textSize="15dp"
android:typeface="serif" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
This works more or less. But when I enter to much text, instead of pushing button downwards. It goes behind it like:
Any help here is much appreciated. Thanks :)
Here's my recommendation: inside the ScrollView, put a RelativeLayout in which you can place every element in a certain order using android:layout_below. For the auto-growing of your EditText, use this solution.
Let's see an example:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center">
<RelativeLayout
android:id="#+id/general2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20sp" >
<TextView
android:id="#+id/textFirstOpinion"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/titleFirstOpinion"
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#FFFFFF"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/fieldFirstOpinion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textFirstOpinion"
android:minHeight="80sp"
android:isScrollContainer="true"
android:inputType="textMultiLine"
android:textSize="20sp"
android:gravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_below="#id/fieldFirstOpinion"
android:layout_centerHorizontal="true"
android:layout_marginTop="37sp"
android:textSize="23sp"
android:text="#string/textSendButton"
android:gravity="center_horizontal"
android:padding="10dp" />
</RelativeLayout>
</ScrollView>
try adding android:layout_below="#id/some" in your LinearLayout like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_below="#id/some" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Since you want the button to be at the bottom of the page, add the following line
android:layout_below="#+id/some"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
in your LinearLayout code here like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/some"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
Also make sure the layout:height parameter of EditText is set to wrap_content
Try this and tell me if it works or not