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>
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.
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>
I have a listview with item specified by RelativeLayout
There is an image (gray arrow, this is png, with transparent padding). In first case text with blue back overlaps this image, in second - it is aligned.
The only difference between these cases is that left photo is invisible in first case. I do not understand why in second case the blue text does not overlap gray arrow? (it is desirable behavior)
<?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="#dimen/padding_content">
<ru.ip_news.ui.views.RationalImage
android:id="#+id/picture"
android:layout_width="#dimen/article_short_image_width"
android:layout_height="fill_parent"/>
<View
android:id="#+id/separator"
android:layout_width="#dimen/padding_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/picture"/>
<ImageView
android:id="#+id/dis_ind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/dis_ind"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/separator"
android:layout_toLeftOf="#id/dis_ind"
android:layout_gravity="left"
android:textStyle="bold"
android:textColor="#color/article_text_main"
android:maxLines="2"
android:ellipsize="end"
android:background="#F0F0"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/separator"
android:layout_below="#id/title"
android:layout_alignParentBottom="true"
android:textColor="#color/article_text_secondary"
android:maxLines="4"
android:background="#F00F"/>
</RelativeLayout>
I've never worked with Android coding before, but just from looking at your code I'd say there's a conflict between android:layout_alignParentRight="true" found here:
<ImageView
android:id="#+id/dis_ind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/dis_ind"/>
and your android:layout_alignParentBottom="true" found here:
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/separator"
android:layout_below="#id/title"
android:layout_alignParentBottom="true"
android:textColor="#color/article_text_secondary"
android:maxLines="4"
android:background="#F00F"/>
I've never worked with the code base before and don't have a "solution" for you, but maybe it'll get you a starting point.
Since the picture no longer exists in the top view , the layout has become smaller so the textviews are closer. Put some margin between the two text views to fix the issue.
Resolved the problem by extracting linearlayout and moving photo to it. For some reason this photo in the same layout involves space between texts.
<?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:padding="#dimen/padding_content">
<ru.ip_news.ui.views.RationalImage
android:id="#+id/picture"
android:layout_width="#dimen/article_short_image_width"
android:layout_height="fill_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/padding_content">
<ImageView
android:id="#+id/dis_ind"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/dis_ind"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dis_ind"
android:layout_gravity="left"
android:layout_alignParentLeft="true"
android:textStyle="bold"
android:textColor="#color/article_text_main"
android:maxLines="2"
android:ellipsize="end"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_alignParentBottom="true"
android:textColor="#color/article_text_secondary"
android:maxLines="4"/>
</RelativeLayout>
</LinearLayout>
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.
If you have any knowledge of XML layouts in Android, please take a quick look. I have the following XML layout that displays an image, then displays an address and phone number below it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/mainbackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/view1">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50px"
android:padding="12dip"
android:background="#FFFFFF">
</ImageView>
<TextView android:id="#+id/addressView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20px"
android:padding="12dip"
android:textColor="#000000"
android:background="#FFFFFF">
</TextView>
<TextView android:id="#+id/phoneView"
android:textColor="#0000FF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/addressView"
android:layout_centerHorizontal="true"
android:padding="12dip"
android:background="#FFFFFF">
</TextView>
</RelativeLayout>
Currently, I am just using the android:padding and android:background tags to set a white background behind the ImageView and both TextViews. This works fine for me for the image view. For the text views, they obviously have 2 individual borders/backgrounds. However, I would like to set one white background image behind both text views instead of having two individual borders/backgrounds. See this image for more details on what I would like the final result to look like:
http://img84.imageshack.us/i/homeview.png/
I am just not sure how to "wrap" this white box around both text views. Obviously, the android:padding and android:background tags might not be the way to do this. If anyone could help, it would be greatly appreciated!
Set the image as a background for a LinearLayout that contains both TextViews and you are set.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/button_blue"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/view1">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50px"
android:padding="12dip"
android:background="#FFFFFF">
</ImageView>
<LinearLayout
android:id="commonBackgroundImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20px"
android:padding="12dip"
android:orientation="vertical">
<TextView android:id="#+id/addressView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="text1">
</TextView>
<TextView android:id="#+id/phoneView"
android:textColor="#0000FF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text2">
</TextView>
</LinearLayout>
</RelativeLayout>