How to properly create assets?

Question

I'm strugling while creating designs for Android. According to some information that I've found, an MDPI screen has a 1 scale factor, So I create an image of 48dp = 48px and save it in the mdpi folder and then with the correct scaling factor, I'm saving it across the various places.

Now, I want to have a button that's the same height as my image, off course, in my layout I can declare a button of 48dp height, but then, when being used on other screens (say XXHDPI) the image and the button are not the same in height anymore.

Edit: Added the layout of the button

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp">
    <Button
        android:id="@+id/btnCamera"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@drawable/logon_camera_button"
        android:text="@string/logon_scanQrCode"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:layout_marginLeft="48dp"
        android:layout_marginRight="25dp"
        android:gravity="center" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/btnCamera"
        android:layout_alignLeft="@+id/btnCamera"
        android:id="@+id/imgCamera"
        android:src="@drawable/camera" />
</RelativeLayout>

Anyone who has some advice on this topic?

Kind regards

for button backgrounds you should be using nine patch images so they scale to fit the layout values — eduyayo, Sep 03 '15 at 08:13
Add xmls for style for the various densities and give your buttons a custom style. Or just the size (dimensions). — m02ph3u5, Sep 03 '15 at 08:14
So, I need to create a layout for each of the densities? Is this really the Android way to go? Isn't there a way so that buttons can scale automatically based on the density (as with the images)? — Complexity, Sep 03 '15 at 08:20
Actually, the way you describe it, your button and image should maintain same height across densities. How are you using your image, is it an imageview? what are the layout parameters? — Ivan Bartsov, Sep 03 '15 at 08:25
I've added it to the original question. You mind taking a look? — Complexity, Sep 03 '15 at 08:30
It should scale as intended, unless you copied your 48px image into the `xxhdpi` folder. `dp` and drawable size are multiplied by the same factor. — Ivan Bartsov, Sep 03 '15 at 13:02

score 1 · Answer 1 · answered Sep 03 '15 at 09:25

1

you can add a res/values-xlarge/styles.xml

<style name="height">
    <item name="android:height">50dp</item>
</style>

with varies device screen values-xxlarge, values-small, etc., values

and add this style to your button

  style="@style/height"

answered Sep 03 '15 at 09:25

arun

1,728
15
15

ref this too http://stackoverflow.com/questions/21280277/different-values-folders-in-android?answertab=votes#tab-top – arun Sep 03 '15 at 09:27

score 0 · Answer 2 · answered Sep 03 '15 at 08:42

If your button background is of shapes supported by ShapeDrawable then you can create one by creating xml in drawable folder and setting that as your button background. See the ShapeDrawable example below

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#f0600000"/>
    <stroke android:width="3dp" android:color="#ffff8080"/>
    <corners android:radius="3dp" />
    <padding android:left="10dp" android:top="10dp"
        android:right="10dp" android:bottom="10dp" />
</shape>

If its of any other shape or with text you can create a NinePatch image of it in such a way that text do not stretch only the portion without text stretch as per screen resolution. It is advisable to add the text using android:text property and give text size using android:textSize in sp. So you can add a image without text and set patch as that only the line portion is stretched and not the curves in the images if any.

Just to say, I don't have a text on the button. But I want my button on an MDPI screen to be 48dp height. If I have another screen desity, another image is chosen (because of the drawable folder with another resolution, but the button doesn't scale along with it). — Complexity, Sep 03 '15 at 08:53

score 0 · Answer 3 · answered Sep 03 '15 at 09:31

0

First of all remove the image what you want to set on view. Then download this software. And set Input Density on that software xxhdpi. and check all options. Then 9patch resize the image. and put them inside drawable and set to view. That's it.

answered Sep 03 '15 at 09:31

Das

141
13

score 0 · Accepted Answer · answered Sep 03 '15 at 13:24

Always start with highest resolution you are going to support. xxhdpi has a scaling factor of 3, so your xxhdpi version of the image should be 144px.

Nowadays, there are quite a few xxxhdpi devices, so you should probably go with 48 * 4 = 192px. Just place the highest res images into the -xxxhdpi folder (leaving mdpi and others empty) and let autoscaling do it's thing. And keep in mind the x4 multiplier when you assign sizes in dp.

E.g. if you want to maintain the 1:1 ratio of button height and image height, and your image is 192px in xxxhdpi bucket -- button should be 48dp.

In that scenario, say, on xxhdpi the image will get scaled by 3/4 to be 144xpx and 48dp button height will be scaled by 3 and also be 144px. For xhdpi that'll be 1/2 and 2, respectively, both resulting in 96px.

If you notice that autoscaled graphics look bad on some density, then provide hand-tuned resources for that density.

No need to provide custom styles/dimensions for different densities -- that is for when your [proportionally resized] UI doesn't look good on some densities and you decide to cope with this by using different proportions. For example if baseline (aka mdpi) size of some element is 24px, on ldpi that becomes 12px which may be too small, so for ldpi you set it to be 36dp=18px (using custom version of style, or, preferrably, dimension) which probably breaks UI proportions a bit but may look better nevertheless.

Thanks, this is fantastic answer. However, I start at MDPI (1x) and use vector-based graphics so I can scale to whatever resolution without an issue. — Complexity, Sep 03 '15 at 14:14

How to properly create assets?

4 Answers4