Search code examples
androidlayoutscale

Scaling image in a layout at runtime


I need to know how to scale an image to fill a layout while respecting the images aspect ratio. I'm using the layout below. The ImageView that holds the drawable is "@+id/album_art". I originally thought I could programmatically get the width and height of "@+id/album_art_holder" at runtime and scale a drawable to the smaller dimension but I'm unable to obtain them. Any ideas?

<LinearLayout
    android:id="@+id/player_actionbar"
    android:layout_width="fill_parent"
    android:layout_height="48dip"
    android:layout_alignParentTop="true"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/close"
        android:layout_width="56dip"
        android:layout_height="fill_parent"
        android:padding="4dip"
        android:scaleType="centerInside"
        android:background="@drawable/bg_actionbar_item"
        android:src="@drawable/icn_close" />

    <View
        android:layout_width="1dip"
        android:layout_height="26dip"
        android:background="#ff444444" />

    <TextView
        android:id="@+id/actionbar_title"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:textSize="18sp"
        android:textColor="#ffffffff"
        android:ellipsize="marquee"
        android:gravity="center_vertical"
        android:paddingLeft="6dip"
        android:paddingRight="6dip"
        android:singleLine="true"
        android:layout_marginLeft="8dip"
        android:text="@string/nowplaying_title" />

    <ImageButton
        android:id="@+id/play_queue"
        android:layout_width="56dip"
        android:layout_height="fill_parent"
        android:padding="4dip"
        android:scaleType="centerInside"
        android:background="@drawable/bg_actionbar_item"
        android:src="@drawable/icn_play_queue" />

</LinearLayout>

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@+id/player_controller"
    android:layout_below="@+id/player_actionbar" >

    <LinearLayout
        android:id="@+id/album_art_holder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/player_info"
        android:padding="12dip"
        android:background="@null" >

        <ImageView
        android:id="@+id/album_art"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/player_info"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="10dip"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/track_number_text"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:paddingTop="5dip"
            android:textSize="13dip"
            android:textStyle="normal"
            android:textColor="#ffa9a9a9"
            android:singleLine="true" />

        <TextView 
            android:id="@+id/trackname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="17dip"
            android:textStyle="bold"
            android:textColor="#ffffffff"
            android:ellipsize="marquee"
            android:singleLine="true" />

        <TextView
            android:id="@+id/artist_and_album"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="13dip"
            android:textStyle="normal"
            android:textColor="#ffa9a9a9"
            android:ellipsize="marquee"
            android:singleLine="true" />

    </LinearLayout>

</RelativeLayout>

<LinearLayout
    android:id="@+id/player_controller"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:paddingLeft="12dip"
        android:paddingRight="12dip"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/position_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="6dip" 
            android:textSize="12dip"
            android:textColor="#ffbbbbbb"
            android:gravity="right" />

        <SeekBar
            android:id="@+id/seek_bar"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:paddingLeft="9dip"
            android:paddingRight="9dip"
            android:progress="0"
            android:progressDrawable="@drawable/player_progress_drawable"
            android:thumb="@drawable/player_progress_thumb"
            android:thumbOffset="9dip"
            android:maxHeight="2dip"
            android:minHeight="2dip" />

        <TextView
            android:id="@+id/duration_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="6dip"
            android:textSize="12dip"
            android:textColor="#ffbbbbbb"
            android:gravity="left" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="60dip"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/shuffle_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:paddingBottom="20dip"
            android:paddingLeft="12dip"
            android:paddingRight="10dip"
            android:paddingTop="8dip"
            android:background="@null"
            android:src="@drawable/btn_player_shuffle_normal" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@+id/repeat_button"
            android:layout_toRightOf="@+id/shuffle_button"
            android:paddingLeft="10dip"
            android:paddingRight="10dip"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <net.sourceforge.servestream.button.RepeatingImageButton
                android:id="@+id/previous_button"
                android:background="@null"
                android:paddingBottom="20dip"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/btn_player_prev" />

            <ImageButton
                android:id="@+id/play_pause_button"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:paddingBottom="20dip"
                android:background="@null"
                android:src="@drawable/btn_player_play" />

            <net.sourceforge.servestream.button.RepeatingImageButton
                android:id="@+id/next_button"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:paddingBottom="20dip"
                android:background="@null"
                android:src="@drawable/btn_player_next" />
        </LinearLayout>

        <ImageButton
            android:id="@+id/repeat_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:paddingBottom="20dip"
            android:paddingLeft="10dip"
            android:paddingRight="12dip"
            android:paddingTop="8dip"
            android:background="@null"
            android:src="@drawable/btn_player_repeat_normal" />

    </RelativeLayout>

</LinearLayout>

Here is a picture of the layout:

enter image description here


Solution

  • You can get the width and height in onWindowFocusChanged as follows

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        int width =  mImageView.getWidth();
        int height = mImageView.getHeight();
    
        Log.d(TAG, "Width is "+width +" height is "+height);
    
        Drawable dr = getResources().getDrawable(R.drawable.wall);
        Bitmap bitmap = ((BitmapDrawable) dr).getBitmap();
        // Scale it to 50 x 50
        Drawable d = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(bitmap, width, height, true));
    
        mImageView.setBackgroundDrawable(d);
    }