Develop Reference

Android splash screen without logo distortion

Is it possible to create a splash screen with a logo that maintains its aspect ratio while the background image can be resized independently? I'm currently using several .png files for different resolutions and they look great on most devices. However, there are a few phones that distort my logo severely (i.e. the Samsung S8, with move vertical screen space).
I can deal with some distortion for my splash screen background, but the skinny/squashed logo is unacceptable. Does anyone know how to do this? And would a vector drawable logo be better than a .png for the new layout?

Rendering a splash view in a layout.xml instead of as a theme background (like other answers here recommend) takes longer to load. This is because the app's theme is loaded first, then the Activity is constructed and the layout inflated last. Since the purpose of a splash screen is to display something while the app loads, having a ~0.5s delay in loading the splash screen itself results in a noticeable delay. Loading a splash as a theme windowBackground performs better (renders almost instantly after tapping the launcher icon), but has some restrictions to work around. Your current method of defining multiple logo sizes depending on the screen width is the correct way to handle this situation. Here is an example configuration, which handles differences between pre and post Android v21:
values/themes.xml:
<style name="SplashThemeCommon" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowBackground">#drawable/splash_logo_theme</item>
</style>
<style name="SplashTheme" parent="SplashThemeCommon">
<item name="android:windowFullscreen">true</item>
</style>
values-v21/themes.xml:
<style name="SplashTheme" parent="SplashThemeCommon">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
drawable/splash_logo_theme.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash_logo"/>
</item>
</layer-list>
Next you can include a copy of "splash_logo.png" for different screen configurations. You have a couple reasonable options here. An exhaustive approach might include different logos for each screen size:
drawable-sw320dp-xxxhdpi/splash_logo.png
drawable-sw400dp-xxxhdpi/splash_logo.png
drawable-sw480dp-xxxhdpi/splash_logo.png
drawable-sw600dp-xxxhdpi/splash_logo.png
drawable-sw720dp-xxxhdpi/splash_logo.png
drawable-sw820dp-xxxhdpi/splash_logo.png
The "swXXXdp" means that XXX is the smallest screen dimension (width or height) in dp. 820dp is going to be a huge tablet, 320dp will be an old small device, and most flagship devices today will be in the 400dp category. A 450dp wide device would use the 400dp image.
Why did I define xxxhdpi here? Because if you don't specify, Android will assume it is an mdpi image and try to upscale/resize for higher dpi devices (most flagship phones today are xxhdpi). This upscaling will result in your image being blocky, and larger than the original. By specifying xxxhdpi here, Android will only try to downscale the image ensuring that the image never goes blocky; this is a optimization so we don't also need to define separate images for ldpi, mdpi, hdpi, xhdpi etc.
Having 6 images in the APK is kind of a waste though. We can futher optimize this approach in order to include less images in the app and ensure a smaller APK size. Instead, let's include only the following two images:
drawable-sw600dp-xxxhdpi/splash_logo.png
drawable-xxxhdpi/splash_logo.png
Any devices 600dp and larger (tablets) have a larger copy of the image to take advantage of the larger screen real estate, while all other phones use a smaller copy located in the bin with no screen width qualifier. The drawback here is since each bin covers such a large range of screen widths, the logo on a 4" device will take up a larger portion of the screen than on a 6" devices. This is a compromise to cut down the APK size, and most users won't notice so long as the image never gets cut off even on the smallest device.
So what size png's should we include? They need to be a particular size to be displayed in a theme, since unlike in a layout.xml we cannot specify a width/height in the XML (drawable width/height support was only added in API 23). This means if you include a non-optimal png size, it will appear too small or two big; if its too big it will actually get cut off. A good plan to get the right size is:
Create an layout/test.xml file with just the default LinearLayout and no visible content
Open it in Android Studio and select the Design tab in the layout editor's bottom left corner
Change the theme to SplashTheme in the layout editor's top bar
Change the device to "Pixel XL"
Place an image under drawable-sw400dp/splash_logo.png
Open the image in an external image editor such as Photoshop or Gimp, change the size, save, then check the layout in Android Studio (you may need to close and reopen the editor for the change to take effect). Repeat until the image looks the correct size in the layout
Generate images for the other screen widths proportionately; for example the sw320dp image should be 320/400 or 67% of the 400dp image size, while the 720dp image should be 720/400 or 180% of the 400dp image size. Remember not to upscale your 400dp image for the larger images as you will lose quality. Instead, generate all the images based on your high quality original copy
Place the generated images in the different drawable directories as specified above
Select devices of different screen sizes (including tablets) in the layout editor and make sure they logo is large enough, but not cut off, for all screen sizes
How do you know which device screen resolution belongs to which swXXXdp category? This requires a simple calculation. Lets look at the Pixel XL:
The screen size is 1440x2560
The smallest dimension is therefore 1440
The screen dpi is 534
The screen width in inches is 1440/534=2.69"
Open the website: http://angrytools.com/android/pixelcalc/
Enter 2.69 in the inches ("in") box
One of the green boxes on the left will display the dp, in this case 431
With a 431 dp wide screen, the Pixel XL will use the drawable-sw400dp/splash_logo.png image if you have all 6 image categories, or the drawable-xxxhdpi/splash_logo.png image if you only have the two image categories

If you only have a portrait image for your splash screen, here's a solution which is full screen on portrait, and centred but not cropped on edit:
portrait landscape:
splash_screen.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutSplash"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/splash_screen_background">
<ImageView
android:contentDescription="#string/splash_screen_description"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
style="#style/SplashScreen" />
</LinearLayout>
values/styles.xml
<style name="SplashScreen">
<item name="android:src">#drawable/splash</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:scaleType">fitCenter</item>
</style>
values-port/styles.xml
<style name="SplashScreen">
<item name="android:src">#drawable/splash</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:scaleType">centerCrop</item>
</style>

Have you looked into maintaining the aspect ratio for the ImageView? Here is a relevant question that should point you in the right direction: How to scale an Image in ImageView to keep the aspect ratio

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/logo"/>
</RelativeLayout>
This will do this
This is on a nexus 10

No need to use layouts at all, use a LayeredList, and set it as the background. Here is an example;
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/gray"/>
<item>
<bitmap android:gravity="center" android:src="#drawable/splash_image"/>
</item>
</layer-list>

In Android resources/res folder, create a folder "drawable-xxxhdpi" and "drawable-sw600dp"
In "drawable-sw600dp" folder, add 'splash_logo.png' with resolution 4096x4096 pixels. This should cover tablets.
In "drawable-xxxhdpi" folder, add another 'splash_logo.png" with resolution 1440x2560 pixels. This should cover smart phones.
That's how to solve all distortions!

Android multiple screen size and avoid duplicating images

I have an app that displays a bitmap in a TextView as a "drawableTop":
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_weight="1"
android:drawableTop="#drawable/bitmap"
android:gravity="center"
android:text="#string/text" />
The bitmap comes from a PNG file in the res/drawable folder, let's call it bitmap.png.
I need to support multiple screen sizes and densities, and want to find the cheapest way (in term of how many PNG files I need to have in res/* folders) to do it.
Various densities: Phones only
I've come to the conclusion that it's enough to have the bitmap.png in res/drawable-xhdpi folder. When being displayed on phones with high density, it will be displayed as is, while on phones will lower density, it will be scaled down automatically.
In other words, no need for having lower resolution versions of the bitmap.png in res/drawable-hdpi, res/drawable-mdpi etc.
Basically only one version of the PNG file is enough for all phones.
Various densities: Tablets as well
Now, the problem arises if I want to support as well tablets: large and xlarge screens.
On tablets, I want the aspect ratio of the icon to be the same as it was on phones: If the bitmap took 1/4 of the screen on phones, I want it to take 1/4 of the screen on tablets. I cannot reuse the same PNG file as before or it would look too small since the tablet just has more pixels... So for tablets I need a higher res PNG. And this applies both to large screen and xlarge screens.
Which results in the need for 3 folders, and 3 versions of the PNG:
1: res/drawable-xhdpi/bitmap.png
2: res/drawable-large-xhdpi/bitmap.png
3: res/drawable-xlarge-xhdpi/bitmap.png
But 1 and 2 are basically lower res versions of 3.
So is there an easy way to have a single folder not 3?

If you want to keep only one image for all resolutions, why not keep in res/drawable and res/drawable-land folders?

If you are talking about cheapest way to do this (not adding more than one image in drawables), then use 9-Patch Images. If you dont know about it, then have a look n learn usage here:
http://www.androiddom.com/2011/05/android-9-patch-image-tutorial.html
http://www.androiddom.com/2011/05/creating-custom-drawn-button.html

Judging from your question, you don't need different orientated images for tablet or phone.
If you want the image to take 1/4 size on both devices, then define your image in your xml as using d(i)p. This will scale the image to the same size on all devices.
d(i)p is scaled relative to 640x480 (or 480x640 resolution for portrait orientation).
So you can calculate different combinations of resolutions to cover 1/4 screen space, such as 320x240 or 240x320
If you want control over the scaling of your image, I would suggest putting the image in an ImageView. This will allow you to use the android:scaleType property to scale your image how you wish.
You can set the background of your TextView to be transparent, and have the ImageView below it contained within a relativeLayout of your desired size to achieve the same effect as you current have, like so:
<RelativeLayout
android:layout_width="320dp"
android:layout_height="240dp"
>
<!-- Images at the top of the xml are drawn on the bottom! -->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/bitmap"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/text"
/>
</RelativeLayout>
Also consider using alias resources.
This will allow you to define an xml file which will act as if it's the real PNG image (and is referenced as such in R.drawable. , but is actually a reference to another image.
From the linked Google documentation:
To create an alias to an existing drawable, use the element.
For example:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/icon_ca" />
If you save this file as icon.xml (in an alternative resource
directory, such as res/drawable-en-rCA/), it is compiled into a
resource that you can reference as R.drawable.icon, but is actually an
alias for the R.drawable.icon_ca resource (which is saved in
res/drawable/).

Android splash screen image sizes to fit all devices

I have a full screen PNG I want to display on splash. Only one error there, and I have no idea
what size to put in every drawable folder (ldpi, mdpi, hdpi, and xhdpi). My application is supposed to run good and beautiful on all phones and tablets. What sizes (in pixels) should I create so the splash displays nice on all screens?

Disclaimer
This answer is from 2013 and is seriously outdated. As of Android 3.2 there are now 6 groups of screen density. This answer will be updated as soon as I am able, but with no ETA. Refer to the official documentation for all the densities at the moment (although information on specific pixel sizes is as always hard to find).
Here's the tl/dr version
Create 4 images, one for each screen density:
xlarge (xhdpi): 640x960
large (hdpi): 480x800
medium (mdpi): 320x480
small (ldpi): 240x320
Read 9-patch image introduction in Android Developer Guide
Design images that have areas that can be safely stretched without compromising the end result
With this, Android will select the appropriate file for the device's image density, then it will stretch the image according to the 9-patch standard.
end of tl;dr. Full post ahead
I am answering in respect to the design-related aspect of the question. I am not a developer, so I won't be able to provide code for implementing many of the solutions provided. Alas, my intent is to help designers who are as lost as I was when I helped develop my first Android App.
Fitting all sizes
With Android, companies can develop their mobile phones and tables of almost any size, with almost any resolution they want. Because of that, there is no "right image size" for a splash screen, as there are no fixed screen resolutions. That poses a problem for people that want to implement a splash screen.
Do your users really want to see a splash screen?
(On a side note, splash screens are somewhat discouraged among the usability guys. It is argued that the user already knows what app he tapped on, and branding your image with a splash screen is not necessary, as it only interrupts the user experience with an "ad". It should be used, however, in applications that require some considerable loading when initialized (5s+), including games and such, so that the user is not stuck wondering if the app crashed or not)
Screen density; 4 classes
So, given so many different screen resolutions in the phones on the market, Google implemented some alternatives and nifty solutions that can help. The first thing you have to know is that Android separates ALL screens into 4 distinct screen densities:
Low Density (ldpi ~ 120dpi)
Medium Density (mdpi ~ 160dpi)
High Density (hdpi ~ 240dpi)
Extra-High Density (xhdpi ~ 320dpi)
(These dpi values are approximations, since custom built devices will have varying dpi values)
What you (if you're a designer) need to know from this is that Android basically chooses from 4 images to display, depending on the device. So you basically have to design 4 different images (although more can be developed for different formats such as widescreen, portrait/landscape mode, etc).
With that in mind know this: unless you design a screen for every single resolution that is used in Android, your image will stretch to fit screen size. And unless your image is basically a gradient or blur, you'll get some undesired distortion with the stretching. So you have basically two options: create an image for each screen size/density combination, or create four 9-patch images.
The hardest solution is to design a different splash screen for every single resolution. You can start by following the resolutions in the table at the end of this page (there are more. Example: 960 x 720 is not listed there). And assuming you have some small detail in the image, such as small text, you have to design more than one screen for each resolution. For example, a 480x800 image being displayed in a medium screen might look ok, but on a smaller screen (with higher density/dpi) the logo might become too small, or some text might become unreadable.
9-patch image
The other solution is to create a 9-patch image. It is basically a 1-pixel-transparent-border around your image, and by drawing black pixels in the top and left area of this border you can define which portions of your image will be allowed to stretch. I won't go into the details of how 9-patch images work but, in short, the pixels that align to the markings in the top and left area are the pixels that will be repeated to stretch the image.
A few ground rules
You can make these images in photoshop (or any image editing software that can accurately create transparent pngs).
The 1-pixel border has to be FULL TRANSPARENT.
The 1-pixel transparent border has to be all around your image, not just top and left.
you can only draw black (#000000) pixels in this area.
The top and left borders (which define the image stretching) can only have one dot (1px x 1px), two dots (both 1px x 1px) or ONE continuous line (width x 1px or 1px x height).
If you choose to use 2 dots, the image will be expanded proportionally (so each dot will take turns expanding until the final width/height is achieved)
The 1px border has to be in addition to the intended base file dimensions. So a 100x100 9-patch image has to actually have 102x102 (100x100 +1px on top, bottom, left and right)
9-patch images have to end with *.9.png
So you can place 1 dot on either side of your logo (in the top border), and 1 dot above and below it (on the left border), and these marked rows and columns will be the only pixels to stretch.
Example
Here's a 9-patch image, 102x102px (100x100 final size, for app purposes):
Here's a 200% zoom of the same image:
Notice the 1px marks on top and left saying which rows/columns will expand.
Here's what this image would look like in 100x100 inside the app:
And here's what it would like if expanded to 460x140:
One last thing to consider. These images might look fine on your monitor screen and on most mobiles, but if the device has a very high image density (dpi), the image would look too small. Probably still legible, but on a tablet with 1920x1200 resolution, the image would appear as a very small square in the middle. So what's the solution? Design 4 different 9-patch launcher images, each for a different density set. To ensure that no shrinking will occur, you should design in the lowest common resolution for each density category. Shrinking is undesirable here because 9-patch only accounts for stretching, so in a shrinking process small text and other elements might lose legibility.
Here's a list of the smallest, most common resolutions for each density category:
xlarge (xhdpi): 640x960
large (hdpi): 480x800
medium (mdpi): 320x480
small (ldpi): 240x320
So design four splash screens in the above resolutions, expand the images, putting a 1px transparent border around the canvas, and mark which rows/columns will be stretchable. Keep in mind these images will be used for ANY device in the density category, so your ldpi image (240 x 320) might be stretched to 1024x600 on an extra large tablet with small image density (~120 dpi). So 9-patch is the best solution for the stretching, as long as you don't want a photo or complicated graphics for a splash screen (keep in mind these limitations as you create the design).
Again, the only way for this stretching not to happen is to design one screen each resolution (or one for each resolution-density combination, if you want to avoid images becoming too small/big on high/low density devices), or to tell the image not to stretch and have a background color appear wherever stretching would occur (also remember that a specific color rendered by the Android engine will probably look different from the same specific color rendered by photoshop, because of color profiles).
I hope this made any sense.

PORTRAIT MODE
MDPI is 320x480 dp = 320x480px (1x)
LDPI is 0.75 x MDPI = 240x360px
HDPI is 1.5 x MDPI = 480x720px
XHDPI is 2 x MDPI = 640x960px
XXHDPI is 3 x MDPI = 960x1440px
XXXHDPI is 4 x MDPI = 1280x1920px
LANDSCAPE MODE
MDPI is 480x320 dp = 480x320px (1x)
LDPI is 0.75 x MDPI = 360x240px
HDPI is 1.5 x MDPI = 720x480px
XHDPI is 2 x MDPI = 960x640px
XXHDPI is 3 x MDPI = 1440x960px
XXXHDPI is 4 x MDPI = 1920x1280px
EDIT:
I would suggest to use Lottie for splash screen if you are reading this in 2019+

PORTRAIT
LDPI: 200x320px
MDPI: 320x480px
HDPI: 480x800px
XHDPI: 720px1280px
LANDSCAPE
LDPI: 320x200px
MDPI: 480x320px
HDPI: 800x480px
XHDPI: 1280x720px

I have searched the best and the simplest answer to make 9-patch image. Now to make the 9 patch image is the easiest task.
From https://romannurik.github.io/AndroidAssetStudio/index.html you can make a 9-patch image for all the resolutions - XHDPI,HDPI,MDPI,LDPI in just one click.

Using PNG is not such a good idea. Actually it's costly as far as performance is concerned.
You can use drawable XML files, for example, Facebook's background.
This will help you to smooth and speed up your performance, and for the logo use .9 patch images.

Density buckets
LDPI 120dpi .75x
MDPI 160dpi 1x
HDPI 240dpi 1.5x
XHDPI 320dpi 2x
XXHDPI 480dpi 3x
XXXHDPI 640dpi 4x
px / dp = dpi / 160 dpi

In my case, I used list drawable in style.xml. With layer list drawable, you have just needed one png for all screen size.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#drawable/flash_screen</item>
<item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>
and flash_screen.xml in drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white"></item>
<item>
<bitmap android:src="#drawable/background_noizi" android:gravity="center"></bitmap>
</item>
</layer-list>
"background_noizi" is a png file in the drawable folder.
I hope this helps.

Some time ago i created an excel file with supported dimensions
Hope this will be helpful for somebody
To be honest i lost the idea, but it refers another screen feature as size (not only density)
https://developer.android.com/guide/practices/screens_support.html
Please inform me if there are some mistakes
Link1: dimensions.xlsx
Link2: dimensions.xlsx

Edited solution that will make your SplashScreen look great on all APIs including API21 to API23
If you are only targeting APIs24+ you can simply scale down your vector drawable directly in its xml file like so:
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
android:strokeColor="#292929"
android:strokeWidth="24" />
</vector>
in the code above I am rescaling a drawable I drew on a 640x640 canvas to be 240x240. then i just put it in my splash screen drawable like so and it works great:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">
<!-- The background color, preferably the same as your normal theme -->
<item>
<shape>
<size android:height="120dp" android:width="120dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
<!-- Your product logo - 144dp color version of your app icon -->
<item
android:drawable="#drawable/logo_vect"
android:gravity="center">
</item>
</layer-list>
my code is actually only drawing the triangle in the picture at the bottom but here you see what you can achieve with this. Resolution is finally great as opposed to the pixelated edges I was getting when using bitmap. so use a vector drawable by all means (there is a site called vectr that I used to create mine without the hasle of downloading specialized software).
EDIT in order to make it work also on API21-22-23
While the solution above works for devices runing API24+ I got really disappointed after installing my app a device running API22. I noticed that the splashscreen was again trying to fill the entire view and looking like shit. After tearing my eyebrows out for half a day I finally brute-forced a solution by sheer willpower.
you need to create a second file named exactly like the splashscreen xml (lets say splash_screen.xml) and place it into 2 folders called drawable-v22 and drawable-v21 that you will create in the res/ folder (in order to see them you have to change your project view from Android to Project). This serves to tell your phone to redirect to files placed in those folders whenever the relevant device runs an API corresponding to the -vXX suffix in the drawable folder, see this link. place the following code in the Layer-list of the splash_screen.xml file that you create in these folders:
<item>
<shape>
<size android:height="120dp" android:width="120dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
<bitmap android:gravity="center"
android:src="logo_vect"/>
</item>
For some reason for these APIs you have to wrap your drawable in a bitmap in order to make it work and jet the final result looks the same. The issue is that you have to use the aproach with the aditional drawable folders as the second version of the splash_screen.xml file will lead to your splash screen not being shown at all on devices running APIs higher than 23. You might also have to place the first version of the splash_screen.xml into drawable-v24 as android defaults to the closest drawable-vXX folder it can find for resources. hope this helps

** If you are looking for screen details for all kind of major devices **
go to material.io

Based off this answer from Lucas Cerro I calculated the dimensions using the ratios in the Android docs, using the baseline in the answer. I hope this helps someone else coming to this post!
xxxlarge (xxxhdpi): 1280x1920 (4.0x)
xxlarge (xxhdpi): 960x1440 (3.0x)
xlarge (xhdpi): 640x960 (2.0x)
large (hdpi): 480x800 (1.5x)
medium (mdpi): 320x480 (1.0x baseline)
small (ldpi): 240x320 (0.75x) 

Android custom RatingBar image artifacts

I implemented a custom RatingBar in an application on my ListView items.
Custom style ratingbar_red.xml:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:drawable="#drawable/star_off" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/star_on" />
<item android:id="#android:id/progress" android:drawable="#drawable/star_on" />
</layer-list>
Here's part of ListItem layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="15dp" >
<RatingBar
android:id="#+id/li_company_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="1dp"
android:isIndicator="true"
android:numStars="5"
android:progressDrawable="#drawable/ratingbar_red"
android:stepSize="1" />
<Button
android:id="#+id/li_company_callbtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginLeft="40dp"
android:contentDescription="#string/ContentDescription"
android:drawableLeft="#drawable/phone_icon"
android:drawablePadding="5dp"
android:onClick="callbtn_Click"
android:text="#string/CallButton"
android:focusable="false"
android:focusableInTouchMode="false" >
</Button>
</LinearLayout>
It works, but when the rating is set, I get some strange image artifacts; 2 vertical lines below the pink stars appear on my view:
Here is star_on.png
star_off.png looks okay, and if rating == 0, the lines don't appear.
I'm android beginner, and can't understand what the problem is.

Try giving height to RatingBar in xml layout like this:
android:layout_height="30dp"
30dp or whatever suits you..
Check out why is this happening ??

I had this issue to, looked like the bottom edge of custom star image being stretched. You don't have to set the layout_height of rating bar tag. You can set the min/max height on the rating bar (to same as image height).
Example from my styles xml.
<style name="GoldRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:minHeight">#dimen/rating_bar_height</item>
<item name="android:maxHeight">#dimen/rating_bar_height</item>
</style>
Dimens.xml
<dimen name="rating_bar_height">11dp</dimen>
The value should match that of the drawable used. 11 pixel high image, so the rating_bar_height was set to 11dp.

Another simple solution woud be to leave a row of empty pixels in the star image using an image editor like photoshop. Then the repeated or stretched row of pixels in the ratingbar would be empty. This aproach solved my issue.

I solved this problem in another way. I take my custom star png's, and in image editor add transparent line to the bottom of the image. The problem with vertical lines disappeared on all screens!

Its a Icon design issue. The Problem here is the padding around the icon. If you are creating a custom star icon make sure you leave some padding space between the star and the page boundary on which it lies.
If you are not sure how to do it try Android Asset Studio. You can see something like "Padding around Optical Icon" do not keep it to 0 dip.

Every body is suggesting something but no body is trying to explain why this happen. I am gonna try to explain it now. Of course this will happen only when you are trying to customise the rating bar images.
Imagine that we have custom image with size 72x72 pixels and this is our resource for XXXHDPI -(it is 4x).
Same image need to have copy inside XXHDPI, XHDPI, HDPI, MDPI and LDPI as well. I will miss last one resource directory for now.
Inside different directories this image need to be as follow:
for XXHDPI size copy image need to be 54x54 (this is 3x)
for XHDPI size copy image need to be 36x36 (this is 2x)
for HDPI size copy image need to be 27x27 (this is 1.5x)
for MDPI size copy image need to be 18x18 (this is 1x)
So now in this scenario if your Rating bar has height bigger then 18 dp for example 30 dp, you will see this bad image artefacts below every star image, BECAUSE obviously RatingBar is trying to fill the rest of it's height with something (your Image is 18 dp but the height of the bar is 30dp), so rest 12dp will be filled with this artefacts.
That's why if you set the rating bar height to be fixed size everything COULD be OK but also COULDN'T be OK. All this depends about your custom image size.
I think there has one solution which will work in all possible scenarios and this is :
Create image asset for all devices screens that your app will support XXXHDPI, XXHDPI or what ever you want.
Make sure that if your (MDPI which is 1x) image has for example height 20 pixels, your RatingBar height will not be bigger then 20 dp and everything will be OK.
NOTE: In this whole conversation we talk about dp (density pixels) not in px because if we provide all those image resources in every single res folder we will have chance to work with dp not with px. I hope the last sentence is clear and make sense.
EDIT: The other possible way is to leave some small padding (empty space) , maybe 1px or 2px at the bottom of your custom image. In that case RatingBar view will NOT display those artefacts pixels, because they will be taken from the padding part of your custom image, which actually is just empty (transparent) pixels. I personally think, that this is not the best way, because the image padding will create some space (padding) between RatingBar and the rest Views inside the layout. In that case you will not have absolutely full control of Views space, because some small part has been hard coded inside the custom image (those 2 px padding).

Just 2 pixel padding in image star in photoshop.
padding in xml not work, just padding star image in photoshop.
it's work very good.

I fixed my same problem by reducing "layout_height" since my image's height was less than the height that I had in layout_height.

Same issue. In my case
Put custom star images in /Drawable folder
and set "android:layout_height="30dip"
work fine!!

I was observing the issue due to vector drawable.
Once I added respective png images it started working.
Added this as answer as it may helpful to someone facing the same issue.

Why does image has larger size?

I'm using such layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/logo"
android:orientation="horizontal" >
The drawable/logo.xml:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/login_logo"
android:gravity="center" />
The drawable/login_logo.png has 280 pixels width, my Galaxy Tab screen width is 600px but in launched app I see the image takes almost all screen width and it is about 500px
Where did I make mistake?
SOLVED
By setting
<uses-sdk android:minSdkVersion="4" />
and putting image to drawable-hdpi

As you are saying it is for galaxy tab so it is coming under drawable-hdpi.So change the resolution of image with photoshop or something and put it inside drawable-hdpi.
and try to use android:layout_width="wrap_content". instead of android:layout_width="fil_parent"

You are setting your picture in background, and the android:background tag uses 9 patch images. So your background always stretches to the width and height of the view. Your layout width is set to fill_parent, so the image width is fill_parent too.
The solution could be to make a 9 patch image of the png you are using with .9.png extension.
Read here for drawing 9 patch images - developer.android.com/guide/developing/tools/draw9patch.html

I suggest that you have a good read of the documentation. If you have placed your image in the drawable-mdpi folder, then in high density screens the image will appear to be 1.5x in size. You will have to provide different resolutions of your image for different screen densities.