Develop Reference

Android splash screen vector aspect ratio

How can I keep aspect ratio of a vector drawable (#drawable/ic_splash_screen) and fit horizontally ?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"
android:gravity="fill" />
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/logo" />
</item>
<item
android:drawable="#drawable/ic_splash_screen"
android:gravity="bottom|fill_horizontal" />
</layer-list>
In my code , the SVG drawable vector fill_horizontal at the bottom but keep it's original height
I want to use it in splash screen and want keep aspect ratio

As #DeepThought I also think that your best bet is to go with gravity=center as it is the only way I know to preserve aspect ratio.
however, if you wrap your drawable in a bitmap (as he suggests) it will not work on APIs different from 21,22 and 23. All the while on these same APIs images will always look stretched if you do not wrap them into a bitmap. which is why I would recommend you create 2 versions of your drawable layer-list and put one into drawable-v21 and the other in drawable-v24.
for v24 you can try:
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"
android:gravity="fill" />
<item
android:gravity="center"
android:src="#mipmap/logo" >
</item>
<item
android:gravity="center"
android:src="#drawable/splash" >
</item>
</layer-list>
for drawable-v21 you use
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"
android:gravity="fill" />
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/logo" />
</item>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash" />
</item>
</layer-list>
as for making the drawable fill the view horizontally without destroying aspect ratio I really dont know how to achieve this in xml. the only thing I can think of is oversizing your your splash_screen.xml file by setting the android:height and android:width parameters and facing the fact that on some slimmer devices a larger portion of the edges to the left and right of your SplashScreen will be cutt off.
....but if you are really obsessed about getting splash_screen.xml to fit all the width of the screen precisely there is always the total overkill solution. for that I recommend you read the following resource. it would imply you creating a bunch of alternative drawable resources depending on screen dp dimensions i.e. drawable-sw360dp, drawable-sw720dp and so on and then put in them different versions of your splash_screen.xml that have android:height and android:width taylored to each screen.

Can you try with this change :
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"
android:gravity="fill" />
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/logo" />
</item>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash" />
</item>
</layer-list>

Try this
First imageView is your background, this will stretch to all side. Having adjustViewBounds will maintain it's height and won't cause stretch image.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:src="#drawable/ic_splash_screen"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#mipmap/logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

centered element in background doesn't match centered element in foreground

I'm working on an Android application where I want to create a windowBackground with a centered element and a layout also with a centered element. I want these elements to be in the exact same position, with the layout overlapping the background. The problem I'm having is that the layout and the background seem to be calculating center differently (see image). Why is this happening, and what can I do to line the elements up?
This is what I see right now. The red box is created by the background and the green box is created by the foreground. Screenshot was created with a Nexus 5X API 26 emulator.
Foreground layout:
<?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">
<View
android:background="#color/foreground_box"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_centerInParent="true" />
</RelativeLayout>
Background Drawable (applied via android:windowBackground in my theme)
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size android:width="10dp"
android:height="10dp" />
</shape>
</item>
</layer-list>
For clarity, my colors file is
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="background">#ffffff</color>
<color name="background_box">#AAFF0000</color>
<color name="foreground_box">#AA00FF00</color>
</resources>
Full source for this sample project is available at https://github.com/HofmaDresu/AndroidCenteredTest

The reason windowBackground includes both the heights 1) statusBar and 2) actionBar
Modify below line in your background.xml
<item android:gravity="center" android:top="80dp"> // 56 actionBarSize + 24 statusBarHeight
You may need to manage this programatically as statusBarHeight and actionBarSize varies based on device API/resolution.
Here is the result. For testing, have resized background size bit bigger so that overlapping between views and background become visible.

It is probably because of the extra space taken up by the ActionBar in the foreground.
To fix this, you can add a margin to your View in the foreground layout as:
android:layout_marginBottom="?android:attr/actionBarSize"

After test it in AS, I can say you that the right code for you background_drawable is this:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/background" />
<item android:gravity="center" android:bottom="48dp">
<shape
android:gravity="center"
android:shape="rectangle">
<solid android:color="#color/background_box" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
using android:top, the red square go more down than center. Need to use android:bottom instead to center background. By my tests results that 48dp is the right value.

How to add padding to the logo in launch screen?

I would like to add padding or space to the logo on both the sides and the code is added here.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
<item android:drawable="#color/ns_theme"></item>
<item>
<bitmap android:gravity="center" android:src="#drawable/logo" />
</item>
</layer-list>

I had the same problem, I tried to add padding to the item but it didn't change anything.
<item
android:left="16dp"
android:right="16dp">
<bitmap android:gravity="center"
android:src="#drawable/splash"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"/>
</item>
The problem was gravity="center", with it the padding were not applied.
Try using android: gravity = "clip_horizontal"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/splash_color" />
<item
android:left="16dp"
android:right="16dp">
<bitmap android:gravity="clip_horizontal"
android:src="#drawable/splash"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"/>
</item>
</layer-list>

Use
android:bottom=""
android:left=""
android:right=""
android:top=""
Try this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill">
<item android:drawable="#color/ns_theme"></item>
<item
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp">
<bitmap
android:gravity="center"
android:src="#drawable/logo" />
</item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/ns_theme" />
<item
android:drawable="#drawable/ic_logo"
android:left="#dimen/_16sdp"
android:right="#dimen/_16sdp" />
</layer-list>

The problem is probably that your logo is too big (The image file you are using has a pixel width that exceeds the pixel density of the device you are running it on).
Whether or not that is the case, it would probably be better to approach the problem considering the possibility that it could be run on ANY Android device with ANY screen size.
Considering that, there are several options better than simply adding padding in xml... For example, you could:
1) Wrap the image inside another view object that you can control the size and postion of as Bhavik Makwana suggested.
2) Just simply re-edit/resample your image to match the width of your target device and include the white space you desire in the image itself.
3) Design full splash screens that match the entire screen exactly (which combine foreground and background into one image), for example one with 1080 x 1920 resolution, and others for other screen sizes. That way you can control exactly how you want it to look, and the resolution will be 1-1 with no anti-aliasing or resampling.
4) Use this "9-patch" image approach to define an absolute width and height for your logo, but allow stretching of the white space around it to accommodate different screen sizes.
or, finally, the best way:
5) Use a constraint layout with guidelines in order to define the width of your logo in terms of percentage of parent width rather than absolute value.
Some other advice: Unless you are using technique #2 above, make sure you are using a logo.png file like this:
... NOT like this:
KaBOOYOW!
-Boober.

try this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item>
<bitmap android:src="#drawable/logo"
android:gravity="center" />
</item>
</layer-list>

<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_height="match_parent"
android:layout_width="match_parent">
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:gravity="center"
android:background="#mipmap/logo" />
</layer-list>

"dp" Issue in Xamarin Android Layer-List with multiple Rectangles

I'm using Xamarin Android in Visual Studio and trying to do a simple task of displaying two rectangles, one above the other. When I use a measure size of "px" everything works as expected, but when I use "dp", the second rectangle does not get rendered. Here's my xml file with the rectangles:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" >
<shape android:shape="rectangle">
<solid android:color="#6EF562" />
</shape>
</item>
<item android:top="57dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
Note the "dp" above. That code does not work. But if changed to "px", it works as expected.
Here's the source of my Main.axml 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"
android:background="#E6EDF0"
android:paddingTop="50dp">
<Button
android:id="#+id/MyButton"
android:layout_width="178.1dp"
android:layout_height="wrap_content"
android:text="#string/Hello"
android:layout_gravity="center"
android:padding="5dp"
android:layout_margin="5dp"
android:textColor="#000000"
android:background="#drawable/splitColors" />
Obviously, I want to use "dp" rather than pixels "px" for scaling reasons taking into different device form factors, but I can't get this to work.

The height of the button, is set at wrap_content. And in your drawable you specify you want to draw the black bottom part at 57dp. So if you're button smaller than 57dp it will never show. That's why it does the job at pixels, because 57px isn't that high. So if you want to use DP make sure your button is at least as high as the value you give <item android:top="57dp">

How to deal with scaling and transparency of a bitmap as android:windowBackground

I am trying to set a global background image for my android application. The image is a PNG file with transparency. I set it in the following way:
<style name="MyAppTheme" parent="#style/Theme.AppCompat">
<item name="android:windowBackground">#drawable/background_main</item>
</style>
And drawable/background_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background_main_bitmap"
android:gravity="bottom|center_horizontal" />
My PNG file should sit at the bottom of the screen always, being scaled to match the screen size always. With the above code, however, I am facing two problems.
The transparent background of the PNG file is black while I want it to be white.
The PNG file is larger than the screen width and hence, I can only see a portion of it. It is not scaled to match the width of the screen.
How can I accomplish these two things, possibly without havin to write Java code? (Although it would be better than nothing...)

Problem #1 can be solved with a layer-list in drawable/background_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
</shape>
</item>
<item>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background_main_bitmap"
android:gravity="bottom|center_horizontal|fill_horizontal" />
</item>
</layer-list>
Problem #2 remains though...

just change the property of android:gravity like following:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/flush"
android:gravity="fill_horizontal|fill_vertical"/>

Actually, using layer-list may give you expected scaling:
All drawable items are scaled to fit the size of the containing View, by default. Thus, placing your images in a layer list at different positions might increase the size of the View and some images scale as appropriate. To avoid scaling items in the list, use a <bitmap> element inside the <item> element to specify the drawable and define the gravity to something that does not scale, such as "center"
Thus, the following drawable will suit your request:
<?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 android:drawable="#drawable/background_main_bitmap" />
</layer-list>