android LinearLayout - ImageView gets pushed off the screen - android

I use the layout posted below to show messages by inflating that layout as a row into a ListView. The problem is that it works fine with a single-line message but when there are 2 lines or more the ImageView indicating the message state gets pushed off the screen, can't get the reason. Any ideas? Layout code and screenshot below.
That is the inflated layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" >
<TextView
android:id="#+id/tvTimestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="8sp" />
<LinearLayout
android:id="#+id/rl_message_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_toRightOf="#+id/tvTimestamp"
android:background="#drawable/outgoing_bg"
android:orientation="horizontal" >
<TextView
android:id="#+id/tvMessageOutgoing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imgMessageState"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>

change you linear layout width fill_parent
and add android:layout_weight="1" in textview

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp" >
<TextView
android:id="#+id/tvTimestamp"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="20"
android:gravity="center_vertical"
android:text="10:20pm"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="8sp" />
<RelativeLayout
android:id="#+id/rl_message_holder"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80" >
<TextView
android:id="#+id/tvMessageOutgoing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imgMessageState"
android:padding="4dp"
android:singleLine="false"
android:text="android developer tutorial in the world"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imgMessageState"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="bottom"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</LinearLayout>

This worked for me
<TextView
android:id="#+id/tvMessageOutgoing"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="4dp"
android:layout_weight="1"
android:text="Medium Tesssssssssssssssssssssssssssssseeeeeeeessssxt"
android:textAppearance="?android:attr/textAppearanceMedium" />
It gives the textview the remaining space.

Try like this
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0.6"
>
<ImageView
android:id="#+id/imgMessageState"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Define your image view layout inside of Linear Layout

You can use
android:drawableRight="#drawable/ic_launcher"

Related

TextView height stretches in parent with gravity right. why?

I am making chat activity and having issues with right chat bubble. As you can see in the image below. TextView stretches height wise. According to my thinking it should be stretching width wise first then if space is full it should stretch height wise. Please suggest me if it is possible with xml or not. I have seen java code solution but i want to find a solution in xml first.
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:background="#drawable/ic_bubble_sent"
android:gravity="right">
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txt_msg_content"
android:layout_marginTop="-9dp"
android:text="00:33"
android:textColor="#color/colorAppGray"
android:textSize="12sp"
android:textStyle="normal" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Replace your two TextView with this,
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
I removed all unnecessary alignments from first TextView.
UPDATE
The overall layout looks like,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="20" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="80"
android:gravity="right">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
>
<TextView
android:id="#+id/txt_msg_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:text="Lorem"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/txt_message_time"
android:layout_toStartOf="#+id/txt_message_time"
android:layout_marginRight="32dp"
android:layout_marginEnd="32dp" />
<TextView
android:id="#+id/txt_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00:33"
android:textSize="12sp"
android:textStyle="normal"
android:layout_alignBaseline="#+id/txt_msg_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
Note : I removed your background for testing.

relative layout gravity center not aligning correctly

I'm trying to center the chilldren of my relative layout in the center of my screen but it's acting like it's aligned to the top of the parent and I can't figure out why.
my .XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:background="#f70909">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/dice"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView2" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_below="#+id/editUserSplash" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editPasswordSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:layout_below="#+id/btnSplash" />
</RelativeLayout>
I've tried making the parent a relativelayout without success and it won't align to the bottom either. Initially I thought the layout wasn't filling the whole screen but since its height and width are match_parent I don't think that's the problem. in android studio it is displaying correctly though so I must be missing something small.
I also tried using the gravity and layoutgravity parameters and a combination of the two but without success
Edit: I need the views to stay in the same formation relative to each other but centered in the screen vertically.
Edit 2:I set the background of the RelativeLayout to red and got this: So the relativelayout isn't filling my screen.
Edit 3:
Edit 4:
try 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"
android:background="#f70909">
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/dice"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView2" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_below="#+id/editUserSplash" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editPasswordSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:layout_below="#+id/btnSplash" />
</RelativeLayout>
</RelativeLayout>
Try something like 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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:layout_centerInParent="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_centerInParent="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textMessage" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:gravity="center" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/prgSplash"
style="#android:style/Widget.DeviceDefault.ProgressBar.Large"
android:indeterminate="true" />
</LinearLayout>
</RelativeLayout>
UPDATE:
If setting the xml in an AlertDialog, it's possible that there is a space allotted at the bottom. I google and found this alert_dialog.xml for reference. It seems that there is a buttonPanel at the bottom with a minimum height of 54dip.
<LinearLayout android:id="#+id/buttonPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="54dip"
android:orientation="vertical" >
<LinearLayout
style="?android:attr/buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="4dip"
android:paddingStart="2dip"
android:paddingEnd="2dip"
android:measureWithLargestChild="true">
<LinearLayout android:id="#+id/leftSpacer"
android:layout_weight="0.25"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone" />
<Button android:id="#+id/button1"
android:layout_width="0dip"
android:layout_gravity="start"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<Button android:id="#+id/button3"
android:layout_width="0dip"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<Button android:id="#+id/button2"
android:layout_width="0dip"
android:layout_gravity="end"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:maxLines="2"
android:layout_height="wrap_content" />
<LinearLayout android:id="#+id/rightSpacer"
android:layout_width="0dip"
android:layout_weight="0.25"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
I think this may help you
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center">
<RelativeLayout
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:text="Login"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textMessage"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<EditText
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editUserSplash"
android:hint="Username"
android:layout_below="#+id/textMessage"
android:gravity="center" />
<EditText
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editPasswordSplash"
android:hint="Password"
android:layout_below="#+id/editUserSplash"
android:gravity="center" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/btnSplash"
android:layout_below="#+id/editPasswordSplash"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Thanks to ank I was able to figure out that the reason why the RelativeLayout didn't fill my screen is that I used it in an alertDialog. So RelativeLayouts parent isn't the screen but the alertDialog. Since an alertDialog wraps its content it doesn't fill the entire screen.

Android RelativeLayout position items

The following image is what I'm trying to reach as final result:
My code so far works great on aligning the buttons in center:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageButton
android:id="#+id/button_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_border"
android:layout_marginTop="25dp"
android:src="#drawable/categories" />
<ImageButton
android:id="#+id/button_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/button_A"
android:layout_marginLeft="34dp"
android:layout_marginTop="25dp"
android:background="#drawable/my_border"
android:src="#drawable/shopping_cart" />
</RelativeLayout>
Then, after the "button_B" I tried to achieve the message "TEXT HERE IN CENTER" without success.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/txt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="TEXT HERE IN CENTER"/>
</RelativeLayout>
Any ideas? Thanks.
Edit: Solved. http://pastebin.com/9DwaQrPq
add the attributes
android:layout_centerInParent="true"
android:layout_below="id of thing you want it below"
to the text view
also take the text view out of the inner Relative Layout
EDIT
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemRoot"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:clickable="false">
<ImageButton
android:id="#+id/button_A"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_border"
android:layout_marginTop="25dp"
android:src="#drawable/categories" />
<ImageButton
android:id="#+id/button_B"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/button_A"
android:layout_marginLeft="34dp"
android:layout_marginTop="25dp"
android:background="#drawable/my_border"
android:src="#drawable/shopping_cart" />
</LinearLayout>
Take your TextView out of this inner RelativeLayout and give it the property and add a gravity to it to center your text.
<TextView
android:id="#+id/txt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="TEXT HERE IN CENTER"/>
If this doesn't work then please explain what you are getting or what isn't working about it. Also, a picture of what you currently are getting would help.
Edit
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"/>
<ImageButton
android:id="#+id/button_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_border"
android:layout_marginTop="25dp"
android:src="#drawable/categories" />
<ImageButton
android:id="#+id/button_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/button_A"
android:layout_marginLeft="34dp"
android:layout_marginTop="25dp"
android:background="#drawable/my_border"
android:src="#drawable/shopping_cart" />
</LinearLayout>
<TextView
android:id="#+id/txt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="TEXT HERE IN CENTER"/>
</RelativeLayout>

relative layout can't wrap and keep stretching

i have this layout
i have set the grey box width to wrap_content but it won't wrap instead it just stretched like usual. this is die xml
<?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="wrap_content"
android:padding="10dp"
android:background="#ffffff" >
<ImageView
android:id="#+id/item_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/image_photo" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:padding="5dp"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/item_image"
android:background="#cccccc" >
<TextView
android:id="#+id/item_text_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:textStyle="bold"
android:textSize="20sp"
android:text="Name"
/>
<TextView
android:id="#+id/item_text_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_alignRight="#+id/item_text_1"
android:textSize="14sp"
android:text="Message"
/>
</RelativeLayout>
</RelativeLayout>
just like chat list item in common, you know, the box should wrap the content inside it right?
so how can i achieve this?
thanks!
UPDATE
this is my right aligned chat item box, xml code
<?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="wrap_content"
android:padding="10dp"
android:background="#ffffff" >
<ImageView
android:id="#+id/item_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/image_photo" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:padding="5dp"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/item_image"
android:background="#cccccc" >
<TextView
android:id="#+id/item_text_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textStyle="bold"
android:textSize="20sp"
android:text="Name"
/>
<TextView
android:id="#+id/item_text_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:gravity="right"
android:layout_gravity="right"
android:textSize="14sp"
android:text="Message"
/>
</LinearLayout>
</RelativeLayout>
for the left aligned chat box in case for another user, you just have to remove android:layout_gravity and android:gravity! Thanks!
just remove
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
from
<TextView
android:id="#+id/item_text_1"
...
as you want to align its parent not the view itself

Unable to Align the Views

This is the part of the Code of a very long Layout.So posting of whole code was of no use.
I want to align the RED circle.Both the positions are shown in the RED colored circles.
The ParentLayout of whole activity is a RelativeLayout but has nothing to do with this.
Please help me.I have tried all the things that I knew.
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/Layoutborder"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:background="#drawable/image_bg"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"/>
</LinearLayout>
</LinearLayout>
Change the 3rd LinearLayout to :
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:padding="5dp" >
Not sure if you are satisfied with that kind of layout.
If this whole thing is inside a RelativeLayout, remove the outer LinearLayout (moving margins and such to the first child LinearLayout as required), and change the second child LinearLayout - the one with 5dp padding - to have
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
If you don't want to do this and have to keep the outer LinearLayout for some reason, move
android:layout_marginTop="20dp"
from the parent LinearLayout to the first child, and set layout_width of the second child to fill_parent, and add android:gravity="right" to it.
The code you provided does not show where you have specified the properties of RED text "here". You could probably just add it as another element in your relative layout where you specify the availability and stock which would align it with the preceding text.
Edit: (after understanding your actual problem)
I would suggest wrapping in another linear layout which will enable you to position the text above the picture as shown in the code below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Availability "
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp" />
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="3dp"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="3dip" >
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/texttitle"
android:src="#drawable/button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
This was the Another way achieve the above Output.Hope it may help SomeOne.
<RelativeLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#color/white"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:background="#drawable/image_bg"
android:layout_alignParentLeft="true"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"
/>
</LinearLayout>
</RelativeLayout>

Categories

Resources