CODEWITHSUNDEEP
androidandroid-layout
Exterminator13
Exterminator13

Reputation: 2182

Layout: how to make image to change its width and height proportionally?

I have such layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@+id/my_image"
    android:ellipsize="end"
    android:singleLine="true"
    android:text="Some text"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<ImageView
    android:id="@+id/my_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/title"
    android:layout_alignBottom="@+id/title"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:adjustViewBounds="true"
    android:src="@drawable/my_bitmap_image" />

This layout does almost what I need: it makes image view height the same as text view. The image graphic contents stretched also keeping aspect ratio.

But, the width of the image view does not change! As a result, I have a wide gap between text and the image view! As a temporal solution, I override View#onLayout.

The question: how to change image width in xml layout?

UPDATE:

This is a final layout I need (text + a few images). Look at the first image: its width should be exactly the same as scaled image in it with no paddings and margins:

enter image description here

Upvotes: 4

Views: 3568

Answers (7)

Prachi
Prachi

Reputation: 2559

try to add scaleType = fitXY OR centerInside property to imageView

Upvotes: 0

Exterminator13
Exterminator13

Reputation: 2182

OK, as I see from the answers, there is no solution to force image views to change theirs width and height proportionally. So, this can be solved only programmatically. There is my solution below :

a) Create you custom layout class

(don't forget to override all the parent constructors with public access modifier, otherwise GUI editor will fail):

public class MyLayout extends RelativeLayout {...

b) Override method: Deprecated - changing layout params in this method might cause side effects. See recommended approach below

protected void onLayout(boolean changed, int l, int t, int r, int b) {

ImageView icon = (ImageView) findViewById(R.id.my_image); icon.setMaxWidth(icon.getMeasuredHeight());

super.onLayout(changed, l, t, r, b);

}

b) Add creational method:

public static MyLayout createLayout(ViewGroup parent) {
Context context = parent.getContext();
MyLayout item = (MyLayout) LayoutInflater.from(context).inflate(
            R.layout.my_layout, parent, false);    
TextView tv = (TextView) findViewById(R.id.title);
ImageView icon = (ImageView) findViewById(R.id.my_image);
ViewGroup.LayoutParams p = icon.getLayoutParams();
p.width =   (int) tv.getTextSize();;
icon.setLayoutParams(p);
return item;
}

c) Final layout:

<?xml version="1.0" encoding="utf-8"?>
<com.mypackage.MyLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="@+id/my_image"
android:ellipsize="end"
android:singleLine="true"
android:text="Some text"
android:textAppearance="?android:attr/textAppearanceMedium" />

<ImageView
android:id="@+id/my_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/title"
android:layout_alignBottom="@+id/title"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="@drawable/my_bitmap_image" />
</com.mypackage.MyLayout>

Upvotes: 2

bostan
bostan

Reputation: 375

For the imageView you can add the images to a linearlayout and give the weight property. For example if you have 3 images then give the linearlayout weight as 3 and then for each image you give the weight as 1. This way it will be uniformly aligned with equal width for all the images. Make linear orientation as horizontal hope so u got my point. 

    <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="3"
     >
   <ImageView android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" 
    android:layout_weight ="1" />

    <ImageView android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" 
    android:layout_weight ="1" />

    <ImageView android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" 
    android:layout_weight ="1" />
     </LinearLayout>

Upvotes: 5

Niko
Niko

Reputation: 1377

Instead of RelativeLayout, use LinearLayout. You may add "Weight" property to ensure desired spacing.

see the code below

    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/logonFormButtons"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:baselineAligned="true"       
    android:orientation="horizontal">

    <TextView
        android:id="@+id/logonFormBTLogon"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"            
        android:text="Some Text"
        android:layout_weight="0.5" />

    <ImageView
        android:id="@+id/logonFormBTCancel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"            
        android:src="@drawable/apk"
        android:layout_weight="0.5" />
    </LinearLayout>

Upvotes: 1

mainu
mainu

Reputation: 448

put image view in Linear Layout . the give weight to each and every image view.. it will increase the size proportionately ..

Upvotes: 0

timonvlad
timonvlad

Reputation: 1056

As for me I appreciate to change width or height dinamically in my code using getLayoutParams()... for example 

DisplayMetrics displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    int height = displaymetrics.heightPixels;
    int wwidth = displaymetrics.widthPixels;
    convertPixelsToDp(wwidth, getApplicationContext());
//    Toast.makeText(getApplicationContext(), height+ "= "+convertPixelsToDp(height, getApplicationContext()) + 
//          "   " + wwidth+ "= "+convertPixelsToDp(wwidth, getApplicationContext()), Toast.LENGTH_LONG).show();
   //scroll view 1 screen height size
    scr1 = (ScrollView) findViewById(R.id.ScrollView01);
    scr1.getLayoutParams().height=height - 200;

Upvotes: 0

Vincent Mimoun-Prat
Vincent Mimoun-Prat

Reputation: 28551

I guess this has to do with android:layout_alignParentRight="true" for your ImageView. Have you tried layout_toRightOf="@id/title" ?

Also you can try android:scaleType="fitStart" on the ImageView. This should align the image to the top left of the ImageView.

Upvotes: 0

Related Questions