I am trying to scale an image down from 109x105 to 48x48 to make a button background. I have done the scaling in photoshop and the image is a vector.
However when I run it on my phone the smaller image comes out blurry. The large image is perfect and I can load that onto the phone with no problems so the quality loss. I must mention there is some text in the image too where the blurriness is quite obvious.
I have attempted to use the 9 patch drawable, making the whole image stretchable. I can't seem to find any answer on line that addresses this issue precisely so any input would be useful.
My question is, how do I scale the PNG image down without losing quality? Is this something I can do before I copy the image into my drawable folder or is it something I can let android do automatically.
Edit: The issue is evident in the 3 buttons near the end of the code "#drawable/map" "#drawable/block_small" and "#drawable/share"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/expandable_deal_back_white"
android:orientation="horizontal"
android:padding="8dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:contentDescription="#string/logo_content_description"
android:maxHeight="100dp"
android:maxWidth="100dp"
android:minHeight="100dp"
android:minWidth="100dp"
android:scaleType="fitXY"
android:src="#drawable/food_selector" />
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="23dp"
android:background="#drawable/button_selector_new"
android:padding="8dp"
android:text="#string/tandc"
android:textColor="#drawable/button_text_selector_new" />
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:background="#drawable/map"
android:text="#string/empty" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button2"
android:background="#drawable/block_small"
android:text="#string/empty" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/button2"
android:background="#drawable/share"
android:text="#string/empty" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
how do I scale the PNG image down without losing quality?
You don't. By definition a smaller (by pixel count) image has less data.
That said, there are a couple of things you want to check to ensure the blurriness is due to loss of image quality and not some other factor. Does the small image look fine on your computer? Have you made sure you are putting the images in the correct drawable folders?
Related
Im making a quiz app, and want this bulb image to be present throughout.
I tried adding an ImageView in the layouts, got it to show on the preview,
But when I run the app, image is not shown.
I tried changing the XML code from
app:srcCompat="#drawable/bulb" to android:src="#drawable/bulb"
(crashed my app)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#color/colorPrimaryDark"
android:orientation="vertical" >
<ProgressBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/progress_bar"
style="#android:style/Widget.ProgressBar.Horizontal"
android:indeterminate="false" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/progress_bar"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/score"
android:textColor="#color/colorText"
android:textStyle="bold"
android:textSize="25sp"
android:text="#string/initial_score"
android:padding="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="50dp"
android:id="#+id/question_text_view"
android:gravity="center"
android:padding="20dp"
android:text="#string/question_1"
android:textColor="#color/colorText"
android:textStyle="bold"
android:textSize="30sp" />
**<ImageView
android:id="#+id/bulbimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="40dp"
android:paddingTop="60dp"
android:paddingRight="40dp"
android:paddingBottom="50dp"
app:srcCompat="#drawable/bulb"
android:contentDescription=""/>**
<LinearLayout
android:layout_centerHorizontal="true"
android:layout_above="#id/score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="20dp"
android:orientation="horizontal">
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:id="#+id/true_button"
android:text="#string/true_button"
android:textColor="#color/colorText"
android:textStyle="bold"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:background="#color/colorTrueButton"
android:textSize="20sp" />
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:id="#+id/false_button"
android:text="#string/false_button"
android:background="#color/colorFalseButton"
android:textColor="#color/colorText"
android:textStyle="bold"
android:textSize="20sp"/>
</LinearLayout>
</RelativeLayout>
Check if the image is in drawable folder not in drawable-21 or anything..
Try to add height and width (like 100dp) to image.
Or just check if image is too large!!
If no Syntactical error is present in the code,(Either in the main.java file or the activity.XML file)->
Simply reduce the size of the image being used.
(Either by cropping or compressing)
Detailed logic ->
The maximum size of a Bitmap will vary from device to device, depending on the heap space available. The heap space required as a minimum on any device with Google Play is 16 MB.
The rest of your app also runs in the same heap space, so the entire heap is not available for a single Bitmap.
Additionally, the size of the bitmap will vary depending on the color format and height and width.
The best policy is to load only the size of the bitmap required for that screen size into memory, and nothing bigger.
I found a lot of question were asked on supporting different screen size where the screen size are varies from Tablet to phone and etc. I am writing my first android application and when I am looking at the layout in different phone, All of them are not relatively scalable to screen.
I am pasting a small RelativeLayout code here to understand how to make it proper scalable in less changes. I also followed the android official doc and learn two things
drawable images for different screen
use sp for mentioning text size and for rest of them use dp
But it's not helping me
Code
<?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"
android:background="#ffd5d6d6">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:background="#ffffffff"
android:elevation="#dimen/abc_action_bar_default_height_material">
<ImageView
android:id="#+id/back"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:src="#drawable/ic_back" />
<TextView
android:id="#+id/profileDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Test"
android:textColor="#ff3c3f41"
android:textSize="15dp" />
<ImageView
android:id="#+id/flag"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="false"
android:layout_alignWithParentIfMissing="false"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="#drawable/temp_ic_share" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="52dp">
<TextView
android:id="#+id/roommate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="Who are you?"
android:textColor="#ff3c3f41"
android:textSize="18dp" />
<Button
android:id="#+id/foodie"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="60dp"
android:layout_height="38dp"
android:layout_alignParentStart="false"
android:layout_marginLeft="56dp"
android:layout_marginTop="80dp"
android:background="#fa6425"
android:text="Foodie"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button4"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_marginLeft="15dp"
android:layout_marginTop="80dp"
android:layout_toEndOf="#+id/foodie"
android:background="#fa6425"
android:text="Beach bum"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
<Button
android:id="#+id/button5"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="80dp"
android:layout_height="38dp"
android:layout_alignTop="#+id/button4"
android:layout_marginLeft="15dp"
android:layout_toEndOf="#+id/button4"
android:background="#fa6425"
android:text="Tree hugger"
android:textColor="#fff4f4f4"
android:textSize="12dp" />
</RelativeLayout>
<Button
android:id="#+id/button"
style="#style/Widget.AppCompat.ButtonBar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#fa6425"
android:text="Send"
android:textColor="#fff4f4f4" />
</RelativeLayout>
As you can see that I am including two Parallel RelativeLayout in one main RelativeLayout. here the views on three different size:
nexus one
nexus 5
nexus 6
Best alignment is in Nexus 5 screen. Do I need to create different layout folder i.e. hdpi, mdpi and etc? If I am not wrong then I don't need to because my application is going to run only on phone devices (in portrait mode only).
How can I make scalable screen layouts. Any help would be appreciable :)
If you want to force all the views to have the same ration on screen the only way is to give it a size dynamically after you calculated the ratio between the desired pixels and the screen density, which is not really a solution, What you need to understand is when working with various screen sizes, each one suppose to behave differently, a Tablet screen is expected to be bigger and thus having more room for elements to show up on screen, a phone screen is smaller and less elements should be showed on screen, you need to adjust your view to support all of these screens and the proper way is to write a different layout for tablets and phones, or even different layout by screen dpi.
I am pretty new, I am using Android Studio, is that what you are using? First thing first, if you always want you activity to be in portrait mode, use this code in your manifest, you have to add the code to each activity you want to stay in portrait mode. If you don't, and you don't add code to handle the switch in screen orientation, the phone will likely crash.
<activity
android:name=".TitleActivity"
android:label="#string/title_activity"
android:screenOrientation="portrait" >
</activity>
Instead of a relative view, Try the Linear Layout.
You would have your Main Layout, with a few nested Linear Layouts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/example">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Title Here"
android:id="#+id/Title"
android:layout_gravity="top|center_horizontal"
android:layout_marginTop="20dp"
android:gravity="center_horizontal"
android:layout_marginBottom="20dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginBottom="50dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_weight="1"
android:layout_marginLeft="10dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button2"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button3"
android:layout_weight="1"
android:layout_marginRight="10dp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal"
android:background="#drawable/test"
android:layout_margin="50dp" />
</LinearLayout>
This layout has A title Above the three buttons, Then three buttons, then an image view below, it scales from 3.7 to 7.0. Larger than 7, I would make another layout.
You need an image named test in your drawable file.
use this Library will help you to set a Responsive scalable Views for all the devices Layouts
https://github.com/intuit/sdp
irs really easy and simpl just replace.
android:layout_width="50dp"
android:layout_height="60dp"
with.
android:layout_width="50sdp"
android:layout_height="60sdp"
and for textView
android:textSize="60ssp"
instead of. sp
I am very very new to developing with Android on Eclipse.
I am making a basic relative layout and have a title, welcome msg, image, final text. in portrait mode.
The image seems to be the issue. When I am in a 2.7" screen the view bounds extend to the left and the right which is fine as there is nothing there. However if I move to a 7" or 10" view the image bounds extend up and down which pushes the text on top up and on the bottom down. So now there is a rather large chunk of white space.
http://imgur.com/GeM4psS this is the image when in 7-10" portrait (see the blue bounds pushing text away)
http://imgur.com/16JCtSy this is the image when in 2.7" and now the bound push to the left and right but don't cause any issues.
Optimally I would like for the image to just be always within those bounds. Below is all the xml involved. No java was changed. Appreciate any help. Thanks. A heads up if I change it to fitxy it stretches the image.
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="cs.play.quotably.MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/app_name"
android:textSize="30sp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/textView3"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/fdr"
android:scaleType="fitCenter"
android:src="#drawable/fdr" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/welcome"
android:textSize="15sp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/quote1"
android:textSize="15sp" />
</RelativeLayout>
Thanks for any and all help!!
you should try this one.
change the width and height to 30dp and it is not a fixed value.
just try different values like 40dp and 50dp.
and once you satisfy test it on both devices.
it should work
<ImageView
android:id="#+id/imageView1"
android:layout_width="30dp"
android:layout_height="40dp"
android:layout_above="#id/textView3"
android:layout_below="#id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="8dp"
android:adjustViewBounds="true"
android:contentDescription="#string/fdr"
android:scaleType="fitCenter"
android:src="#drawable/fdr" />
I am using some .png images for my Android app's UI. I have kept the images in the 'res/drawable' directory. I read in some tutorials that Android automatically scales up the images when the screen resolution is bigger than mdpi. But when I run my app on big screened devices, the images are displayed as their original sizes, and not scaled up. Rest of the space is empty( black). What am I doing wrong here? Below is the XML for my layout, if it helps:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:theme="#android:style/Theme.Black.NoTitleBar"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/volbar" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/head" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_marginBottom="33dp"
android:layout_marginRight="19dp"
android:text="#string/press_to_update" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/frag11"
/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView9"
android:layout_alignParentLeft="true"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/base" />
</RelativeLayout>
I'm guessing that you want your image to scale up to fill the space. If that is the case, you will need to specify scaledType for your ImageView:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="cropInside" />
Experiment with different values from ImageView.ScaleType to get the effect you want.
FYI, when you put an image in res/drawable, it is scaled according to device density. For instance, if your png is 200x150, it will be scaled to 300x225 on a device with 1.5 density. This scaling happens independent of the scaleType.
I used relativelayout and here is what I've got. I can't get the image to fill the section I want. I don't know how to fix it. I've heard something about using layout weight, is that some thing I should use?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<ImageView
android:id="#+id/imagehome"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_margin="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvtitle1"
android:src="#drawable/one" />
<TextView
android:id="#+id/tvtitle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Voted Best Dentist five years running by"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvtitle2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"/>
<TextView
android:id="#+id/tvtitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="The Oakland Tribune"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvhome"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"/>
<TextView
android:id="#+id/tvhome"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" You'll be cared for by our highly trained staff of dental professionals,energized to work as a team while providing the highest quality of care for your dental health. We offer complete dentistry for the entire family at a single location. "
android:textColor="#4C2016"
android:textSize="15dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/special"
android:layout_marginBottom="25dp" />
<Button
android:id="#+id/special"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:text="Specials"
android:textColor="#F6E6C6"
android:textSize="17dp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvbutton"
android:layout_marginBottom="15dp" />
<TextView
android:id="#+id/tvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App provided by Bay Area Dental Marketing"
android:layout_centerHorizontal="true"
android:textSize="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
on the xml file,
and on the device
It got better but it'snot there yet!
Not sure how much flexibility you have but the best solution would be to remove the text and image from the background and add them as views instead. As you have experienced unless each piece is added as a view it is nearly impossible to guarantee it will look correct on all devices.
When working with multiple screen sizes, I have found it best practice to either (a) use RelativeLayout, or (b) set a LinearLayout inside a ScrollView.
Use RelativeLayout so you won't have to specify the pixels.
Alternativley if you are doing that for one particular phone select corresponding screen size in the XML designer in Eclipse. Yet, using RelativeLayout guarantees it will work on all the phones
Even using the suggested answers above you may still run into problem on different size screens. The best solution I can think of is to create separate image resources for the background and foreground then add an image view with the foreground image as the source.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background" >
<!-- This method makes this layout redundant, dont need this anymore
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:layout_marginRight="15dip"
android:layout_marginTop="255dip"
android:orientation="vertical" >-->
<!-- put the foreground image in an imageview -->
<ImageView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/foregroundImage"/>
<TextView
android:layout_width="276dp"
android:layout_height="132dp"
android:textSize="15dp"
android:gravity="center_vertical"
android:text="some text"
android:textColor="#4C2016"/>
<Button
android:id="#+id/special"
android:layout_width="131dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:layout_marginTop="20dip"
android:layout_marginLeft="75dip"
android:textSize="17dp"
android:textStyle="bold"
android:text="Specials"
android:textColor="#F6E6C6" />
</LinearLayout>