Question

I am trying to get a logo to have the same scaling no matter the size of the parent’s view. Right now the logo is scaled down vertically but no horizontally causing the logo to have a smushed look to it. I’d like it to scale both x and y equally so that it maintains it’s form without a smushed or stretched look.

I have tried various scaleTypes, but they haven’t seemed to help thus far.

XML CODE FOR BUTTON:

<ImageView
                android:id="@+id/logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/title"
                android:background="@android:color/transparent"
                android:src="@android:color/transparent" />

FULL XML CODE (GIVE CONTEXT):

<RelativeLayout
            android:id="@+id/menu"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="30"
            android:background="@android:color/transparent"
            android:baselineAligned="false" >

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:gravity="right|bottom"
                android:shadowColor="@android:color/transparent"
                android:text="THE BLIND GOAT"
                android:textColor="@android:color/transparent"
                android:textSize="24dp"
                android:textStyle="bold|italic"
                android:typeface="sans" />

            <Button
                android:id="@+id/help"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/title"
                android:background="@android:color/transparent"
                android:clickable="false"
                android:paddingBottom="0dp"
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:paddingTop="0dp"
                android:text="HELP"
                android:textColor="@android:color/transparent"
                android:textSize="9dp"
                android:textStyle="bold"
                android:typeface="monospace" />

            <Button
                android:id="@+id/settings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/help"
                android:layout_below="@id/title"
                android:background="@android:color/transparent"
                android:clickable="false"
                android:paddingBottom="0dp"
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:paddingTop="0dp"
                android:text="SETTINGS"
                android:textColor="@android:color/transparent"
                android:textSize="9dp"
                android:textStyle="bold"
                android:typeface="monospace" />

            <Button
                android:id="@+id/logout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/settings"
                android:layout_below="@id/title"
                android:background="@android:color/transparent"
                android:clickable="false"
                android:paddingBottom="0dp"
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:paddingTop="0dp"
                android:text="LOGOUT"
                android:textColor="@android:color/transparent"
                android:textSize="9dp"
                android:textStyle="bold"
                android:typeface="monospace" />

            <Button
                android:id="@+id/profile"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/settings"
                android:background="@android:color/transparent"
                android:clickable="false"
                android:textColor="@android:color/transparent"
                android:textSize="15dp"
                android:textStyle="bold"
                android:typeface="serif" />

            <ImageView
                android:id="@+id/logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/title"
                android:background="@android:color/transparent"
                android:src="@android:color/transparent"
                android:scaleType="centerCrop" />
        </RelativeLayout>

Answer 1

Your Image display is decided by two factors:

The size of your ImageView (You can think of this as a Frame or Canvas which the image can be drawn onto) and it’s position. If the ImageView is small then the image can only ever fill that amount of space.

The second factor is the scaleType which is described here. If you tell the ImageView via it’s scaleType attribute to use “center” it will draw from the center at the Images native size. If you use the scaleType “fit_center” the Image will scale itself to fit inside the ImageView with the correct proportions (it won’t be stretched or squashed).

Hope that helps!