UPDATE
The problem has been solved. It seems like I need both the:
android:layout_alignParentLeft="true"
and:
android:layout_toLeftOf="#id/Image"
lines in the linearlayout.
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/Image"
android:gravity="left">
I am trying to create a layout where on the left hand side there are two textViews, and on the right there is an image:
All is working fine except from when either of the textViews has a small amount of text in it.
When a textView has a smaller amount of text in it, it gets pushed further over to the right, and is no longer flush with the left hand side of the screen.
My question is, how to I make it so that no matter what, each of the textViews will always be flush with the left hand side of the parent; as opposed to it being pushed to the right if it has a smaller amount of text in.
I have included links below to images of the layout (I can't post images yet)
This first screen shot is of the layout working fine, and how I want it to look all the way through.
http://pbrd.co/1tZhJti
This second screenshot is of the layout braking. Can you see the highlighted row and how it is being pushed to the right, that is what I want to rectify.
http://pbrd.co/1tZhVss
Here is the code, if anyone can help me that would be great! Thanks!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="8dp">
<ImageView
android:id="#+id/Image"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="5dp"
android:src="#drawable/icon"
android:layout_alignParentRight="true" />
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_toLeftOf="#id/Image"
>
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:paddingLeft="0dip"
android:textSize="20dip"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/Text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14dip"
android:paddingLeft="0dip"
android:textColor="#FF267F00"
android:layout_alignParentLeft="true"
/>
</LinearLayout>
</RelativeLayout>
Just insert android:layout_alignParentLeft="true" in your Linear layout...works like a charm
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dip"
android:layout_toLeftOf="#id/Image"
>
Just remove this line
android:layout_toLeftOf="#id/Image"
There is no need of that. Since you are aligning your LinearLayout to the left of your image, so when the text is small, the LinearLayout align itself to the right(to the left of image). so If you remove above line, your LinearLayout along with TextView's will now automatically alligned to left. But in this case you have to set ems to both TextView's to avoid overlapping with the image.
<?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:weightsum="5"
android:padding="8dp">
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="wrap_content"
android:paddingLeft="10dip">
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:textSize="20sp"/>
<TextView
android:id="#+id/Text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#FF267F00"/>
</LinearLayout>
<ImageView
android:id="#+id/Image"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:scaleType="center"/>
</LinearLayout>
Related
I have the xml code shown below. Everything is working as it should except the final textView( id locationTextView) which won't stay right. I want it to stay as right as possible, but I can't do that(it still appears straight after the linear Layout).Should I set a left margin?. And for the textView1 how can I make it to show only a certain part of the whole text, because I have texts of different lengths and they ruin the layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/product_list_item_bg"
android:descendantFocusability="blocksDescendants">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_margin="3dip"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#33CC33" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView" />
</LinearLayout>
<TextView
android:gravity="right"
android:layout_width="72dip"
android:layout_height="72dip"
android:layout_marginTop="0dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/locationTextView"
android:layout_gravity="right" />
</LinearLayout>
</RelativeLayout>
Try android:layout_weight="1" or some other value for your locationTextView. You can also try out android:weightSum="3" (or that is appropriate instead of 3) on your root LinearLayout. Assign proper weights to your different child views. You can get help here
For showing text in a presentable way, you could use android:ellipsize="marquee" or other options available.
I have a listview that consists three columns. The first one is an ImageView, the second and third one are textviews (see code blow).
I want the list to be aligned like this:
the icon and the date should always been shown completely !!
the text in the middle should show as much chars as possible
the date should always be on the right of the right side
With the XML below it looks ok on my Nexus 4. But on the asus tablet the date should be more on the right and the coloumn in the middle should show more text (screenshot 1). On the AVD (screenshot 2) the coloumn in the middle should be smaller and the date should be shown completely.
Can anyone tell me how to change the XML? Thanks!
<?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:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50px"
android:layout_height="50px"
android:layout_marginLeft="5px"
android:layout_marginRight="20px"
android:layout_marginTop="5px"
android:src="#drawable/social_chat"
android:layout_weight="0"
>
</ImageView>
<TextView
android:id="#+id/label"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="0px"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
<TextView
android:id="#+id/last_changed"
android:layout_width="0px"
android:layout_height="fill_parent"
android:layout_marginTop="15px"
android:layout_marginLeft="5px"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="50"
android:maxLines="1"
android:singleLine="true"
>
</TextView>
Off the top of my head your layout would look something like this.-
<?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="match_parent"
android:padding="5dp" >
<ImageView
android:id="#+id/logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#+id/label"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_weight="1"
android:singleLine="true" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="5dp"
android:text="#+id/last_changed"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
The key here is to use wrap_content for the views that just need to keep their size, and set a weight for the middle view, which you want to fill the rest of the row.
Some useful tips.-
fill_parent is deprecated, use match_parent instead
When a view has no children, you can just close it with />
singleLine="true" is enough to have a singleLined TextView
You'll usually want to use dp units instead of px
This should do your job. I have put the imageview on the parents left, the date on the parents right and the label to the rightof image and to the left of date.It should work fine for you. Margins , padding please put yourself
<?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:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/social_chat" />
<TextView
android:id="#+id/last_changed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:singleLine="true" />
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_toLeftOf="#id/last_changed"
android:layout_toRightOf="#id/logo"
android:singleLine="true" />
</RelativeLayout>
I'm having a very difficult time figuring out how to lay out this element. Here's what I want to do (apologies for my MS Paint skills):
Here, the gray box is supposed to be an ImageView. The red lines here are just to make the sections more clear - not worried abot how to draw them. The features that I'm trying to get are:
The ImageView is aligned relative to the topmost red line, and to the left edge of the green box.
The "TEXT" is to the right of the image, and centered vertically in its section.
Without the ImageView, this is pretty straightforward - just a LinearLayout with three TextViews and some padding. I've tried doing this wit a RelativeLayout, but I'm unsure of how to center Text within the box without relying on guessing at the padding/margin.
I figured out how to get the box hanging over. I created my RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:background="#3AF">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:background="#AAA">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView1"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView2"/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher"
android:id="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
</RelativeLayout>
But what I can't figure out is how to align the topmost TextView to the right of the ImageView. (Note - this is just my attempt. The layout type/style is entirely flexible at this point).
Here's a screenshot of how it looks in the designer:
Any ideas?
android:layout_toRightOf
Should work... If not, can you explain what's wrong and what are your issues, because it works fine here...
Try putting your first line into your LinearLayout and then everything else in your RelativeLayout. I haven't tried this code, but if I understand your scenario correctly, it should do the trick.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:background="#3AF">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:background="#AAA">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher"
android:id="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView"/>
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView1"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:padding="10dp"
android:id="#+id/textView2"/>
</LinearLayout>
</RelativeLayout>
For building an application, we have several lists.
the problem exists with a list item, which is custom, but very simple nontheless.
The format is:
This represents one list item with 2 textviews and one image view
Note that title and date are actually right underneath eachother and the image is on the right side, with center vertical as attribute.The image should NOT be in between the two text views
I will give the XML first and then explain the exact problem.
The XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="16dip"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:textSize="12dip"
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="5dip" >
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</LinearLayout>
Problem:
In some sense, this layout displays everything exactly as the ascii representation.
What does NOT function correctly is when the text is becoming long. In cases where the text is long, but not long enough to take 2 lines, it just makes the imageview tiny.
In other cases, it just pushes imageview completely off the screen..
What I need is, when the length of either the date or the other textview is too long, to break to a new line. And ofcourse it needs to be a solution portable to all sorts of screen sizes.
I'm not a UI artist, so, apologies if I'm abusing layouts in a sense that they should not be used.
Aside help, tips and hints are also welcome!
I think your best bet is one simple RelativeLayout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
>
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/validationStateImg"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textSize="16dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/validationStateImg"
android:layout_alignParentLeft="true"
android:layout_below="#id/title"
/>
</RelativeLayout>
Snap the ImageView to the right side of the parent, and let the TextViews take the rest of the width, but aligned to the left of the ImageView.
Hope this helps:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_weight = "1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dasdfasdfasdfasdfsadfsdf dsfasdfasd asdfadsf dfasdfads asdfasdf"
android:textSize="16dip" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dasdfasdfasdfasdfsadfsdf"
android:textSize="12dip" />
</LinearLayout>
<RelativeLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginRight="5dip" >
<ImageView
android:id="#+id/validationStateImg"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>
I think in this case you need a different layout, check this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content">
<TextView
android:textSize="16dip"
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:textSize="12dip"
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"/>
</LinearLayout>
If you don't want your image shrinking then you need to give it a specific ratio of the real estate that its parent offers.
Specifically the LinearLayout that is its parent needs to have a weight_sum and then both the text and image need to have a layout_weight.
the weight should add up to the sum. The weight doesn't have to be a whole number and it's very important (and very counter intuitive) that the layout_width needs to be 0 (assuming that the two of them are sitting side by side)... so...
I'm removing all the extra stuff below that you need to add back in and just leaving the important parts....
<LinearLayout weight_sum=2 layout_height=fill_parent>
<TextView layout_weight=2 layout_height=0dp/>
<ImageView layout_weight=2 layout_height=0dp />
<TextView layout_weight=2 layout_height=0dp/>
</LinearLayout>
This will split the LinearLayout in half and the left side will be text (which will wrap if it can) and the right side will be the image. You can adjust this by setting the sum to 3 and splitting up the sides to 2 and 1 in which case the text will be 2/3 of the screen and the image 1/3. Or leave the sum at 2 and have the left be 1.3 and the right .7 for a similar effect.
I have the following linearlayout for a listitem.
<ImageView android:id="#+id/icon"
android:src="#android:drawable/ic_input_add"
android:layout_height="wrap_content"
android:layout_width="22px"
android:layout_marginTop="4px"
android:layout_marginRight="4px"
android:layout_marginLeft="1px" />
<LinearLayout android:id="#+id/linearLayout1"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TextView android:layout_width="wrap_content"
android:text="LongerTextView"
android:id="#+id/textView1"
android:layout_height="wrap_content"/>
<TextView android:layout_width="wrap_content"
android:text="TextView"
android:id="#+id/textView2"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_height="match_parent"
android:layout_width="fill_parent"
android:gravity="right">
<ImageView android:layout_marginTop="4px"
android:src="#android:drawable/ic_input_add"
android:layout_marginLeft="1px"
android:layout_height="wrap_content"
android:layout_marginRight="1px"
android:id="#+id/icon2"
android:layout_width="22px"/>
</LinearLayout>
The layout is supposed to show an image on the left and all the way on the right, with two text items between. This works fine, as long as the text does not become wider than screen. As soon as the text is longer my right icon gets pushed off the screen.
The text is supposed to wrap to a new line and both the left and right icon are supposed to always show.
How can I achieve this?
Try to use Relative Layouts
Inside a Relative Layout, you can specify an image (with id: imgLeft for example) with layout_alignParentLeft="true", that will stay on the left
Then another image (imgRight) with layout_alignParentRight="true", that will stay on the right
and then the linear layout containing the texts with:
layout_toLeftOf="#id/imgRight" and layout_toRightOf="imgLeft"
I have redesigned your xml as per your requirement. Use the following 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="match_parent"
android:background="#ffffff">
<ImageView
android:id="#+id/icon"
android:src="#android:drawable/ic_input_add"
android:layout_height="wrap_content"
android:layout_width="22px"
android:layout_marginTop="4px"
android:layout_marginRight="4px"
android:layout_marginLeft="1px"></ImageView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:gravity="right"
android:layout_alignParentRight="true">
<ImageView
android:layout_marginTop="4px"
android:src="#android:drawable/ic_input_add"
android:layout_marginLeft="1px"
android:layout_height="wrap_content"
android:layout_marginRight="1px"
android:id="#+id/icon2"
android:layout_width="wrap_content"></ImageView>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toRightOf="#+id/icon"
android:layout_toLeftOf="#+id/linearLayout2">
<TextView
android:layout_width="wrap_content"
android:text="LongerTextView"
android:id="#+id/textView1"
android:layout_height="wrap_content"></TextView>
<TextView
android:layout_width="wrap_content"
android:text="TextView"
android:id="#+id/textView2"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
</RelativeLayout>
Donot forget to vote if my response is helpful for you.
Thanks
Deepak
IIRC (not tested, but I can do in about 8 hours) you can lose the third LinearLayout (the one that wraps the second ImageView). Then set the android:gravity of the LinearLayout that wraps the TextViews to center.