I use a relative layout to display a row in a listlayout. What I am showing is an imageview to the left and two textviews to the right. Both the textviews will only have a single line each.
I need to have the image such that it should be automatically resize so its height becomes equal to the height of the text combined. That way, the image height will fit the combined height of both text in all screens. Is this possible? layout is as below -
<ImageView
android:id="#+id/note_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="6dip"
android:src="#drawable/note_icon" />
<TextView android:id="#+id/text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/note_img"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:includeFontPadding="true"
android:singleLine="true"
style="#android:style/TextAppearance.Medium" />
<TextView android:id="#+id/text2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/note_img"
android:layout_alignParentBottom="true"
android:layout_below="#id/text1"
android:singleLine="true"
style="#android:style/TextAppearance.Small" />
As of now,note_img has a size of 96x96 and the image is shown in full size making the image area considerably large and the two text having huge gap between them.
Really appreciate any help.
Thanks,
Arun
Don't use fill_parent, it's depreceated. Untested, let me know if it works:
<?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:orientation="horizontal" >
<ImageView
android:id="#+id/note_img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="6dip"
android:src="#drawable/note_icon" />
<LinearLayout
android:id="#+id/vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/text1"
style="#android:style/TextAppearance.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="true"
android:singleLine="true" />
<TextView
android:id="#+id/text2"
style="#android:style/TextAppearance.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true" />
</LinearLayout>
After set the Text in TextView set the TextView's height to ImageView like
imageview.getLayoutParams().height = textViewheight;
Related
I am having this simple layout for chat bubble.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bubble_layout_chat_parent"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bubble_layout_chat"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/message_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/primary_text_light"
android:layout_gravity="top"
android:textSize="16sp"/>
<TextView
android:id="#+id/message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#999"
android:textSize="10sp"
android:textStyle="italic"
android:textColorHint="#color/grey"
android:layout_gravity="bottom|end"/>
</LinearLayout>
However, when I set image it leaves unwanted margins above and below the image.
How can I remove margins and make the bubble to fit image?
(Note: What I observed is the margins appears only when image width is larger than height. For images having width much smaller than height no margins observed)
use android:scaleType="fitXY" for your imageview
Thanks for everyone's comments. Setting android:adjustViewBounds="true" to ImageView fixed my problem. So my working ImageView now looks like:
<ImageView
android:id="#+id/message_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
I still dont really get it how many space layouts take.
I have the following xml.
The inner LinearLayout's for the bottom space height is set to wrap_content, so it should take the height of the maximum height in there. Which is 52dp. And there is the ImageButton which is set to wrap_content, so the button should be centered vertically on the right side, since its an 24dp image (in xhdpi it has 32x32 pixels). So why is it stretched over the full height like displayed here?:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp">
<de.ph1b.audiobook.utils.SquareImageView
android:id="#+id/cover"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_gravity="bottom">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="52dp"
android:paddingLeft="16dp"
android:maxLines="2"
android:ellipsize="end"
android:paddingRight="16dp"
android:gravity="center_vertical"
android:textSize="16sp" />
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
</LinearLayout>
</LinearLayout>
either #drawable/ic_more_vert_grey600_24dp is larger than you think or borderlessButtonStyle has a larger background.
Please check the size. I have replicated the behavior and the ImageButton is set to wrap_content and is centered.
change your image button code
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:scaleType="fitXY"
android:gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
There are some rows in listView and each rows has the same format :
From left to Right
ImageView TextViews ImageButton.
i am using relative layout to fix the position of the components but the size of the ImageButton is scaled and only imageButton displayed on each rows.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_resultItem_Layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imgBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
/>
<LinearLayout
android:id="#+id/bBasicDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignRight="#id/imgBook">
<TextView
android:id="#+id/bid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="gone" />
<TextView
android:id="#+id/bName"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:textSize="18sp" />
<TextView
android:id="#+id/authors"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/authors" />
<TextView
android:id="#+id/publisher"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/publisher" />
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:text="#string/status" />
</LinearLayout>
<ImageButton
android:id="#+id/btnMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/temp"
android:layout_toRightOf="#id/bBasicDesc"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Any wrong in my xml coding?
Because you are doing wrap_content it takes the size of the image that you set as src. That is why its getting scaled and bigger..
To resolve this, instead of using wrap_content you should think about what is the right height that you want for the listView item, and then for both ImageView and ImageButton set something like:
android:layout_width="50dp" // sample value of 50dp
android:layout_height="50dp" // sample value of 50dp
android:adjustViewBounds="true"
android:scaleType="centerCrop" // or android:scaleType="centerInside"
You can set custom height and width of the image you are inputting into your layout. This way no matter what the image will stay that size and not try to stretch or shrink.
You can do this within your activity's .xml file using:
android:layout_width="yourwidthhere.dp"
android:layout_height="yourheighthere.dp"
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 am using Universal Image Loader to grab some images and display them in a listview. I am having trouble getting the layout looking right. I want the image to use no more than 25% of the width, and this looks fine in the Graphical Layout view in Eclipse, but when the image is downloaded it is displayed full size which is too large.
I was hoping to avoid using maxwidth as I dont know what the full width will be.
This is my layout 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:orientation="horizontal"
android:padding="10dp"
android:weightSum="100" >
<ImageView
android:id="#+id/imgIcon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_weight="25"
android:contentDescription="#string/offerImage"
android:paddingRight="10dip"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="75"
android:orientation="vertical" >
<TextView
android:id="#+id/txtTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:text="tempString"
android:textColor="#ffffffff"
android:textSize="18sp" />
<TextView
android:id="#+id/txtRetailer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Business name"
android:textColor="#ffffffff"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/txtDistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="99.99 miles"
android:textColor="#ffffffff"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
I had some trouble with the sizes of ImageViews that are used with UIL too and this helped me:
iv.setAdjustViewBounds(true);
Might be worth a try.
The solution is to set layout_width value to 0dip for both ImageView and LinearLayout.
layout_weight works only for unused space, so in case image is too large there is no any free space.
In your xml file add this in your imageView Tag
Add this
android:scaleType="fitXY"