Align TextView with EditText inside Relative layout - android

I saw some posts regarding alignment of TextView with EditText on Android canvas. But, I didn´t found answer which could help me in the right way. My desire is to have TextView and EditText in a following manner:
(TextView) (EditText) (TextView) (EditText)
(TextView) (EditText) (TextView) (EditText)
(TextView) (EditText) (TextView) (EditText)
(TextView) (EditText)
EditText width and height are predefined (values given in dp). Also, top and left margin of TextEdit is given. That means that I have to place EditText of certain size and to certain position on the screen. This is ok, and I achieved it using one RelativeLayout container.
But I should also put label(TextView) beside EditText in such a way that i don´t specify any value in dps, because textviews have to placed automatically with respect to EditText. For example
Street: [Main Street]
Street Number: [ 4 ]
I tried using Relative layout attributes:
layout_alignTop="#id/EditText"
layout_toLeftOf="#id/EditText"
But, TextView is not showed, because it is placed left of EditText but exactly on the left margin(top alignment works) and not "exactly" beside EditText (2dp or 3dp left from EditText) like I want.
I also tried other attributes but no result.
Is there some native android attribute for putting labels near EditText like i want?
Is there some attribute in Relative layout that can do job for me?
Is there way just to specify that TextView is 3 dp left from EditText?
Any other solutions?
Thanks
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/EditText1"
android:hint="Write..."
android:layout_width="80dp"
android:layout_height="22dp"
android:layout_marginTop="61dp"
android:layout_marginLeft="160dp"
android:background="#android:drawable/editbox_dropdown_light_frame"/>
<TextView
android:id="#+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:text="Text"
android:layout_toLeftOf="#+id/EditText1"
android:layout_alignTop="#+id/EditText1"/>
<EditText
android:id="#+id/EditText2"
android:hint="Write..."
android:layout_width="200dp"
android:layout_height="22dp"
android:layout_marginTop="61dp"
android:layout_marginLeft="490dp"
android:background="#android:drawable/editbox_dropdown_light_frame"/>
<TextView
android:id="#+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:text="Text"
android:layout_alignTop="#+id/EditText2"
android:layout_toLeftOf="#+id/EditText2" />
</RelativeLayout>

You are using layout_margin left which is creating the problem , If your need is just this much why not use TableLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_marginTop="61dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1">
<TextView
android:id="#+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:text="Text" />
<EditText
android:id="#+id/EditText1"
android:hint="Write..."
android:layout_width="80dp"
android:layout_height="22dp"
android:background="#android:drawable/editbox_dropdown_light_frame"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
>
<TextView
android:id="#+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:text="Text" />
<EditText
android:id="#+id/EditText2"
android:hint="Write..."
android:layout_width="80dp"
android:layout_height="22dp"
android:background="#android:drawable/editbox_dropdown_light_frame"/>
</LinearLayout>
</TableRow>
</TableLayout>
Just copy the whole TableRow tag and paste it as many row you want
**But If you still want relative layout here's the fix code for you ** just change margin value correctly as per your need
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:text="Text"
android:layout_marginTop="57dp"
android:layout_marginLeft="80dp"
/>
<EditText
android:id="#+id/EditText1"
android:hint="Write..."
android:layout_width="80dp"
android:layout_height="22dp"
android:background="#android:drawable/editbox_dropdown_light_frame"
android:layout_alignTop="#+id/TextView1"
android:layout_toRightOf="#+id/TextView1"
android:layout_toEndOf="#+id/TextView1" />
<EditText
android:id="#+id/EditText2"
android:hint="Write..."
android:layout_width="80dp"
android:layout_height="22dp"
android:background="#android:drawable/editbox_dropdown_light_frame"
android:layout_alignTop="#+id/EditText1"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="25dp"
android:layout_marginEnd="25dp" />
<TextView
android:id="#+id/TextView2"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:text="Text"
android:layout_alignTop="#+id/EditText2"
android:layout_toLeftOf="#+id/EditText2"
android:layout_toStartOf="#+id/EditText2" />

Just arrange your XML, you can achieve what you want using padding.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="16dp"
android:paddingRight="16dp">

Related

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>

how to ensure the min space between two views in Relativelayout

I have two TextViews in a RelativeLayout. One to the left and the other one to the right. Both of them shows a string which may become very long. I want to make a min space of 10dp between two TextViews and let the right one have ellipse if no enough space.
I have below layout definition which does not work. The right TextView may cover the first one if it is very lone.
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp">
<TextView
android:id="#+id/left_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:text=""/>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
The only way I can do is to set the max length to the right one. But this is not what I want because if the left one is short, i want the right one to be longer than the maxWidth.
And when I added "toRightOf" this work but the textView width becomes too long for a short string shown in it. That is not acceptable
add Add android:layout_toRightOf="#+id/left_one in right_one textview
remove android:layout_alignParentRight="true" from right_one textview
replace android:layout_marginRight="10dp" by android:layout_marginLeft="10dp" in right_one textview
For right_one textview to remain right if it is short replace right_one textview portion by
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="10dp"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/left_one>
<TextView
android:id="#+id/right_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
/>
</RelativeLayout>
You can do like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<TextView
android:id="#+id/left_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="7dp"
android:gravity="bottom"
android:layout_weight="0.3"
android:text="Left text "/>
<TextView
android:id="#+id/right_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_weight="0.7"
android:layout_marginLeft="10dp"
android:text="edkjfcnrdskjvkjrdfvsxsdcndsjkvnjksdnvkj
sdjkvbksdbvkj zskjvn jsdnbjkvfdbde"/>
</LinearLayout>
Add:
android:layout_toLeftOf="#+id/right_one"
android:layout_marginRight="10dp"
to your left_one TextView.

Fix height of android EditText with a background

How can I get the button and the editText to have the same height? I want the EditText to have the height of the button View
<com.devmarvel.creditcardentry.library.CreditCardForm
android:id="#+id/credit_card_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dip_40"
android:layout_marginLeft="#dimen/dip_20"
android:layout_marginRight="#dimen/dip_20"
app:text_color="#color/textColor"
app:hint_text_color="#color/hintColor"
app:cursor_color="#color/hintColor"
app:include_helper="true"
app:include_zip="false"
app:input_background="#drawable/back_gray_border_round"
app:include_exp="true"
app:include_security="true"
app:card_number_hint="#string/cardhint" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dip_10"
android:layout_marginRight="#dimen/dip_20"
android:layout_marginLeft="#dimen/dip_20"
android:text="#string/save"
android:id="#+id/saveBtn"
android:layout_gravity="center_horizontal"
android:background="#drawable/rounded_corner_button"
android:textAllCaps="false"
android:textSize="#dimen/normal_font_size"
android:textColor="#color/white"
android:textStyle="bold" />
I am using a library defined editText, but it does not have any height attribute.
Add Both EditText and Button in RelativeLayout and use alginTop and alignBottom property on EditText.Have a look on code.I have hard code button size for illustration purpose.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="test"/>
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button"
android:layout_alignTop="#+id/button"
android:text="test2"/>

Can't get Textviews right in layout

This is what I need to achieve:
|TEXTVIEW1|TEXTVIEW2|BUTTON|
TV1 can grow as much as it wants but only taking the space it needs to show the text inside. If the text is bigger than the space it has then it will ellipsize.
TV2 has to be always to the right of the text of TV1 and has to show all its content. It cannot have ellipsize. It always has to show its text.
TV1 and 2 are single line.
BUTTON is fixed at the right of the screen.
Example 1:
TV1 = THIS IS A TEXT WHERE THE TEXT IS TOO LONG
TV2 = 1923
| THIS IS A TEXT W...1923 BUTTON|
Example 2:
TV1 = JUST THIS
TV2 = 1923
| JUST THIS1923________BUTTON|
(ignore the underscores)
I have tried a thousand different combinations with weights, wrap_content, etc... and still can't get it right.
Help please!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tv1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:singleLine="true"*
android:ellipsize"end" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
This is the sizing you would need to achieve the fitting you desire. After these xml attributes you can add any other styles you wanted to apply like color or text. I starred the single line because this will stop it from growing vertically. If you want the text to be aligned in a row even when the text is smaller than the screen, add android:gravity="right" to tv1 only.
I created some little thing for you, I think its what your looking for. The thing you might have not known about is maxLength and singleLine part I believe.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:maxWidth="100dp"
android:singleLine="true"
android:text="I Just this helo this is long"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"/>
</RelativeLayout>
Try this.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textview1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_weight="1.0"
android:text="textview1" />
<TextView
android:id="#+id/textview2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/textview1"
android:layout_weight="1.0"
android:text="textview2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="button"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>

How to set the max textsize in android?

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/lbd_user_pt_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/lbd_user_pt"
android:paddingRight="10dp"
android:text="#string/leader_board_my_pt"/>
<TextView
android:id="#+id/lbd_user_pt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:text="90000"
android:textDirection="ltr" />
</RelativeLayout>
Currently I have a relative layout that is the horizonal line. And there is two textview inside . Since the length of the relative layout is too small, the 2 textview overlay or behave werid
like:
[user_pt_tag user_pt]
The problem is , I would like the user pt align right and expand to left , also , the common textsize is 20sp , if the pt overlap the tag , the size will be reduce. (the pt textview is at most 5 digits , that will no more digit than that) How to achieve that? Thanks
//try to use Linear Layout rather than Relative Layout like below
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:id="#+id/lbd_user_pt_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:text="#string/leader_board_my_pt"/>
<TextView
android:id="#+id/lbd_user_pt"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="right"
android:text="90000"
android:textDirection="ltr" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/lbd_user_pt_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:maxLength="5"//you can give the length as per your need
android:layout_toLeftOf="#+id/lbd_user_pt"
android:paddingRight="10dp"
android:text="leader_board_my_pt"/>
<TextView
android:id="#+id/lbd_user_pt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:text="90000"
android:textDirection="ltr" />
</RelativeLayout>

Categories

Resources