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.
Related
I'm trying to create a message layout in a chat application.
This message layout should contain:
Message Textview in a rounded rectangle
Message status check icon ImageView within that same rectangle
Message send time TextView outside the rounded rectangle and to its right.
When text is short, the whole layout should align itself to the right.
When the text is long, message TextView is going to expand itself to the left and upon touching the left side of the screen, it expands to a new row.
The problem is: Rounded rectangle stretches to the whole screen regardless of the message being short or long although underlying FrameLayout width is set to wrap_content.
Here is an image of the problem:
The layout I am using is:
<RelativeLayout
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:textSize="10sp"
app:showDate="#{message.postedAt}" />
<RelativeLayout
android:id="#+id/bubble_ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/text_message_time"
android:background="#drawable/rounded_rectangle_bubble_sent"
android:padding="8dp">
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="4dp"
app:setStatusPng="#{message.status}" />
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="2dp"
android:layout_toLeftOf="#id/iv_check"
android:singleLine="false"
android:text="#{message.messageText}"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
The inner RelativeLayout named bubble_ll has its width equals wrap_content.
What I am expecting is:
text_message_time TextView should be attached to the right of the screen due to its layout_alignParentEnd property set true.
bubble_ll stands left of the text_message_time view, due to its layout_toLeftOf property set. And it should have a width of its contents.
I have tried other layouts such as Linear, ConstraintLayout etc.
The LinearLayout approach did not work, since the width is set to wrap_content for TextView always overlaps status info checks and message time make them disappear when the message in the TextView is long.
With ConstraintLayout I could not align bubble to stay still on the right. It stays on the center of the screen horizontally since it is constrained on both horizontal sides of the screen.
Any help will be appreciated.
I have come up with the following layout which is a combination of RelativeLayout and LinearLayout. I hope this serves your purpose. Please change the drawables and the ids if necessary.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="8dp">
<TextView
android:id="#+id/text_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/message_container"
android:layout_alignParentRight="true"
android:layout_margin="4dp"
android:text="10:30 am"
android:textSize="10sp" />
<LinearLayout
android:id="#+id/message_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_toLeftOf="#+id/text_message_time"
android:background="#android:color/holo_blue_dark"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/messagetext_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:padding="4dp"
android:singleLine="false"
android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/iv_check"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_centerVertical="true"
android:layout_margin="8dp"
android:src="#android:drawable/presence_online" />
</LinearLayout>
</RelativeLayout>
I'm facing problems with the position of an icon. I've set that icon as drawableLeft of a TextView, this is working fine but, if I set the TextView's gravity to center_horizontal, then a padding space appears between the icon and the text. The code is as follows:
<TextView
style="#style/BaseText.White.Bold"
android:gravity="center_horizontal"
android:drawableStart="#drawable/ic_text"
android:drawableLeft="#drawable/ic_text"
android:text="#string/text"
android:layout_marginBottom="#dimen/margin_small"
android:layout_marginRight="#dimen/margin_big"
android:layout_marginLeft="#dimen/margin_big"
android:padding="0dp"
android:drawablePadding="0dp"/>
What do I have to do to ensure that the icon is shown at the text's left side but horizontally centered?
I've make two screenshots to show you the difference when adding or removing the icon's gravity.
When the textview's gravity is not set, the result is as follows:
But, when the gravity is added, then a padding appears between the text and the icon:
Thanks in advance
Only add android:drawablePadding="10dp" field in your text view refer the coad
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Add New Address"
android:textAppearance="#style/Title"
android:id="#+id/tvAddNewAddress"
android:drawablePadding="20dp"
android:layout_weight="1"
android:padding="5dp"
android:textColor="#color/colorAccent"
android:drawableStart="#android:drawable/arrow_down_float"
/>
Try to give android:gravity="center" to Text View. Also add android:layout_width="wrap_content" and android:layout_height="wrap_content" properties in Text View.
Refer this.
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:drawableLeft="#mipmap/ic_launcher"
android:drawablePadding="0dp"
android:drawableStart="#mipmap/ic_launcher"
android:gravity="center"
android:textSize="22sp"
android:padding="0dp"
android:text="TestingTestingTestingTestingTestingTestingTestingTestingTesting" />
</RelativeLayout>
This is what it showing.
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 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.
I have two custom RadioButtons side by side that fill the width of the screen. I want to have text and an image to the right of the text, centered in the button.
drawableRight draws the image way off to the right of the button, not near the text. I can't use drawableEnd because I don't have Android 4.0
I've tried using a Spannable, but the problem with that is that the image is bigger than the text. I don't want it aligned with the bottom or baseline of the text; I want it to be centered in the button on its own.
The best solution I've found is making a clickable RelativeLayout with a TextView and ImageView centered in it. This makes the button look the way I want it to, but it seems like a lot of work to do that, and to program each RelativeLayout to act like a RadioButton in a RadioGroup.
Is there an easier way, or something that I'm missing? Or should I keep my RelativeLayout idea? Here's my xml for this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/first_relativelayout"
android:clickable="true"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/first_textview"
android:text="#string/first_radiobutton_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:textColor="#android:color/white"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/first_imageview"
android:layout_centerVertical="true"
android:src="#drawable/it"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/first_textview">
</ImageView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/second_relativelayout"
android:clickable="true"
android:background="#drawable/radio_button"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<TextView
android:id="#+id/second_textview"
android:text="#string/second_radiobutton_label"
android:textAppearance="?android:attr/textAppearanceButton"
android:textColor="#android:color/white"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:contentDescription="#string/image_description"
android:id="#+id/second_imageview"
android:layout_centerVertical="true"
android:src="#drawable/it"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/second_textview">
</ImageView>
</RelativeLayout>
</LinearLayout>
I kept going with the RelativeLayout solution. It takes more work than it seems should be worth it, but it works perfectly.