Image doesn't resized even if size is defined in XML (Android Studio)

Question

I want to make button with image like this:
What I want to make
This button has image above its text and image is resized from 512x512.

When I searched google, there were some methods to achive this. But I thought putting Text and Image inside LinearLayout and register onClick doesn't look nice so I decided to use drawableTop instead.

    <Button
        android:id="@+id/btn_gps"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="8dp"
        android:drawableTop="@drawable/main_icon_gps"
        android:padding="20dp"
        android:text="@string/main_btn_gps"
        android:visibility="visible"
        app:layout_constraintBottom_toTopOf="@+id/guideline_h60"
        app:layout_constraintEnd_toEndOf="@+id/guideline_v50"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline_h40" />

Original image is 512x512 so I made another XML file(main_icon_gps) inside drawable directory.

<!-- @drawable/main_icon_gps -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/drawable_gps"
        android:width="64dp"
        android:height="64dp"
        />
</layer-list >

It looked nice when inspecting in Android Studio preview but when I launched the app in AVD, image resize doesn't work properly.

When looking inside Android Studio When looking inside AVD

To sum up, I tried to set image size with android:width and android:height inside separate XML drawable file and it worked nicely in Android Studio preview. But Android doesn't respect width and height that I defined in XML drawable file. How to make Android respect the width and height that I've defined at XML?

I have to use same image as different size so resizing actual image or have multiple image don't seem to be best idea. Nesting things inside LinearLayout isn't good idea to me but if I have to achive what I want to make, then I will use that method. Before that, I want to fix the problem that image doesn't get resized.

how about using an `ImageButton` like [this](https://stackoverflow.com/a/20636735/8872691) — m'hd semps, Jul 17 '20 at 09:45
@m'hdsemps I have to insert text into button, so I can't use `ImageButton`. — tetratheta, Jul 17 '20 at 12:03
@IntelliJAmiya It is just WebP image file. What that image look like is shown in those images in question. — tetratheta, Jul 17 '20 at 12:04

score 0 · Accepted Answer · answered Jul 17 '20 at 09:46

0

You can use MaterialButton and iconSize attribute.

or use VectorDrawable instead of png image, in this way you can set width and height in your xml file, like this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#fff"
    android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z" />
</vector>

answered Jul 17 '20 at 09:46

Andriy D.

1,801
12
19

I used WebP which is converted from a PNG file. Also as far as i know, there isn't perfect way to convert PNG to SVG file... I will look into `MaterialButton` then. Thanks! – tetratheta Jul 17 '20 at 12:05
@tetratheta I hope that with MaterialButton you will able to fix the issue – Andriy D. Jul 17 '20 at 12:17

Image doesn't resized even if size is defined in XML (Android Studio)

1 Answers1