Android ImageButton Resolution Problems

Question

I want to have two buttons at the top of my program taking users to different activities. I'm having a lot of trouble with the formatting.

How can I make it so that the buttons will stretch proportionally based on the screen size? Right now, they will look OK for one screen size, then I will switch to a different one and it will appear all smushed or stretched. I've tried all of the different ScaleTypes and none seem to make a difference. I also went though and proportionally saved all of the images to the correct sizes regardimg xhdpi, hdpi, etc using Shubhayu's answer.

Here's my code so far:

<LinearLayout 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="@drawable/brushed_metal_background_dark"
tools:context=".HomeActivity" >

<ImageButton
    android:id="@+id/incidentsSelect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/incident_bar2"
    android:contentDescription="Incidents"
    android:onClick="chooseIncident"
    android:scaleType="center" />

<ImageButton
    android:id="@+id/operationalPeriodsSelect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/operationalperiod_bar2"
    android:contentDescription="Operational Periods"
    android:onClick="chooseOperationalPeriod"
    android:scaleType="fitCenter" />

score 2 · Accepted Answer · answered Dec 16 '12 at 21:03

Change android:background to android:src that will keep the aspect ratio. Use android:scaleType="centerInside" to fit whole image inside button area and optionally use android:adjustViewBounds=true to remove empty spaces. Example:

<ImageButton
    android:id="@+id/incidentsSelect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:contentDescription="Incidents"
    android:onClick="chooseIncident"
    android:src="@drawable/incident_bar2"
    android:scaleType="centerInside"
    android:adjustViewBounds="true"/>

<ImageButton
    android:id="@+id/operationalPeriodsSelect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:contentDescription="Operational Periods"
    android:onClick="chooseOperationalPeriod"
    android:src="@drawable/operationalperiod_bar2"
    android:scaleType="centerInside"
    android:adjustViewBounds="true"/>

Thanks! I also had to use android:background="@null" to get rid of the icky background border thing. — Eichhörnchen, Dec 16 '12 at 23:54

score 0 · Answer 2 · answered Dec 16 '12 at 20:35

0

I am guessing that you are trying to size the buttons evenly on the top of the screen. If that's the case then you should set android:layout_width="0dp".

answered Dec 16 '12 at 20:35

dpnevmatikos

79
1
5

I'm not having an issue with making them even, it's basically the height that's giving me the problems. I think it's evenly stretching the width, but not the height, so basically if the screen is a little smaller, my buttons are huge and fat and if it is larger, they' get really skinny. – Eichhörnchen Dec 16 '12 at 21:01

score 0 · Answer 3 · answered Apr 17 '13 at 09:28

0

Just use android:layout_width = "wrap_content"

answered Apr 17 '13 at 09:28

Sukumar Nagarajan

532
7
24

Android ImageButton Resolution Problems

3 Answers3

Linked