I a have made a registration form in which i have two buttons.Now what i want is that when the keyboard is displayed the two buttons which are at the bottom should be displayed above the keyboard and not hidden under the keyboard.To achieve this the code i wrote didn't gave me any success.
Xml Code
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:inputType="textPersonName"
style="#style/EditText"
android:hint="#string/firstname"
android:id="#+id/et_first_name" />
<EditText
android:inputType="textPersonName"
style="#style/EditText"
android:hint="#string/lastname"
android:id="#+id/et_last_name" />
<Button
style="#style/EditText"
android:text="#string/country"
android:id="#+id/bt_country" />
<Button
style="#style/EditText"
android:text="#string/gender"
android:id="#+id/bt_gender" />
<EditText
style="#style/EditText"
android:inputType="phone"
android:hint="#string/mobileno"
android:id="#+id/et_mobile_no" />
<EditText
style="#style/EditText"
android:inputType="textEmailAddress"
android:hint="#string/email"
android:id="#+id/et_email" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
style="#style/EditText"
android:id="#+id/bt_reg_cancel"
android:text="#string/cancel"
android:layout_gravity="bottom"
android:layout_weight="1" />
<Button
style="#style/EditText"
android:text="#string/save"
android:id="#+id/bt_reg_save"
android:layout_gravity="bottom"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
Please do help
In the Android Manifest, give the property android:windowSoftInputMode="adjustResize". This will resize your layout when keyboard shows.
So if something is on the bottom, it will show above the keyboard once it shows
"Please can u show me the code with relative layout, it would be very helpfull??? – user3917131 7 mins ago "
Solution :-
) Either put your bottom layout in the scrollview itself. Then even if the keyboard is showed, you can scroll it.
2.) Weight Approach :-
ScrollView -> 0.7
RelativeLayout -> 0.3 -> In it write your bottom layout and give the property align parent bottom true.
In this approach, your scrollview will take only 0.7 of screen as per weight guidelines and the rest by your bottom layout
3.) remove scrollview, instead make it linearlayout. Make Top Parent Relative Layout and give the property align parent bottom true to your bottom layout and the layout above property to your linearlayout
You should set leyout_weight of ScrollView to 1 for example. And set leyout_height of LinearLayout to "wrap_content". And that would be nice to set layout_height of ScrollView to 0dp, so LinearLayout can manage it`s heigth.
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<ScrollView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
style="#style/EditText"
android:id="#+id/bt_reg_cancel"
android:text="#string/cancel"
android:layout_gravity="bottom"
android:layout_weight="1" />
<Button
style="#style/EditText"
android:text="#string/save"
android:id="#+id/bt_reg_save"
android:layout_gravity="bottom"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
That should do the trick.
Related
I would like to place a Switch right of a TextInputLayout, with match_parent parameters on the TextInput and a margin.
Placing the switch to the left seems to work, however it is hidden when placing it to the right.
See the two images below:
As you can see the switch places itself wrongly.
Here is my XML code. The main layout is a CoordinatorLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Social Networks"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/myprofile_google"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:textColor="#color/blue_grey_800"
android:layout_height="wrap_content"
android:hint="Google +" />
</android.support.design.widget.TextInputLayout>
<Switch
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_vertical"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Change the layout_width of your TextInputLayout to 0dp, and add this attribute to it as well:
android:layout_weight="1"
What's happening right now is that your TextInputLayout has a width of match_parent. What this will do is fill the entire remaining space of the parent (this is somewhat unique to LinearLayout). When your Switch is on the left, it gets enough space for it and then the TextInputLayout takes up the rest. However, when the Switch is on the right, the TextInputLayout takes up all the space first!
Using weight instead will make sure that other components get the space they need before the weighted component gets the extra space.
You're missing two bits in your XML.
Firstly, the orientation on your linear layout containing both your input layout and switch. Secondly, use weighting to show both items as you've specified that the text input layout should match the parent (fill the view width in this case).
This layout produces your desired output:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Social Networks"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="40dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/myprofile_google"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:textColor="#android:color/holo_red_dark"
android:layout_height="wrap_content"
android:hint="Google +" />
</android.support.design.widget.TextInputLayout>
<Switch
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center_vertical"/>
</LinearLayout>
</LinearLayout>
I would suggest you use RelativeLayout instead of LinearLayout, or even better redo the whole layout in a ConstraintLayout.
The RelativeLayout implementation would probably be something like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:id="#+id/textInputLayout"
android:layout_toStartOf="#+id/switch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/myprofile_google"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:textColor="#color/blue_grey_800"
android:layout_height="wrap_content"
android:hint="Google +" />
</android.support.design.widget.TextInputLayout>
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_gravity="center_vertical"/>
</LinearLayout>
Here's the problem parent and it's contents from my xml file:
<RelativeLayout
android:id="#+id/group_chat_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="5dp"
android:background="#drawable/transparent_background2" >
<TextView
android:id="#+id/send_msg_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#drawable/transparent_background2"
android:text="Send" />
</RelativeLayout>
The parent is clearly not wrapping the contents.
If I remove the alignParentBottom="true" attribute from the child, it looks perfect.
However I need this particular child to stay anchored to the bottom because I have a multiline edittext view in this same parent (I did not include it since this problem still occurs with the multiline edittext commented out). As the edittext expands with more input from the user, the Send button should stay anchored to the bottom of the parent. Here's what it should look like (multi-lined EditText not included):
That's a limitation for a relative layout. See verified answer in this
link
I'm doing the same objective and came up with this solution:
<RelativeLayout
android:id="#id/comment_input_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/light_gray"
android:padding="4dp">
<LinearLayout
android:layout_width="match_parent"
android:gravity="bottom"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#id/comment_input_edit_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/label_add_a_comment"
android:inputType="textCapSentences|textMultiLine"
android:maxLines="6"
android:scrollbars="vertical" />
<Button
android:id="#id/send_comment_button"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/label_send" />
</LinearLayout>
<ProgressBar
android:id="#id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="gone" />
</RelativeLayout>
the android:layout_weight="1" causes the editText to take up the free space available as long as the other siblings doesn't have weight.
Hope this helps.
I want to present in my layout an EditText and a Button side by side with a small space (margin) between them. I don't want to set a fixed size (I think that's a bad habit).
How to do that?
My Try:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/btn_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:text="Search" />
</RelativeLayout>
You're using a RelativeLayout; however, you cannot created a flexible design within that type of ViewGroup. You must use a LinearLayout.
We use android:layout_weight="1" along with the android:layout_width="0dp" to create a flexible control. Adjust the weight number for different size ratios.
Afterwards, we use android:layout_margin on both controls so the resulting weighted size of each is equal.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginRight="8dp" />
<Button
android:id="#+id/btn_search"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Search"
android:layout_marginLeft="8dp" />
</LinearLayout>
You can use Linear layout with horizontal orientation and add an EditText and Button in the following way
<LinearLayout
orientation="horizontal"
layoutwidth="match_parent"
layoutheight="wrap_content">
<EditText
layoutwidth="0dp"
layoutheight="wrap"
layout_weight=".8"/>
<Button
layoutwidth="0dp"
layoutheight="wrap"
layout_weight=".2"/>
</LinearLayout>
Hope this will solve your problem. Make sure to change the weights according to your needs.
Thanks
Use Linear layout to show both side by side and use 'match_parent' and 'wrap_content' appropriately.
Here's a piece of xml code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" >
<EditText
android:id="#+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="#+id/go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go!!" />
</LinearLayout>
I have couple textfields and button a the bottom inside LinearLayout and it looks ok. I want to add around ScrollView so when keyboard shows that I can scroll. When I add ScrollView my button from bottom and shows up on center screen. (If there is no ScrollView it is a the bottom of screen, where it should be). What to change to make this works and button be inside scroll but on the bottom of screen.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:layout_width="269px"
android:layout_height="161px"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/show" />
<com.example.widgets.CustomTextView
android:id="#+id/txt_message"
style="#style/paragraph"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80px"
android:text="#string/pin/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="150px"
android:layout_weight="1"
android:gravity="top|center_horizontal"
android:orientation="vertical" >
<com.example.widgets.CustomTextView
style="#style/caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:text="#string/pin_enter" />
<com.example.widgets.CustomEditText
android:id="#+id/txt_code"
style="#style/pin"
android:layout_width="310px"
android:layout_height="110px"
android:layout_gravity="center_vertical|center_horizontal"
android:background="#drawable/selector_edit_text"
android:gravity="center_vertical|center_horizontal"
android:maxLength="4"
android:numeric="integer"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:textAlignment="center" />
</LinearLayout>
<Button
android:id="#+id/btn_save"
style="#style/button"
android:layout_width="625px"
android:layout_height="110px"
android:layout_gravity="center_horizontal"
android:background="#drawable/button"
android:enabled="false"
android:text="#string/login" />
</LinearLayout>
</ScrollView>
You basically can not.
ScrollView's child is per definition measured as wrap_content. That's the reason, why your inner Views is shrinked to the minimum size fitting the content.
Move the Buttons out of the ScrollView (on the same level of hierarchy), if you want to have them fixed on the bottom.
I've been trying to create what I think is a relatively simple layout for the past hour.
What I want is to have an edit text take up the vertical real estate left over after my buttons and labels are put onto the screen. I've found plenty of information on how to do that here at SO and I feel like I've implemented that information here (layout_weight and 0dip height), however as soon as I put in the 0dip height my edittext is just not displayed.
What am I missing here?
Edit: Turns out that my Layout2 was set to match_parent and this leaves 0 available space for the weighted children to occupy. I changed the behavior there to wrap_content and all worked great.
I'm targeting Android 2.3.3
Here's my layout xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/description"
android:textAppearance="?android:attr/textAppearanceSmall" />
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="0dip"
android:inputType="textMultiLine"
android:layout_weight="1" >
<requestFocus />
</EditText>
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/save" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/clear" />
</LinearLayout>
</LinearLayout>
because linearLayout2 fills out the parent. linearLayout2 must have layout_weight behaviour or own height not match_parent.