Align ImageView to center of a TextView in RelativeLayout - android

I have a Relative Layout as below:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.38"
android:background="#drawable/layout"
android:orientation="vertical" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:layout_marginLeft="80dp"
android:textColor="#color/text1color"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/text2"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/text1"
android:layout_below="#+id/text1"
android:background="#drawable/text2_background"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
android:textColor="#color/text2color"
android:textSize="13sp" />
<com.widgets.CustomImageView
android:id="#+id/myImage"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="0dp"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/text2"
android:src="#drawable/logo" />
</RelativeLayout>
The ImageView #+id/myImage needs to align to the center of #+id/text2 TextView! Currently, it is aligning to the top of #+id/text2 and is aligning to the layout's parentBottom. I don't want this hack.
Is there a way of aligning the ImageView to the TextView's center?

This is a perfect case for a compound drawable (which is a best practice, to flatten your design).
The ImageView goes INSIDE the TextView text2, at its bottom:
Just add this to your text2 definition:
android:drawableBottom="#drawable/logo"
You can add some padding, too
android:drawablePadding="4dp"
The image is horizontally aligned to its container.
If the text grows vertically, the image will be pulled down (as the TextView grows).
To have the image left aligned and vertically centered, just change drawableTop with drawableLeft and you're done:
android:drawableLeft="#drawable/logo"

Related

How to allign a textView according to its center in Android

Very simply put, I want to allign a textView according to its center instead of its border, so lets say, when using android:layout_marginRight="50dp", instead of the right border being 50dp away, the center of the textView being 50dp away from the parent's right border. Here is my code for reference:
<RelativeLayout
android:id="#+id/breakfastStats"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/breakfastAdd"
android:layout_marginTop="1dp"
android:background="#color/lightblack">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Carbohydrate"
android:textColor="#color/white"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:gravity="center"
android:layout_marginTop="5dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fat"
android:textColor="#color/white"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
/>
Fixed by using a GridLayout instead of a RelativeLayout.
You can use margin and padding value together for the TextView.
marginRight = "25dp"
paddingRight = "25dp"
gravity = "center"

TextView text and its drawable to the center of textview

I have a textview with a drawableleft. As the textview is covering whole width of the screen so i want textview text and its drawable left to the center of the textview. At present only text is aligning to the center of it and drawable is always in the extreme left of it. So please suggest me something.
<TextView
android:layout_marginLeft="#dimen/_10sdp"
android:layout_width="0dp"
android:layout_height="#dimen/_40sdp"
android:layout_weight="5"
android:gravity="center"
android:drawableLeft="#drawable/ic_cloud"
android:paddingLeft="#dimen/_10sdp"
android:text="#string/up"
/>
You cannot achieve this using drawableleft. Use separate Layout with ImageView and TextView as shown below:
<RelativeLayout
//add necessary attributes
android:gravity="center_horizontal">
<ImageView
//Add your image here
/>
<TextView
android:layout_marginLeft="#dimen/_10sdp"
android:layout_width="0dp"
android:layout_height="#dimen/_40sdp"
android:layout_weight="5"
android:paddingLeft="#dimen/_10sdp"
android:text="#string/up" />
</RelativeLayout/>
Hope this helps

RelativeLayout matching parent although it shouldn't

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>

Textview next to an ImageView

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.

Relative Layout giving a lot of trouble

Here's the code:
<RelativeLayout
android:id="#+id/tc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tc"
android:layout_marginLeft="185dip"
android:layout_marginTop="25dip"
>
<ImageView
android:id="#+id/tc_icon"
android:background="#drawable/count_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tc"
android:layout_mar
/>
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
/>
</RelativeLayout>
I have somehow managed to make the image and the text views overlap each other (which I wanted). Now, I want them to be placed to the bottom left corner of their parent RelativeLayout (with id 'tc').... However, they just wouldn't move.
If I used alignParentBottom.... the entire relative layout stretches across the screen and aligns to its parent relativeLayout.
Please help. Thanks! :)
If you wanna overlap an image and a textview, simplw use a android:drawableleft or ony position where you want.
For example:
<TextView
android:id="#+id/tc_icon_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:text="1"
android:layout_gravity="bottom"
android:textColor="#f7e906"
android:textStyle="bold"
android:drawableleft="#drawable/yourimage.jpg"/>
This will give you an image on the left of your textview. Check it out

Categories

Resources