LinearLayout: TextViews at left, big ImageView at right

LinearLayout: TextViews at left, big ImageView at right - android

i'm working on a LinearLayout but unfortunately it's not working as it should.
The goal is to have a LinearLayout with two TextViews (one placed below the other) on the left side, and an ImageView on the right side.
The ImageView should be as big as possible, the TextViews should take the remaining space.
At the moment my layout XML is like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="1dp"
android:background="#drawable/background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="1234"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/layout2label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234_label2"
android:textSize="14dp" />
</LinearLayout>
<ImageView
android:id="#+id/layout_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
The part that isn't working: If the text in the TextViews is "too long", the ImageView gets shrinked. I want it exactly the other way round.
Any solutions?

It would be more efficient to use RelativeLayout instead of LinearLayout. Then you can place your views without having to nest layouts:
<?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:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/image"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/image"
android:layout_below="#+id/title"
/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
/>
</RelativeLayout>
By arranging the TextViews to be relative to the ImageView instead of the other way around, the ImageView takes priority for the space, and the text works with the remainder.

this might be help to you
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="1dp"
android:background="#drawable/background" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="1234"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/layout2label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1234_labj hairu iue rel2"
android:textSize="14dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/layout_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_margin="2dp"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>

A little modification to Kirans Code..worked for me
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/layout1label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:singleLine="true"
android:text="Name: BalaVishnu"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/layout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:src="#drawable/edit_icon" />
</LinearLayout>

Related

How to Customize Layout

How to customize FrameLayout, I have to make screen like this:
and i have made this :
So now i want to know, How can i achieve above Layout
How to show icon on top, like in above screen (Path)
How to place text above circles, like in above screen (Dark Text: Remember Life) (Light Text: Instantly ....)
How to place buttons below circles, like in above screen (Register & Login)
Here is my XML, in which i am using FrameLayout, see below:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
</FrameLayout>

Finally, I achieved my target, I used both the Layouts [Relative Layout and Linear Layout] to organize widgets, see complete XML :
circle_layout.xml:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView2"
android:layout_centerHorizontal="true"
android:text="Remember Life"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/viewflowindic"
android:layout_centerHorizontal="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:padding="5dp"
android:text="Instantly search memories of friends, season, birthdays, and more"
android:textAppearance="?android:attr/textAppearanceSmall" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp" >
<Button
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight="1"
android:text="Register"
android:textColor="#000000" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Login"
android:textColor="#000000" />
</LinearLayout>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayout1"
android:layout_centerHorizontal="true"
android:padding="20dp"
app:inactiveType="stroke" />
</RelativeLayout>
And look at this awesome screenshot:

Use RelativeLayout instead FrameLayout. You will be more free with elements positions.
Relative Layout
Something like this you can do it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:sidebuffer="3" />
<View
android:id="#+id/center"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/button_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/center"
android:padding="10dp"/>
<Button
android:id="#+id/button_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/center"
android:padding="10dp"/>
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_register"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/viewflowindic"
android:layout_centerHorizontal="true"
android:text="description"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/description"
android:layout_centerHorizontal="true"
android:text="title"/>
</RelativeLayout>
btw use match_parent instead fill_parent.

Use RelativeLayout to organize views. For implementing view pager indicator try this link
https://github.com/JakeWharton/Android-ViewPagerIndicator
Sample
<?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">
//You can put an image view or text view to show your app name
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Path"
android:id="#+id/title"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="74dp"/>
**// Try view pager indicator here.**
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:weightSum="2"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:layout_weight="1"
android:id="#+id/button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_weight="1"
android:id="#+id/button2"/>
</LinearLayout>
</RelativeLayout>

Android - ImageView and TextView not appearing

I want to display an ImageView then her TextView details followed by an other ImageView and her TextView details and then a text view and under them an ImageView then her TextView. So i put 2 child LinearLayouts that has orientation set to horizontal and the parent with orientation vertical but the second child LinearLayout is not appearing at all I don't know why. Thank you for helping. This is my activity.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/fondgris"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageTypeWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:src="#drawable/bugicon" />
<TextView
android:id="#+id/typeWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imagePriority"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:src="#drawable/priorityhigh" />
<TextView
android:id="#+id/priority"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:src="#drawable/statusopen" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/priority"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Your linearLayout1 has the property android:orientation="vertical" but then the very first child (linearLayout2) has android:layout_height="match_parent", which means the second child (linearLayout3) will have no space since first one will take over full height of the parent.
So you can change both children to have android:layout_height="wrap_content" and maybe add android:layout_weight="1" for both if you want.

The content is larger than the screen and it is hidden. You must use ScrollView.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewPort="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/fondgris"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageTypeWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:src="#drawable/bugicon" />
<TextView
android:id="#+id/typeWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imagePriority"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:src="#drawable/priorityhigh" />
<TextView
android:id="#+id/priority"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:src="#drawable/statusopen" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/priority"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>

Not sure if I'm understanding this correctly but from what you describe I would try using a relative layout as your parent and creating linear layouts inside of that that are relative to each other (one on top of the other).

Align two imageView with textView XML in android

I have a problem with my xml for android.
I have this layout to use it in each line of a Listview (that works fine).
I want to put two lines (head and body) of text, and align Right of the first line I have to put two ImageView. (Also have first of all a hidden textView)
Something like this:
My problem is when I try to put both imageViews (with only one it shows fine, but with two don't show nothing).
this is my xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="gone" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/TvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#drawable/new_messages" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#drawable/new_group" />
</LinearLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="22sp"
android:textStyle="normal" />
</LinearLayout>
sorry for my english and thank you in advance!

If I am understanding correctly then I believe this should be close to what you are looking for:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TvIdGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="gone" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/TvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Test"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="right"
android:src="#drawable/new_messages" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/ImgNewConvGroup"
android:gravity="right"
android:src="#drawable/new_group" />
</RelativeLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:textSize="22sp"
android:textStyle="normal" />
</LinearLayout>
Try it out and let me know if that works for you, I changed the inner layout from LinearLayout to RelativeLayout and created what I believe you are looking for in relational locations.
Note: Be cautious of your TextView extending far enough to go behind the ImageViews, if that happens then it might be better to (set for the ImageViews):
android:layout_below="#+id/TvName"
on both and remove:
android:layout_centerVertical="true"

<TextView
android:id="#+id/TvIdGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="TV"
android:textSize="12sp"
android:textStyle="bold"
android:visibility="visible" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/TvName"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:text="TVName"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/ImgNewConvGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="right"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ImgNewGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2"
android:gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<TextView
android:id="#+id/TvDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TVDescription"
android:textSize="22sp"
android:textStyle="normal" />
Take a look if is what are you looking for.

Is a lot of code just will write the structure
<LinearLayout android:orientation="vertical">
<LinearLayout android:orientation="horizontal">
<LinearLayout android:orientation="horizontal">
<TextView/>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:gravity="right">
<ImageView/>
<ImageView/>
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="vertical">
<TextView/>
</LinearLayout>
</LinearLayout>

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>

Positioning ImageView

I need to positioning the ImageView at the same level of the user's name (vito in the example).
This is what I have:
And I want this (look at the second icon):
My xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingBottom="5px"
android:paddingTop="5px"
android:paddingLeft="5px"
android:orientation="horizontal"
style="#style/ListRow">
<ImageView
android:id="#+id/imagenItem"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:layout_gravity="top"
android:gravity="top"
android:layout_alignParentTop="true"
style="#style/iconLISTA" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/idUsuario"
android:textSize="#dimen/font_size_small"
android:textStyle="bold"
android:textColor="#color/list_item_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/hora"
android:textSize="#dimen/font_size_small"
android:textStyle="bold"
android:textColor="#color/list_item_secondary_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="215px" />
</RelativeLayout>
<TextView
android:id="#+id/comentarios"
android:textSize="#dimen/font_size_small"
android:color="#color/list_item_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0px" />
</LinearLayout>
</LinearLayout>
Thanks.

Change the ImageView and following LinearLayout hight attributes to both be wrap_content.
The ImageView is currently fill_parent which is making it take all available vertical space and centering it vertically.

Add:
android:scaleType="fitStart"
to the ImageView layout.
e.g.
<ImageView
android:id="#+id/imagenItem"
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:layout_gravity="top"
android:gravity="top"
android:layout_alignParentTop="true"
style="#style/iconLISTA" />

Try this, is bit simplified:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp" >
<ImageView
android:id="#+id/imagenItem"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="top"
android:scaleType="fitCenter"
android:src="#drawable/avatar_default" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/idUsuario"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="usuario"
android:textStyle="bold" />
<TextView
android:id="#+id/hora"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="hora"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/comentarios"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="commmmment" />
</LinearLayout>
</LinearLayout>
And you shouldn't use px, use always dp/dip.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

LinearLayout: TextViews at left, big ImageView at right - android

Related

How to Customize Layout

Android - ImageView and TextView not appearing

Align two imageView with textView XML in android

Unable to Align the Views

Positioning ImageView

Categories

Resources