I am trying to get an editText to sit on the right edge of my layout, with a button to its left, as follows:
<RelativeLayout
android:id="#+id/FindClientLayout"
android:layout_width="#dimen/third_width"
android:layout_height="#dimen/half_height"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
android:layout_alignParentTop="false"
android:layout_below="#id/HeaderLayout"
android:layout_margin="#dimen/fragment_separation"
android:layout_toRightOf="#id/scrollViewRecommend"
android:background="#drawable/login_border" >
<TextView
android:id="#+id/textViewFindClient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/find_client"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/Black" />
<EditText
android:id="#+id/editTextClient"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:gravity="center_vertical|right"
android:inputType="text"/>
<Spinner
android:id="#+id/spinnerClientList"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:layout_below="#id/editTextClient"/>
<Button
android:id="#+id/buttonDoFind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_toLeftOf="#id/editTextClient"
android:text="#string/find" />
</RelativeLayout>
The button is invisible, and the result looks like this:
I assume the button is invisible because the editText is left-aligned and overlays it or pushes it out of the layout frame. Why is are the editText and spinner left aligned rather than right-aligned? Also, why is the editText not centered vertically?
Edit you xml file like this and check for result
<TextView
android:id="#+id/textViewFindClient"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/find_client"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/Black" />
<EditText
android:id="#+id/editTextClient"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:inputType="text"/>
<Spinner
android:id="#+id/spinnerClientList"
android:layout_width="#dimen/input_text_width"
android:layout_height="wrap_content"
android:layout_below="#id/editTextClient"/>
<Button
android:id="#+id/buttonDoFind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_toLeftOf="#id/editTextClient"
android:text="#string/find" />
this should solve your problem which is , you are using gravity to place the edittext on right but gravity is actually use to position the content of view not the view itself.
If you still face problem leave a comment
android:gravity="center_vertical|right"
indicates the content in the edittext will be right aligned and in center_vertical postion
If you want to right align you can use alignParentRight="true" or toRightOf="id_to_which_it_relate_to"
You can't align RelativeLayout child views with just gravity.
Try to use android:layout_centerVertical="true" and android:layout_alignParentRight="true" instead
align Button to left of RelatativeLayout and TextView to right. Keep the EditText in between TextView and Button.
Related
I am trying to have a TextView with an ImageView directly to its right. Right now the image partially overlaps the far right of the text, so if the text inputted is long, then the image is "over" the text. I have an ellipse setting on the text but I need the TextView to "stop" right at the left border of the ImageView.
TextView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
ImageView layout settings:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv"
android:singleLine="true"
android:maxLines="1"
android:ellipsize="end"
.... />
<!-- background == #null if you don't want default button background -->
<ImageButton
android:id="#id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="3dp"
android:background="#null"
.... />
</RelativeLayout>
EDIT
See the comments in regards to why this works and the posted question doesn't. Also take a look at
Android Relative Layout alignParentRight and alignParentEnd
for a reference to end/right and start/left attributes.
I am trying to add a drawableleft to an Edittext:
<EditText
android:id="#+id/editUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon_email"
android:hint="#string/login_identity_hint"
android:textSize="12sp" />
Here is how it looks like:
As you see, the image does not match its parent's borders, there is padding from left, bottom and top even though i do not set any padding. What can i do about it?
I also tried the following approach:
<RelativeLayout
android:id="#+id/editUserNameContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_email"
android:layout_alignParentLeft="true"/>
<EditText
android:layout_toRightOf="#+id/img"
android:id="#+id/editUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:hint="hint"
android:textSize="12sp" />
</RelativeLayout>
But this time, it looks like the following: The image and edittext's heights do not match and there is a small gap between them:
Thanks.
I am thinking the only way you can get it to be how you want is to do something like this....
Remove android:drawablePadding="5dp" from EditText
Remove android:layout_toRightOf="#+id/img" from EditText
Add android:paddingLeft="50dp" to EditText
Add android:layout_alignParentLeft="true" to ImageView
This will just put the image over the top of your edit text, and using the padding to move the text in the edit text box to the right a bit after the image. You may need to make adjustments to the image view to make it fit just right
Let me know how this works!
<ImageView android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon_email"
android:layout_alignParentLeft="true"/>
<EditText
android:layout_alignParentLeft="true"
android:id="#+id/editUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="50dp"
android:hint="hint"
android:textSize="12sp" />
I am using the following xml to generate a row in a list view. Though i have set the gravity as center_Vertical and right. Only center_Vertical is applied but not the "right" gravity. I have even tried inside the code. the "right" gravity is not working. Kindly help me to correct the code.
Thanks in Advance
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tvTicketID"
android:layout_width="wrap_content"
android:layout_height="52dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:gravity="center_vertical|left"
android:text="Ticket ID"
android:textSize="15dp" />
<TextView
android:id="#+id/tvCreationHour"
android:gravity="center_vertical|right"
android:layout_width="wrap_content"
android:layout_height="52dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_toRightOf="#+id/tvTicketID"
android:text="Hour" />
<TextView
android:id="#+id/tvTableNumber"
android:gravity="center_vertical|right"
android:layout_width="wrap_content"
android:layout_height="52dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="24dp"
android:layout_toRightOf="#+id/tvCreationHour"
android:text="Table #" />
<TextView
android:id="#+id/tvAmount"
android:gravity="center_vertical|right"
android:layout_width="wrap_content"
android:layout_height="52dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="18dp"
android:layout_toRightOf="#+id/tvTableNumber"
android:text="Amount" />
</RelativeLayout>
The code I use to create a row using the above xml
holder.tvTicketID.setText(String.valueOf(ticket.getId())) ;
holder.tvCreationHour.setText(String.valueOf(ticket.getCreationHour())) ;
holder.tvTableNumber.setText(String.valueOf(ticket.getTableNumber())) ;
holder.tvAmount.setText(String.valueOf(ticket.getTotalAmount())) ;
Try setting android:layout_gravity="right"
In general, android:gravity="right" is different from android:layout_gravity="right".
The first one affects the position of the text itself within the View, so if you want it to be right-aligned, then layout_width= should be either "fill_parent" or "match_parent".
The second one affects the View's position inside its parent, in other words - aligning the object itself (edit box or text view) inside the parent view.
Finally, I fonund the answer. I have changed the android:layout_width="wrap_content" in the TEXTVIEW to android:layout_width="30dp". Now it works..
So in my layout, I've got three buttons on the same line, one left, center and right aligned. I also have TextViews below the buttons to serve as labels, but they too are aligned left, center and right respectively. I'd like them to instead be centered below the buttons and on the same line as one another, but I can't figure out how to do this without explicitly setting coordinates, which will then break on some phones. I tried setting various weights and layout options, but it just doesn't work how I'd like. Is there a way to do this in a RelativeLayout? Or maybe it's just not possible. Finally, I've got more three TextViews on the same line and one button on the bottom. I would like to align as shown bellow:
http://imgur.com/vYuqk
Thanks in advance.
You can't center one element below another with RelativeLayout. You could try a horizontal LinearLayout with three RelativeLayouts (one for each column). You could contain the whole thing in a vertical LinearLayout to get the bottom button.
TableLayout or GridLayout are possibilities as well.
As people suggested, there is no way to center a View below another View in RelativeLayout. You could maybe use this hack if you can confirm that the TextView width need not be more the Button width. The solution is: you make the TextView align its left and right edge to the Button above. Then set the gravity of the TextView to center so that the text inside TextView is centered.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="130dp"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_centerHorizontal="true"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_alignParentRight="true"
android:text="Button3" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button1"
android:layout_alignRight="#id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt1" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button2"
android:layout_alignRight="#id/button2"
android:layout_below="#+id/button2"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt2" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button3"
android:layout_alignRight="#id/button3"
android:layout_below="#+id/button3"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt3" />
</RelativeLayout>
I want to make the edittext width the same size as button. My EditText is currently very small. I use relative layout.
<TextView
android:id="#+id/aha4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17dip"
android:text="Vzdevek:"
android:layout_below="#id/aha3" />
<EditText android:id="#+id/nick"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#id/nivo"
android:layout_toRightOf="#id/aha4"/>
<Button android:id="#+id/poslji"
android:text="Pošlji"
android:layout_height="wrap_content"
android:layout_width="20dip"
android:typeface="serif" android:textStyle="bold"
android:layout_alignParentRight="true"
android:layout_below="#id/nivo"
android:layout_toRightOf="#id/nick"/>
What i currently get is this:
alt text http://www.shrani.si/f/1Z/x8/2lWB3f8p/device.png
What is the appropriate layout_width for edittext and button?
As you are using something like a row to show the TextView, EditText and button, you can try to use TableLayout: http://developer.android.com/guide/tutorials/views/hello-tablelayout.html
Also, make sure you set android:layout_width="wrap_content" so that the EditText use as much space as possible.
Try to assign equal weight to both button and edit text
Yeah, you're right about weight.
As a hack you can do this. Not exactly right though.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/aha4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17dip"
android:text="Vzdevek:" />
<Button
android:id="#+id/poslji"
android:text="Pošlji"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingLeft="40dip"
android:paddingRight="40dip"
android:typeface="serif"
android:textStyle="bold"
android:layout_alignParentRight="true" />
<EditText
android:id="#+id/nick"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/aha4"
android:layout_toLeftOf="#id/poslji" />
</RelativeLayout>
I managed to solve it with specifying minWidth and maxWidth for EditText.