ImageButton doesn't scale / adapt according to different resolutions - android

I have a imagebutton placed inside a RelativeLayout.
However I can't seem to figure out what I need to do in order for the button to scale according to different resolutions.
Here's the content of my activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/background" android:scaleType="fitCenter" android:gravity="center"/>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#null"
android:onClick="startVideo"
android:scaleType="fitCenter"
android:src="#drawable/button" android:layout_marginBottom="50dp"/>
</RelativeLayout>
background.png is an image placed in the mdpi folder (1280x800px), button.png is also placed in the mdpi folder (757x271px).
If I run my app on a 1280x800px resolution (galaxy tab) it looks fine, however when I try to run the app on my phone the ImageButton doesn't scale down - it keeps the original size (757x271px).
Does anyone know a solution for this?

Did you create alternative layout resources with modifiers like layout-large, layout-small and so on? If you only have one layout it's not guaranteed to scale properly on any screen. Also consider specifying dimensions in dp for the related view

I gave up on solving this by only using one big image that were scaled down like I wanted to.
So in the end I had to create different versions of the image for the imagebutton, and place them in the correct folders, ie:
drawable-large-hdpi
drawable-large-mdpi
drawable-normal-hdpi
drawable-normal-mdpi
etc.
I then get the desired result from the ImageButton.
Thanks anyway for the help Maver1ck and talhakosen, your comments helped me understand how the different resource folders work for images and layouts.

Related

How to set screen resolution for 1440 X 2880 and 1440 X 2560 in android?

I have one designing in android that images are showing different in 1440 X 2880 screen and 1440 X 2560 screen. How to do this correctly? Specially for the screen 1440 X 2880. I have created hdpi, mdpi,xhdpi,xxhdpi,xxxhdpi images still i am not getting the result.
<?xml version="1.0enter code here" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/view_toolbar_logo"
android:id="#+id/relToolbar">
</include>
<RelativeLayout
android:layout_width="match_parent"
android:layout_below="#+id/relToolbar"
android:layout_marginRight="#dimen/_12sdp"
android:layout_marginLeft="#dimen/_12sdp"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/test"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/im1"
android:background="#drawable/ranking"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/im1"
android:layout_marginTop="#dimen/_10sdp"
android:background="#drawable/coin"/>
</RelativeLayout>
An images are from the .psd to .png with the help of adobe Xd tool I need design like first snap in image
Based on what has been said on the comments I think your problem comes from misunderstanding how to set constraint to views using android layouts and views, and not from the resolution of the screens you're working on. Reading on the topic will surely help you out.
I see two solutions to your problem, both of them include changing the layout you're using. On one hand, you could change your RelativeLayout for a LinearLayout and google some tutorial on view weights, and on the other hand you could use the more modern ConstraintLayout and read a little about how linear groups and chains work.
I'll leave links to the docs here and here to help you get started

Android - ImageView - Multiple Screen Support - Set height/width as dp or match_parent/wrap_content?

I am currently trying to adjust my Android App so it will look and feel similar on multiple screens/devices.
I know by now that a major part in this is to provide multiple image sizes for every image file according to the x1, x1.5, x2, x3, x4 ratios for mdpi, hdpi, xhpi, xxhdpi and xxxhdpi respectively, and I have finished doing so today.
After doing this, I have defined Density independent Pixel dimensions in the #dimen.xml values resource that correspond with the actual image sizes in pixels of the MDPI resources. Subsequently, i have set the imageviews in question's layout_width and layout_height to this dimension.
I am currently at a loss, however, as to why my application still looks significantly different on an MDPI emulator than it does on an HDPI emulator. To highlight what I mean, I'll provide the following screenshot showing the HDPI and MPDI emulator next to one another (left is HDPI (4" WVGA Nexus S) and right is MDPI (5.4" FWVGA)). I want both of them to look like the MPDI version, but what I've done so far apparently isn't working.
I have three theories of my own as to why this is not working the way I intend it to:
1. I am not supposed to set ImageView layout_width and layout_height to a dp value, but rather match_parent or wrap_content (?) (and change the structure of my .xml layouts in the process).
2. I am not only supposed to define multiple drawable resources, but also multiple layout resources for different screen sizes (?).
3. I have misunderstood the entire idea behind how this is supposed to work (?).
I will also give you an example of one of the list items that can be seen in the first screenshot (#drawable/phone_speed_icon is a 64 x64 pixel resource in MPDI and a 96x96 resource in HDPI, and #dimen/icon_attribute_size is 64dp):
<LinearLayout
android:id="#+id/llSpeed_PreSession"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:weightSum="100">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="#dimen/icon_attribute_size"
android:layout_weight="20"
android:weightSum="100">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="70"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="#dimen/icon_attribute_size"
android:layout_height="#dimen/icon_attribute_size"
android:src="#drawable/phone_speed_icon" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="30"
android:gravity="center_vertical"
android:paddingStart="10dp"
android:text="Speed"
android:textAppearance="#android:style/TextAppearance.Large"
android:textColor="#878787"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="80"
android:gravity="center">
<android.support.v7.widget.SwitchCompat
android:id="#+id/swSpeed_PreSession"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
In the end, I have four questions that I'd like answered:
1. How do I make the list items in screenshot 1 look the same on MDPI devices as HDPI devices? Does this have anything to do with one of the three theories I mentioned earlier?
2. Why is the header text ("What do you want to measure?") wrapped on one device, but not on the other? They use the sp unit (via android:style/TextApperance.TextApperance.Large)?
3. Shouldn't everything be more spaced out on an HDPI device (if anything) rather than less spaced out? The HDPI emulator looks as if it "has got way less pixels available", if you can understand what I'm saying even a little.
4. How do I make the Fragments on the second screenshot look the same? Or should i not even want this, because the HDPI is (for some reason) physically smaller, which is why the layout is less spread out?
Anyway, I have been at this all day and the more I read the more thouroughly confused I get, so any help is greatly appreciated!
You have the option to create multiple dimens.xml files depending on a variety of factors. Here you'll see what my current project looks like with the various dimens.xml files in Android Studio based on screen width.
However, you can have different requirements for each dimens file you want. For example, you can create dimens files for each density:

Tool/way to preserve handset layout proportions on tablet devices

Here's an example layout:
<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"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/hello_world" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
On a handset(480x800) and a tablet(1280x800) the layout has different amount of space left from the imageview to the bottom. The image isn't scaled on the tablet and dp values result in relatively same physical values.
Is there a way/tool to save handset proportions for tablets so that images, spaces(dp) get scaled? I guess, I could use values-xlarge/dimen.xml, values-720dp/dimen.xml, but it's a lot of mechanical job to. Any better solution ?
If you want to adjust scaling of ImageView
add
android:scaleType="fitXY"
Here are the ImageView Scale types
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Try this:
<LinearLayout
:
:
android:focusable="true"
:
/>
If you want your app to be 2 times bigger (all dimentions and font sizes x2) on 2 times larger dispay you can manually change display density (reduce it in a half). Android wont mind and will work as usual. I use this trik when I want my app to be the same and only change scale depending on screen size. Read about Configuration/DisplayMetrics/updateConfiguration. Here is draft code you should run in activity's onCreate. I give you exact code later.
DisplayMetrics dm = context.getResources().getDisplayMetrics();
// fix display density here to scale all activity's dimentions
context.getResources().updateConfiguration(null, dm);
But it isn't proper android way. You should provide different resources for different screen sizes using appropriate resourse folders.

Android layout issue for high end devices

Am a newbie to Android UI...
I got the layout below which is basically a image view, a image button (that is hidden until a certain logic is met) and another image view at the bottom.
This layout works fine in ldpi devices but look bad on other devices... I also had to resize the image by changing its height so it influence the quality of the image.
How can I resolve this by having a standard view that will work?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/welcomeTutorialImage"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:contentDescription="#string/welcome_tutorial"
android:src="#drawable/welcome_tutorial_browse" />
<ImageButton
android:id="#+id/welcome_tutorial_start_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/welcomeTutorialImage"
android:layout_centerInParent="true"
android:layout_centerVertical="false"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:contentDescription="#null"
android:src="#drawable/btn_startsavingstatic" />
<ImageView
android:id="#+id/welcomeTutorialProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/welcome_tutorial_start_btn"
android:layout_centerInParent="true"
android:contentDescription="#string/welcome_tutorial"
android:src="#drawable/welcome_tutorial_bar1" />
</RelativeLayout>
You might want to look at android:fitXY property of ImageView. Also, post screenshots that could explain the issue further. There might be a need to have different sized images for different screen sizes/resolutions (ldpi, mdpi, hdpi, xhdpi)
most of the time, you have to adjust the layout and the image resolution for your application to make it flexible with other devices by placing them to the right folder like:
-drawable
-drawable-1280x752
-drawable-800x480
-drawable-hdpi
-drawable-ldpi
-drawable-mdpi etc.
-layout
-layout-land-1280x752
-layout-800x480
-layout-land
etc.
by placing your layout and image to there designated folder, you have to change each layout and image sizes that will much the requirement of each folder.
and if you need further reference you can check this out
http://developer.android.com/guide/practices/screens_support.html

Font size for different density devices

When I tested the font size with different density settings using the Eclipse Emulator, I get different size fonts even though I am using "dp" to specific the size. I would have thought the size may decrease with higher density, but I found the higher the density, the bigger the font is. I tried using "in" and "mm" and the same behavior occurs, in that the higher density, the bigger the fonts. This is based on android:minSdkVersion="10".
Is there any way I can set the font sizes to scale to the same size for the different density?
Here is the xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:layout_gravity="center"
android:textColor="#color/orange"
android:textStyle="bold"
android:text="THIS IS A TEST"
android:background="#color/white"/>
</LinearLayout>
Unfortunately I cannot post the images of the font size for the three Emulator settings due to lack of reputation.
Thank you.
I had the same problem... And did't found anything, but making folders:layout-small...large, xlarge, and folders with drawable images for high, mid and small densities with resolutios of images according to it... So, everything works well on different droids with different screens... For every display size there is layout with different meanings of dp...((
Use sp instead of dp
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_gravity="center"
android:textColor="#color/orange"
android:textStyle="bold"
android:text="THIS IS A TEST"
android:background="#color/white"/>
</LinearLayout>
I guess one way is this:
When you make new layout file there is next button in eclipse. Press that and there is a list where to pick layout's density. You can pick x-high density, high density, medium density etc.. When you press finish it makes layout folder like "layout-hdpi" (depends what density you pick). And then make text fit good with that density.
Hope that helps. :)

Categories

Resources