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>
Related
I am trying to get the TextView, "tv_amount" to stay on the right side of the screen. I have tried using android:gravity="right" but that hasn't been working for me. Anyone have any suggestions?
Image of emulator running this code:
<?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="45dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="40sp"
android:layout_height="40sp"
android:background="#drawable/circle_border"
android:padding="6sp"
android:layout_marginLeft="6dp"
android:src="#drawable/food"/>
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:text="Yummy Pizza"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:gravity="end"
android:text="$25"
android:textSize="25sp" />
</LinearLayout>
I am expecting the transaction or "tv_amount" to stay be right justified so that end of the number is staying towards the right side of the screen.
I tried using :
android:layout_weight="0"
android:layout_gravity="end"
android:gravity="right"
but these don't seem to work obviously. I am a beginner when it comes to android development and can't seem to find any answers that have helped anywhere else. They all say to use android:gravity or some other alternative. Maybe there is something in my code that doesn't allow that.
Try it like this:
Splitting the content into left and right will result in the weight and gravity properties working. Check out this layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="20sp" />
<!--Separate layout aligned to the left, containing an image and a yummy pizza label. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tv_text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Left"
android:textSize="16sp" />
</LinearLayout>
<!--Display the pizza price on a separate label aligned to the right -->
<TextView
android:id="#+id/tv_text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Text Right"
android:layout_weight="1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
I am dumb. The issue wasn't with the code in my individual recycler view layout code. It was with my activity_main.xml. I set the recycler_view width to "wrap_content" when it should have been "match_parent." Rookie mistake.
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'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>
I have been having problems creating a relative layout in XML for a list item to be used for a series of items in a ListView. I have tried for hours and am tearing my hair out trying to get it to look how I want but cannot get everything to appear in the correct spot and not overlap or mis-align. I can get the first image and next two textviews in place but cannot get the last textview and imageview.
I have attached a wireframe style image of how I am trying for it to look and was wondering if someone could help me out?
The ImageView on the right is a set icon of the full height of the row with padding around it?
The two TextViews take up the majority of the width. The Address textview has the possibility of the text being long so it may need to get truncated if it runs out of space, or ideally have the font size shrink?
The next TextView will just hold a small string of max 5 characters.
The last ImageView is a small arrow to imply that this list item is clickable for more infomation. It needs to be centred like shown.
I would like if the icon, last textview, and last image always be in the same place/alignment down the list.
If someone could offer some assistance on this I would be so grateful.
Cheers guys
For anyone interested I managed to get this working. I know how much of a pain it is to go searching for an answer to a problem and it was never completely resolved.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/Icon"
android:layout_margin="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/topLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="20dip"
android:text="Name" />
<TextView
android:id="#+id/bottomLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_below="#+id/topLine"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="15dip"
android:text="Address" />
<TextView
android:id="#+id/distance"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:lines="1"
android:textColor="#color/blacktext"
android:textSize="12dip"
android:text="100m" />
<ImageView
android:id="#+id/arrow"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="5dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/redarrow"/>
</RelativeLayout>
I've done something similar (except the image on left)
It might help you:
<?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:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/TextView01"
android:id="#+id/LinearLayout01"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dip"
android:layout_weight="1"
android:paddingRight="8dip"
android:layout_height="wrap_content"
android:id="#+id/LinearLayout01"
android:orientation="vertical">
<TextView
android:text="#string/Birthday"
android:id="#+id/txtTitlevalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"></TextView>
<TextView
android:text="1960-01-01"
android:id="#+id/txtSubvalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-4dip"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="10"
android:textAppearance="?android:attr/textAppearanceSmall"></TextView>
</LinearLayout>
<TextView
android:text="2"
android:id="#+id/txtNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
<TextView
android:text="weeks"
android:id="#+id/txtUnit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
</LinearLayout>
<!-- <View
android:background="#drawable/black_white_gradient"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:clickable="true"
android:focusable="true"
android:layout_below="#+id/LinearLayout01" /> -->
</LinearLayout>
I have problems getting some of my views aligned in a relative layout that I use inside a row of my listview.
Here is a screenshot from the layout builder in Eclipse, this is what I think it should look like:
(source: janusz.de)
The next image is from the emulator. Now the TestTestTest View is at the top and covers the name and distance Textviews.
(source: janusz.de)
This is my 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="fill_parent"
android:padding="4dip">
<ImageView android:id="#+id/logo" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:adjustViewBounds="true"
android:scaleType="centerInside" android:src="#drawable/icon"
android:layout_centerVertical="true" android:layout_alignParentLeft="true"
android:background="#color/green" />
<TextView android:id="#+id/distance" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Distance"
android:layout_alignParentRight="true" android:layout_alignParentTop="true"
android:paddingRight="4dip" android:background="#000000" />
<TextView android:id="#+id/name" android:layout_width="fill_parent"
style="#style/ListHeadText" android:layout_height="wrap_content"
android:text="Name"
android:layout_alignTop="#id/distance" android:layout_toRightOf="#id/logo"
android:layout_toLeftOf="#id/distance" android:gravity="clip_horizontal"
android:lines="1" android:paddingLeft="4dip" android:background="#color/red" />
<TextView android:id="#+id/number" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Number"
android:paddingRight="4dip" android:layout_alignRight="#id/distance"
android:background="#color/darkred" android:layout_below="#id/distance" />
<TextView android:id="#+id/subcategory" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Subcategory"
android:paddingLeft="4dip" android:layout_alignLeft="#id/name"
android:lines="1" android:gravity="clip_horizontal"
android:layout_below="#id/distance" android:background="#color/green" />
<TextView android:id="#+id/test" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="TestTestTest"
android:paddingLeft="4dip"
android:layout_alignParentBottom="true" android:gravity="bottom"
android:background="#color/red" />
Shouldnt align_parent_bottom put the view at the bottom of the cell in the list?
Try adding android:layout_alignParentLeft="true" as well; sometimes Views aren't displayed properly if it can't anchor the view with at least 2 points. Also, is this RelativeLayout used within a ListView? If so, you might find you have some difficulty getting it to look right. There was another question where someone was having a problem where the RelativeLayout looked right on its own, but not once it was included as part of a ListView. We didn't manage to figure out what went wrong so he had to use nested LinearLayouts instead.