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>
Related
I am trying to make a checkbox and an edittext field side by side inside my LinearLayout. This is my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bottom_dialog"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/report_bill_period"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Incorrect bill period"
android:layout_marginEnd="10dp"
android:layout_marginStart="30dp"
android:layout_marginBottom="5dp">
</com.google.android.material.checkbox.MaterialCheckBox>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/report_bill_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Incorrect bill amount"
android:layout_marginEnd="10dp"
android:layout_marginStart="30dp"
android:layout_marginBottom="5dp">
</com.google.android.material.checkbox.MaterialCheckBox>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.google.android.material.checkbox.MaterialCheckBox
android:id="#+id/anything_else"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:layout_marginBottom="5dp">
</com.google.android.material.checkbox.MaterialCheckBox>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:background="#color/white"
android:hint="Anything else?"
android:textColor="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:inputType="textCapCharacters"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="center"
android:lines="10"
android:maxLines="10" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</LinearLayout>
This is the output that I get:
enter image description here
As you can see in the screenshot, the third checkbox isn't aligned properly with the first two checkboxes. How do I fix this issue?
Set linear layout gravity to center
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<!-- checkbox and textfield code -->
</LinearLayout>
You can also use a relative layout
Or you can also wrap checkbox and textfield inside a constraint layout and constraint the children in such a way that they become vertically centered
Add minWidth and minHeight for Checkbox. It will remove the default padding.
android:minWidth="0dp"
android:minHeight="0dp"
I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#string/title_day"
android:textStyle="bold"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="end|center_vertical" />
</LinearLayout>
</LinearLayout>
And this looks like this:
And I want the last TextView with id tv_fail to be pinned to right end of screen. I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end. How to fix it?
I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end.
This is due to how LinearLayout works; your understanding of layout_gravity is generally correct.
LinearLayout takes its children and lays them out in a line, and the children will all be packed towards the "start" of the LinearLayout. In other words, a horizontal LinearLayout will ignore the horizontal component of the layout_gravity attribute of a child.
There are a few ways to work around this. The one that I think works best for your scenario is to make the TextView stretch to fill all the remaining space in the LinearLayout (using layout_weight), and then have the TextView position its text at the end of its content area (using gravity).
<TextView
android:id="#+id/tv_fail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="center_vertical"
android:gravity="end"/>
If you just want to set text inside of your last TextView to end then you should use :
android:gravity="end"
for TextView gravity use:
android:layout_gravity="center"
Difference between android:gravity & android:layout_gravity is that first one arrange content inside of any view with given gravity while second one arranges view according to given gravity.
Updated code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="title_day"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="+22"
android:textSize="16sp" />
</LinearLayout>
I have read several answers on how to align a card view horizontally. I am trying to achieve the following:
Desired Result
This is so far the code I have written (I have followed around 20 answers from different posts, none which have helped me. The problem is the margin or space on the left and the right, I need that space, but the card view expands the whole width.
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/mProjectCDCNumCardView"
android:layout_marginStart="7dp"
android:layout_marginTop="7dp"
android:text="DETAIL"
android:textColor="#000"
android:textSize="16sp" />
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mProjectCDCNumCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="13dp"
card_view:cardCornerRadius="2dp"
card_view:contentPaddingLeft="50dp"
card_view:contentPaddingRight="#dimen/activity_horizontal_margin"
card_view:contentPaddingTop="20dp"
card_view:contentPaddingBottom="#dimen/activity_vertical_margin"
android:background="#drawable/cardview_normal"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textView8">
<EditText
android:id="#+id/mProjectCDCNumEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/editborder"
android:hint="Project Number"
android:inputType="textPersonName"
android:padding="10dp" />
</android.support.v7.widget.CardView>
<TextView
android:id="#+id/mProjectAddressLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/editborder"
android:layout_below="#id/mProjectCDCNumCardView"
android:ems="16"
android:padding="10dp"
android:hint="Location"
android:textColor="#000"
android:textSize="18sp"
android:drawableRight="#drawable/left_arrow"/>
</RelativeLayout>
Thanks!
little late to the party here but I really like using ConstraintLayouts. It is super easy to center Views in them.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
... Content ...
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
This code will center CardView inside of the ConstraintLayout that has the same width as parent. The CardView has width of 200dp and thanks to the constraints it will be centered horizontaly in the Layout.
More info about ConstraintLayout.
You just add android:layout_marginStart and android:layout_marginEnd to your cardview.
The height attribute of your layout must be match_parent.
In your CardView component, add a LinearLayout component.
Add android:gravity="center_horizontal" property to your LinearLayout.
In your LinearLayout component add your EditText component.
<android.support.v7.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardUseCompatPadding="true"
app:cardElevation="4dp"
app:cardCornerRadius="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<EditText
android:id="#+id/mProjectCDCNumEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/editborder"
android:hint="Project Number"
android:inputType="textPersonName"
android:padding="10dp" />
</LinearLayout>
I have used TextInputLayout to an EditText and there is a TextView just below to it. I see there is an extra space between TextInputLayout and TextView. I want to remove that extra space. Pics attached with and without TextInputLayout. I have enabled boundaries in developer options so pic may look confusing but informative.
Below is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:background="#drawable/edit_text_border_drawable"
android:gravity="center"
android:hint="#string/current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="#string/forgot_password"
android:textSize="17sp" />
</LinearLayout>
There is a known issue with TextInputLayout which displays additional padding once an error is displayed and isn't removed when the error is cleared or setErrorEnabled(false) is called.
https://code.google.com/p/android/issues/detail?id=200137
A workaround for this issue is to manually hide the bottom child layout when the error is cleared:
textInputLayout.setError(null);
if (textInputLayout.getChildCount() == 2)
textInputLayout.getChildAt(1).setVisibility(View.GONE);
Looks like this is not extra space, but just the bottom half of the TextInputLayout widget. I don't have your background resource, but this is essentially what your code looks like on my device. You could try the EditText without putting it inside a TextInputLayout widget if you want, and then you wouldn't have the extra space on the bottom or top.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TextInputLayout
android:id="#+id/layoutCurrentPW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_green_light"
app:errorEnabled="true">
<EditText
android:id="#+id/editTextCurrentPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="30dp"
android:gravity="center"
android:background="#android:color/white"
android:text="current_password"
android:layout_gravity="bottom"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</android.support.design.widget.TextInputLayout>
<TextView
android:id="#+id/textForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:text="forgot_password"
android:textSize="17sp" />
Try this
android:layout_alignStart="#id/layoutCurrentPW"
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.