Develop Reference

Android bitmap tileModeY="repeat" with gravity="fill_horizontal" creates ugly edge

I want to create vertically repeating background for whole app that is adjusted to width of phone.
My bitmap is:
resources/drawable/repeating_bitmap.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/app_bg_003_phone"
android:gravity="fill_horizontal"
android:tileModeY="repeat" />
My style is:
resources/values/style.xml
<style name="AppTheme" parent="BaseTheme">
<item name="android:windowBackground">#drawable/repeating_bitmap</item>
</style>
And my problem is here:
As you can see, instead of whole image only the edge is stretched, Weird.
How can i achieve horizontally stretched and vertically repeated background?
I have used proper flags on bitmap... (android:gravity="fill_horizontal" android:tileModeY="repeat")
If this could help this im attaching original image that im repeating (mdpi)
I want to use repeating bitmap to save up on memory. Also this is only jpeg pattern that is available for me at the moment.
Update
Now i know why only edge is streched: From documentation:
https://developer.android.com/reference/android/graphics/drawable/BitmapDrawable
"Gravity is ignored when the tile mode is enabled. Default value is "disabled"."
That means when i got tileModeY="repeat", then tileModeX by default as i enabled tile mode overall, must be tileModeX="clamp" which is:
"clamp Replicates the edge color."
Any ideas how i can use tileMode and gravity at the same time? I tried to insert this bitmap into another view where gravity would be "fill_horizontal". Sadly without success.

I found a pretty fancy way of achieving this:
Remove the tileMode attribute from the "bitmap"
Create a "layer-list" root tag in the XML
Add an "item" tag around the "bitmap" with top and height attributes (set the height to that of the image)
Copy&paste this "item" as many times as you think you need it to fill the display
Enter the proper top value for each of the "item" tags
Here is an example where the image for the background is 116 pixel high. Therefore each of the following tags has a top value increased by this height.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="116dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="232dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="348dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="464dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
<item android:top="580dp" android:height="116dp">
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill_horizontal" android:src="#drawable/background" />
</item>
</layer-list>

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.

"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">

Android thumb is not centered in seekbar?

I've been searching any solution for hours, but couldn't find one. So here's my problem, as i've seen it's really common problem:
Thumb in seekbar, is not getting centered... I've made this custom seekbar by 9patch.
It's been said that i'm supposed to set its minHeight and maxHeight to same size in many responses in stackoverflow. But even though i set them, it still shows up like this...
It is really disturbing, is there any way to work around this?
And here is xml:
<SeekBar
android:id="#+id/seek"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/padding_small"
android:max="100"
android:progress="60"
android:maxHeight="#dimen/playerSeekBarHeight"
android:minHeight="#dimen/playerSeekBarHeight"
android:progressDrawable="#drawable/progress_bar_player"
android:thumb="#drawable/player_sound_thumb"
android:paddingLeft="6dp"
android:paddingRight="6dp" />
Thanks in advance.

Couldn't find a way to solve this, still don't know what is the issue. Why is setting minHeight and maxHeight to same size fix for everyone but not in my case? Anyway, so i put some empty pixels into thumb image and it works.
But i would appreciate any more effective way to handle with this situation.

Yes the min height max height didn't work for me either. My issue was when I decided to create a layout for higher res screens. When i made each row in my screen larger I though I could just "match_parent" the height and it would be all good. But no I had the problem above.
I solved it by going back to "wrap_content" for the height, removing the minHeight and maxHeight tags and then using layout_marginTop to move it down to centre in the horizontal linearLayout.
I was using the default seekbar.
Hope this helps someone!

Try This
seekbar_progress_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<clip >
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:antialias="true"
android:dither="false"
android:filter="false"
android:gravity="left"
android:src="#drawable/progress_bar_player">
</bitmap>
</clip>
</item>
seekbar_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:src="#drawable/whitepatch">
</nine-patch>
</item>
<item android:id="#android:id/secondaryProgress">
<clip >
<shape >
<gradient
android:angle="270"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:startColor="#80028ac8">
</gradient>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg">
</item>
xml
<SeekBar
android:id="#+id/seekbar_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="420dip"
android:layout_height="wrap_content"
android:layout_marginLeft="0dip"
android:layout_marginTop="12dip"
android:maxHeight="9dp"
android:minHeight="9dp"
android:progressDrawable="#drawable/seekbar_progress"
android:thumb="#drawable/player_sound_thumb" />
From this Link Custom Seek BAr

In my case too setting min height and max height did not work.
I did it by playing with the minHeight and maxHeight values. Setting minHeight greater than maxHeight by nearly 2 times or more did the trick for me. Try setting different values for the both. Should workout...