two edit text in the middle of the screen - android

How can I layout the two edit txt fields in the middle of the screen.
Current layout is not align to middle of the screen (its on the left).
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
<EditText
android:id="#+id/edit_code_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="0"
android:inputType="number"
android:maxLength="1"
android:padding="10dp"
android:textSize="20sp"
/>
<EditText
android:id="#+id/edit_code_2"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="0"
android:inputType="number"
android:maxLength="1"
android:padding="10dp"
android:textSize="20sp" />
</LinearLayout>

You have used android:layout_gravity="center_vertical" so it's vertically centered. If you want it to be horizontally centered you can use
android:layout_gravity="center_horizontal"
or if you want both :
android:layout_gravity="center"
Update with comment :
This solution only works if you replace android:layout_width="match_parent" by android:layout_width="wrap_content" in your LinearLayout

You can make your Linear layout width as wrap_content
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
If its parent layout is Constraint Layout you can Constraint it to left and right side and LinearLayout will remain in middle.

Related

Adjust TextView to Vertically center in LinearLayout (horizental)

I have four TextView in LinearLayout with orientation="horizontal". Below in image, I want my fourth TextView to vertically center with respect to other views, In simple words, I want to move my fourth TextView a little bit up so it looks like in the center. I tried to add layout:gravity and margins but its not working.
Here is the code:
<LinearLayout
android:id="#+id/tv_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_main_feature_LL"
android:layout_marginStart="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_food_and_restaurant"
android:padding="3dp"
android:text="Resturant"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_tv_black_24dp"
android:padding="3dp"
android:text="LCD Tv"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:background="#drawable/rating_background"
android:drawableTop="#drawable/ic_local_parking_black_24dp"
android:padding="3dp"
android:text="Parking"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#android:color/white"
/>
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginBottom="20dp"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
</LinearLayout>
You could easily do that by adding android:layout_gravity="center_vertical" and removing your margin bottom.
<TextView
android:id="#+id/tv_plus_amenities"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_gravity="center_vertical"
android:background="#drawable/round_background"
android:text="+15"
android:textColor="#android:color/white" />
Add this prop to your #+id/tv_amenities LinearLayout
android:gravity="center_vertical"
Use android:layout_gravity="center_vertical" attribute in your TextView's
I checked your code inside a constraint layout and it's fine.
All I changed is in your last TextView:
android:layout_gravity="center"
Or
android:layout_gravity="center_vertical"
The layout_gravity=center looks the same as
layout_gravity=center_horizontal here because they are in a vertical
linear layout. You can't center vertically in this case, so
layout_gravity=center only centers horizontally.
This link can help you to fix your issue in LinearLayout or RelativeLayout.
You might find this link useful:What is the difference between gravity and layout_gravity in Android?

How to position vector image in RecyclerView item template

Is there a way to adjust the alignment of the menu dots in the RecyclerView item so that it's positioned exactly underneath the overflow dots in the Toolbar (i.e. in its original place where it should be)? I tried adjusting the item weights but that didn't work.
<LinearLayout
android:id="#+id/ll_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="100">
<TextView android:id="#+id/rvitem_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:ellipsize="marquee"
android:textColor="?android:attr/textColorPrimary"
android:fadingEdge="horizontal"
android:layout_weight="90"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="More options"
android:clickable="true"
android:focusable="true"
android:layout_gravity="end"
android:src="#drawable/ic_more_vertical"
android:background="#null"
android:tint="?attr/colorOverflow"
android:layout_weight="10"/>
</LinearLayout>
<TextView android:id="#+id/rvitem_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:ellipsize="marquee"
android:textColor="?android:attr/textColorSecondary"
android:layout_below="#id/ll_title"
android:fadingEdge="horizontal" />
Current result
Expected result
#MacaronLover, The approach you are taking to make the view align by assigning the weight seems to be in the right direction. I have taken your xml file and made some adjustments here:
<LinearLayout 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:orientation="horizontal"
android:paddingStart="16dp"
android:paddingTop="8dp"
android:paddingEnd="8dp"
android:paddingBottom="8dp">
<ImageView
android:id="#+id/firstImage"
android:layout_width="90dp"
android:layout_height="90dp"
tools:background="#000" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:text="Title A" />
<TextView
android:id="#+id/subTitleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
tools:text="Subtitle A" />
</LinearLayout>
<ImageView
android:id="#+id/secondImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_vertical_dots" />
</LinearLayout>
The idea here is to aligh our view with the toolbar's padding. By default, the toolbar sets 16dp padding on start and end.
So, to start with in our view, we set paddingStart and paddingEnd to be 16dp. Now, to adjust vertical padding, we set that to 8dp as it adjusts with the top and below items. Set, the orientation of parent to horizontal.
Then, we add first ImageView and sets its layoutWidth/Height to the values we want.
Then add the LinearLayout that holds the two TextViews and set it's orientation to vertical and layout_width to 0dp and add the two child TextViews.
Then finally add the overflow ImageView and provide the attributes. Since we set the first image and last image dimensions as static values, when the view is drawn, the width is allocated to these first and the remaining of the width goes to the textview container LinearLayout.
If we note at the pre-view attached, there might seem to be a bit more padding at the end. It is due to the dot image src we are assigning to the second image. It doesn't fill the ImageView and hence looks like extra padding. We can adjust this by adjusting the paddingEnd value of our parent LinearLayout.
Please comment if there are any confusions.
See this Image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:layout_marginStart="10dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title A"
android:textSize="20sp"
android:textColor="#000"
android:textStyle="bold"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subtitle A"
android:textSize="17sp"
android:textColor="#000" />
</LinearLayout>
<ImageView
android:layout_width="40dp"
android:padding="13dp"
android:layout_height="match_parent"
android:src="#drawable/ic_menu"/>
</LinearLayout>

layout_gravity isn't working as expected - just partially

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>

Unable to implement when try to center horizontal edittext in linearlayout and add a textview at its left side

I have a LinearLayout horizontal and have an EditText center_horizontal and everything is ok but when I try to add a TextView to its left side (of the EditText) the EditText moves to the right because both control TextView and EditText get centered. My problem is that I want that the EditText keeps in the center and the TextView to its left without moving the center position of the EditText. this is my code without the TextView
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTituloFechaAgenda"
android:orientation="horizontal"
android:weightSum="2"
android:id="#+id/ll1agenda"
android:background="#color/azul"
android:gravity="center_horizontal"
>
<EditText
android:inputType="date"
android:ems="10"
android:layout_alignParentTop="true"
android:id="#+id/etFechaAgenda"
style="#style/textoETFecha"
android:background="#drawable/style_edit_text1"
android:layout_height="37dp"
android:gravity="center_horizontal"
android:layout_width="150dp" />
</LinearLayout>
up to there the EditText is centered ok. next I added the TextView:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtTituloFechaAgenda"
android:orientation="horizontal"
android:weightSum="2"
android:id="#+id/ll1agenda"
android:background="#color/azul"
android:gravity="center_horizontal"
>
<TextView
android:text="Fecha: "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
style="#style/textoTitulosBlanco"
android:id="#+id/txtFechaAgenda" />
<EditText
android:inputType="date"
android:ems="10"
android:layout_alignParentTop="true"
android:id="#+id/etFechaAgenda"
style="#style/textoETFecha"
android:background="#drawable/style_edit_text1"
android:layout_height="37dp"
android:gravity="center_horizontal"
android:layout_width="150dp" />
</LinearLayout>
so when I add the TextView both elements are centered and my EditText moves to the right and lose the center position. I hope you can help me. thanks in advance...
One possible solution to your problem could be, (what I understood from the question) to add a third view on right side of edittext and set it's visibility to invisible. (So that it doesn't show itself but takes the space)
These do not work in Linear Layout. They work in Relative Layout
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
Use layout_weight to arrange editText and TextView
<TextView
android:text="Fecha: "
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
style="#style/textoTitulosBlanco"
android:id="#+id/txtFechaAgenda" />
<EditText
android:inputType="date"
android:ems="10"
android:id="#+id/etFechaAgenda"
style="#style/textoETFecha"
android:background="#drawable/style_edit_text1"
android:layout_height="37dp"
android:layout_width="0dp"
android:layout_weight="2"/>
android:layout_centerHorizontal="true"
Make center horizontal true for the edit text using Relative Layout. Try bellow code segment.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:padding="4dp"
android:text="Fecha:" />
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:padding="4dp"
android:text="Edit Text" />
</RelativeLayout>

Set Textview + Edittext + Button

I want to put in the same row a TextView, and Edittext and a button but I am having the problem that the button is not aligned properly to left and in small screens edittext fills entire with.
Small screen:
Big Screen:
My codification is as follows:
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/address_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right" >
<Button
android:id="#+id/go_button"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="Go" />
</RelativeLayout>
</LinearLayout>
Apply a weight to your EditText so it will take up as much room as it can while letting the other two elements do the normal wrap_content. To do this, remove the relative layout container and then change the EditText width to "0dp" and give it a layout_weight of "1" as follows:
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/address_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<Button
android:id="#+id/go_button"
android:layout_width="50dp"
android:layout_height="35dp"
android:text="Go" />
</LinearLayout>
First, many people will tell you that hint is Android's solution for not needing the label. I don't care if you use the label or not but it does save you space, especially on smaller screens. That was just an FYI.
Now, your RelativeLayout that only has a Button appears to be useless...I would remove that. You can use layout_weight so that each View takes up the appropriate amount of space. Make sure to make the layout_width="0dp". So it may look something like
<LinearLayout
android:id="#+id/layout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/address_textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center"
android:text="#string/address_textview"
android:textStyle="bold" />
<EditText
android:id="#+id/address_edittext"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:hint="#string/address_textview_hint"
android:imeActionLabel="#string/search_button"
android:imeOptions="actionDone"
android:inputType="textCapWords"
android:nextFocusDown="#id/address_edittext"
android:nextFocusUp="#id/address_edittext"
android:singleLine="true" />
<Button
android:id="#+id/go_button"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_weight="1"
android:text="Go" />
</LinearLayout>
Here I used 2,3,1 for the weights of your TextView, EditText, and Button respectively. You may need to change those to get exactly what you want but that should give you a start.
Layout weigth is ideal for designing layouts that adjust to screen size. However, make sure to set layout_width to 0dp, or it won't work properly.
Use like this:
android:layout_width="0dp"
android:layout_weight="1"
I'm going to assume you mean the button is not properly aligned to the right.
It's because your RelativeLayout's android:width="wrap_content", but it should be android:width="match_parent".
Also, you'd be better off setting your EditText's android:width="0dp" and adding android:weight="1" so that it expands/contracts between screen sizes.

Categories

Resources