ImageView in LinearLayout give a fixed width in percent - android

I'm using a ListView, for each item I created an imageview + an edittext. I load images from a website and I don't understand why some images have not a width of 35%. However I use the layout_weight property. Can you tell me how to force the image to take 35% of the width ?
For example, the result i have now :
And here is my code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="3"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.3"
android:orientation="horizontal"
android:padding="5dp" >
<ImageView
android:id="#+id/poster"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="6dip"
android:layout_weight="0.35"
android:contentDescription="42"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.65"
android:text="Title"
/>
</LinearLayout>
</LinearLayout>
If you see what is wrong :/
Best regards,
Zed13
Edit : The result with Rishi Paul solution
And the updated xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="3"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp" >
<ImageView
android:id="#+id/poster"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="6dip"
android:layout_weight="0.35"
android:scaleType="fitCenter"
android:contentDescription="42"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.65"
android:text="Title"
/>
</LinearLayout>
</LinearLayout>


Do Like This. It Will Help You
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/poster"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="6dip"
android:layout_weight="0.35"
android:adjustViewBounds="true"
android:contentDescription="42"
android:src="#drawable/desert" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.65"
android:text="Title" />
</LinearLayout>

Related

Unable create layout with image and text for listvieitem

<?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="90dip"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/rowcontact_txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:text="Usama Sadiq"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rowcontact_imgLocationIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_below="#+id/rowcontact_txtName"
android:layout_marginLeft="10dip" />
<TextView
android:id="#+id/rowcontact_txtLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rowcontact_txtName"
android:layout_toRightOf="#+id/rowcontact_imgLocationIcon"
android:text="Dubai"
android:textColor="#898788"
android:textSize="11.5dp" />
<ImageView
android:id="#+id/rowcontact_imgIcon"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignBottom="#+id/rowcontact_txtLocation"
android:layout_marginLeft="94dp"
android:layout_toRightOf="#+id/rowcontact_txtName" />
</RelativeLayout>
</RelativeLayout>
i am trying to create layout for list-view item but i am not able to fix position of image and text with three different Position please tell me solution how to fix it. i have to create listviow item i am able to display list-view but like given screen
i have all icon an all but am unable to fix potion of text-view and image view like given screen

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="2"
android:layout_margin="5dp"
>
<TextView
android:id="#+id/rowcontact_txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Usama Sadiq"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<TextView
android:id="#+id/rowcontact_txtLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rowcontact_txtName"
android:layout_toRightOf="#+id/rowcontact_imgLocationIcon"
android:text="Dubai"
android:textColor="#898788"
android:textSize="11.5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

android:layout_marginLeft doesn't work in API 8

android:layout_marginLeft works fine on 4.4.2 but it doesn't work on 2.2.
Here is the screenshot.
Here is row_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#drawable/row_selector"
android:paddingLeft="15dp"
android:paddingRight="15dp" >
<ImageView
android:id="#+id/authorImageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/poemNameTextView"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_gravity="center_vertical"
android:layout_marginLeft="20dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="Çanakkale Şehitlerine"
android:textColor="#color/author_list_textcolor_selector"
android:textSize="16dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>

Try to set the margin on the LinearLayout containing the TextView instead of on the TextView itself. If this doesn't work you can also try to apply a padding to the LinearLayout.
Essentially try this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="#drawable/row_selector"
android:paddingLeft="15dp"
android:paddingRight="15dp" >
<ImageView
android:id="#+id/authorImageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_marginLeft="20dp"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/poemNameTextView"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="Çanakkale Şehitlerine"
android:textColor="#color/author_list_textcolor_selector"
android:textSize="16dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
In your case most likely the behaviour of margins in a LinearLayout with weights changed at some point above API 8.

// try this way,hope this will help you for more improvement of your code to show list item.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/row_selector"
android:padding="15dp"
android:gravity="center">
<ImageView
android:id="#+id/authorImageView"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp">
<TextView
android:id="#+id/poemNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Çanakkale Şehitlerine"
android:textColor="#color/author_list_textcolor_selector"
android:textSize="16dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>

How I can put "Imagenview" under all the elements?

Hi, I commented that I have this layout and if you can see there is a line on the right which should go below the text
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_promocion_item0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#363636"
android:padding="10dip" >
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal"
>
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp"
android:tag="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/vertical"
android:layout_gravity="left"/>
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp"
/>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight=".50"
android:src="#drawable/divierblanco"
android:layout_alignParentLeft="true"/>
</LinearLayout>
</LinearLayout>
.. so is something like:
NAME: PRICE
I can not locate the image below the text .... Can you help me?

You have way too many nested LinearLayouts, IMHO, which can be bad for performance and decrease readability. I would use a RelativeLayout and 1 nested LinearLayout
<RelativeLayout
...>
<LinearLayout
android:id="#+id/someId"
....
<TextView
...>
<ImageView
...>
<TextView
...>
</LinearLayout>
<ImageView
android:layout_below="id/someId"
...>
Something like this should work.
Alternatively if this doesn't work for you, then placing that ImageVIew outside of the first child LinearLayout should also work
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_promocion_item0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#363636"
android:padding="10dip" >
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal" >
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp"
android:tag="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/vertical"
android:layout_gravity="left"/>
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight=".50"
android:src="#drawable/divierblanco"
android:layout_alignParentLeft="true"/> // this doesn't do anything in a LinearLayout
</LinearLayout>

Your imageView (with the id separador) is inside a linearLayout with an orientation set to "horizontal". Move the imageView to the outermost linearlayout like so:
EDIT: The xml that's displayed below is completely different than what I typed in my answer. What's up with that? Regardless, move the imageView down an element.
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal" >
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="bold"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="left"
android:src="#drawable/vertical" />
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_alignParentLeft="true"
android:layout_weight=".50"
android:src="#drawable/divierblanco" /></LinearLayout>

How to give 20 screen width to an ImageView

How do I create an UI header like this image?
I'm using the code below but how do I adjust 30% of the screen to the image and 70% to a TextView. I also use two TextViews on that 70% of width. This is my code, it does not look as in 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="fill_parent"
android:background="#000000"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#=#EFECE5"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="San Diego Uified"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="School District"
/>
</LinearLayout>
</LinearLayout>

add android:layout_weight="3" property to image and android:layout_weight="7" to text

checkout weight for textviews and imageviews and weightSum for LinearLayout
What is android:weightSum in android, and how does it work?

Try to use "android:layout_weight"
Assigning a value 'android:layout_weight' will split up the available space in the parent View, according to the value of each View‘s layout_weight and its ratio to the overall layout_weight specified in the current layout for this and other View elements.
In your case
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#=#EFECE5"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_weight="30"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="San Diego Uified"
android:layout_weight="35"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:text="School District"
android:layout_weight="35"
/>
</LinearLayout>

here you go..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#000000" android:orientation="vertical" >
<!-- Header Layout -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:weightSum="1.0" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:weightSum="0.30" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="horizontal"
android:weightSum="1.0" >
<TextView
android:id="#+id/txtCaption"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#ffffff"
android:gravity="center"
android:text="San Diego Uified"
android:layout_weight="0.50"
/>
<TextView
android:id="#+id/txtCaption"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#ffffff"
android:gravity="center"
android:text="School District"
android:layout_weight="0.50"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- Body layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="horizontal"
android:layout_weight="0.70"
android:weightSum="1.0" >
<TextView
android:id="#+id/txtCaption"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textColor="#ffffff"
android:gravity="center"
android:text="School aasdadadad adasd"
android:layout_weight="0.50"
/>
</LinearLayout>

Positioning ImageView

I need to positioning the ImageView at the same level of the user's name (vito in the example).
This is what I have:
And I want this (look at the second icon):
My xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingBottom="5px"
android:paddingTop="5px"
android:paddingLeft="5px"
android:orientation="horizontal"
style="#style/ListRow">
<ImageView
android:id="#+id/imagenItem"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:layout_gravity="top"
android:gravity="top"
android:layout_alignParentTop="true"
style="#style/iconLISTA" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/idUsuario"
android:textSize="#dimen/font_size_small"
android:textStyle="bold"
android:textColor="#color/list_item_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/hora"
android:textSize="#dimen/font_size_small"
android:textStyle="bold"
android:textColor="#color/list_item_secondary_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="215px" />
</RelativeLayout>
<TextView
android:id="#+id/comentarios"
android:textSize="#dimen/font_size_small"
android:color="#color/list_item_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="0px" />
</LinearLayout>
</LinearLayout>
Thanks.

Change the ImageView and following LinearLayout hight attributes to both be wrap_content.
The ImageView is currently fill_parent which is making it take all available vertical space and centering it vertically.

Add:
android:scaleType="fitStart"
to the ImageView layout.
e.g.
<ImageView
android:id="#+id/imagenItem"
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:layout_gravity="top"
android:gravity="top"
android:layout_alignParentTop="true"
style="#style/iconLISTA" />

Try this, is bit simplified:
<?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:padding="5dp" >
<ImageView
android:id="#+id/imagenItem"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="top"
android:scaleType="fitCenter"
android:src="#drawable/avatar_default" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/idUsuario"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:text="usuario"
android:textStyle="bold" />
<TextView
android:id="#+id/hora"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="hora"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/comentarios"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="commmmment" />
</LinearLayout>
</LinearLayout>
And you shouldn't use px, use always dp/dip.

Categories

Resources