How to scale an imageview to the right size? (my png images are to small)

Question

A colleague of mine created for me a few pngs to enter inside a main menu. The pngs are suppose to be scaled to the right size like this:

I entered all the pngs in order to fit the hdpi xhdpi etc.,but when I put the "One player game" and "two player game" the images shrink and do not fit the size of the "Exit" button:

I tried all the variations of "android:scaleType" following this question. Also I tried padding (through a diff question that I can't find now). These resolutions did not help me.

I will be happy if you will be able to show me how to scale up these texts that are inside the png.

Here is my xml code:

<?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="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:layoutDirection="ltr"
    tools:context="com.inbaltako.tictactoe.MenuActivity">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo"
        android:paddingTop="50dp"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/relativeLayout">

    </RelativeLayout>

    <ImageButton
        android:id="@+id/exitBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/exit_btn"
        android:background="@color/colorPrimary"
        android:padding="16dp"
        android:onClick="btnClicked"
        android:layout_marginTop="2dp"
        android:layout_below="@+id/two_player_game"
        android:layout_toStartOf="@+id/relativeLayout" />

    <ImageButton
        android:id="@+id/one_player_game"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/one_player_game"
        android:background="@color/colorPrimary"
        android:onClick="btnClicked"
        android:padding="16dp"
        android:layout_below="@+id/relativeLayout"
        android:layout_alignStart="@+id/two_player_game" />

    <ImageButton
        android:id="@+id/two_player_game"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/two_players_game"
        android:background="@color/colorPrimary"
        android:onClick="btnClicked"
        android:padding="16dp"
        android:layout_below="@+id/relativeLayout"
        android:layout_alignStart="@+id/exitBtn"
        android:layout_marginTop="39dp" />


</RelativeLayout>

See https://developer.android.com/guide/practices/screens_support.html — Phantômaxx, May 22 '16 at 08:21

score 1 · Accepted Answer · answered May 22 '16 at 06:09

1

It's hard to know if you put your drawables I the right places. But if it's just text, why aren't you using TextView? Should be much easier. Dealing with images just for text isn't the right thing to do.

answered May 22 '16 at 06:09

Shalev Moyal

644
5
12

Hi Shalev. I believe I did put the drawables in the right places since I rechecked that many times, but I will do another double check. Regarding the textView since my colleague is connected to the design she rathers to work with images. (I believe the reason is that it is easier to play with design of it) Any how thanks on the fast reply. – Tomer May 22 '16 at 06:15
Unless you are uaing a very unique button there is no reason to use the png. She can keep exporting you png's, you just implement those using xml (this is how I work with my designer). This way they will probably look better when using different screens. – Shalev Moyal May 22 '16 at 06:52
Thanks, I probably will take on your advise and work with textview – Tomer May 22 '16 at 07:03

How to scale an imageview to the right size? (my png images are to small)

1 Answers1