Android LinearLayout Problem with wrapping content - android

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.

Related

How to set textView as right as possible and set textView show only a part of text?

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.

Put a textview over Imageview in LinearLayout

I have stuck in some xml code and i hope you can help me out.
So here is what I need/what I have done by now.
I have 3 images of 650px width and I need them one below another while keeping aspect ratio.
I did that with the following code and it looks as it should. No problem here.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_frankopan"
android:background="#drawable/frankopan2_vintage_sundown600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_turizam"
android:background="#drawable/krk_turizam_vintage"/>
The problem is. I need to put three textviews in a left bottom corner of each image. Imagine it like image menu with text description on each image.
So, I can not use relative or frame layout because images won't play nicely with each other :) There is always a gap between or not aspect ration etc. I need weightsum.
Second, I can't hardcode the text on each image in photoshop because the app will be translated and text needs to change for each language.
I can have different images for each language but I am trying to avoid that.
Ah yea, one more last thing.
I tried to put entire linearlayout in relative layout and put the text between but the text appears beneath the image and I can't bring it upfront.
Any suggestions?
Thanks a lot,
Xsonz
just copy 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:orientation="vertical">
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 1" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 2" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 3" />
</FrameLayout>
Take three FrameLayout inside your LinearLayout and inside FrameLayout keep the ImageView and TextView.
Or Else You can use RelativeLayout and give dependency to Views
You can use frame layout inside linear layout. create imageview inside the linear layout and create textview in another frame layout below it.
<FrameLayout
android:id="#+id/frameLayout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="string" />
</FrameLayout>
Something like this might work for you.
//your layout -> LinearLayout>
....
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image1"
android:layout_weight="1"
android:background="#drawable/A1" />
<TextView android:id="#+id/textview1"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Text"
android:layout_below="#id/image1"
android:layout_alignLeft="#id/image1" />
</RelativeLayout>
// end your LinearLayout
You can play with these parameters using Relative Layout Parameters android.com. The relative layout allows you to control the "relative" positioning between your elements.
You can lay your images out side by side, or in whatever fashion you wish.
Then you can adjust the text dynamically.

Prevent textview from being pushed further to the right - Android

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>

how to separate textviews in android?

It is a simple question but I don't know how to do it because I'm new in android.
I have two TextViews in a relative layout and when the first TextView getting bigger it writes on the other TextView which I want to avoid it. How can I do it ?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:gravity="left"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
android:layout_alignParentRight="true"/>
</RelativeLayout>
but when the text = firstfirstfirst.... it overrides the second textview.
You need to give you TextViews ids. Since you're using a RelativeLayout you can use layout_toLeftOf and layout_toRightOf, but you only need to use one of them.
<RelativeLayout 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/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toLeftOf="#+id/textView2"
android:gravity="left"
android:text="firstfirstfirstfirstfirstfirsitseirodsifjdsoijfoisddsefdfadafdafad" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:text="second" />
give some advice:
first you can set the left textview's max width using android:maxWidth="" to control the left size, but if the size bigger than the size the text will become like this:text...
or you need make the left and right area cleanly, for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2" >
<TextView
android:id="#+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:text="firstdasssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="left"
android:text="secondsdasdasdarerewrwcxcadasdasdsadsdasdasdadadsd" />
it make the left and right half area, also you can change the android:weightSum size.

How to place a button at a position little above the bottom in android

I need to place a button at the bottom of screen, leaving some space below it.
In other words I am using these two attributes for my button -
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
but the margin attribute wont work when I use alignParentBottom and the button sticks at the bottom only. Please tell me how to place it a little above the bottom .
Here's the xml
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#drawable/board"
android:layout_marginLeft="10dp"
android:layout_marginRight="60dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="10dp">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Type of Lesion"
android:textColor="#8B0A50"
android:layout_marginTop="40dp"
android:id="#+id/disease_listheader_textview"
android:drawableBottom="#drawable/underline"/>
<ListView
android:id="#+id/disease_listview"
android:layout_below="#id/disease_listheader_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:layout_marginLeft="40dp"
android:layout_marginBottom="50dp"
android:cacheColorHint="#00000000"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/disease_search_button"
android:layout_centerHorizontal="true"
android:background="#drawable/disease_search_btn"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"/>
</RelativeLayout>
just make change in relative layout height attribute value to fillparent like
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
.................../>
hope this help you
Can you try this?
Replace the Button tag with the one mentioned below. I am trying to wrap the button in another dummy layout
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:paddingBottom="20dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/disease_search_button"
android:background="#drawable/disease_search_btn"
android:layout_marginBottom="20dp"/>
</LinearLayout>
This runs just the way you wanted
<RelativeLayout android:id="#+id/relativeLayout1" android:layout_width="match_parent" android:layout_height="fill_parent">
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="20dip"></Button>
</RelativeLayout>

Categories

Resources