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>
Related
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>
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>
I need to create a stack of overlapping ImageViews in Android like Spider Solitaire in Windows. Also, I need to be able to dynamically add more ImageViews. Please suggest methods to do so. Can I use a LinearLayout (Its not necessary. Whatever works is fine)? If so, how do I accomplish the overlap?
Note: All the ImageViews will have the same amount of overlap, so no need to worry about the unopened cards in the give screenshot.
Thank You
User LayerList
A LayerDrawable is a drawable object that manages an array of other drawables.
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/android_red"
android:gravity="center" />
</item>
<item android:top="10dp" >
<bitmap android:src="#drawable/android_green"
android:gravity="center" />
</item>
<item android:top="20dp" >
<bitmap android:src="#drawable/android_blue"
android:gravity="center" />
</item>
</layer-list>
Note : the below images uses item attributes as android:left="10dp", android:left="20dp".
You can use FrameLayout. Following layout is an example with 3 ImageViews:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="300dp"
android:background="#f00" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:background="#0f0" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="200dp"
android:layout_height="300dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="40dp"
android:background="#00f" />
</FrameLayout>
I don't think you can achieve this using Linearlayout only.
But you can use LayerList
A LayerDrawable is a drawable object that manages an array of other
drawables. Each drawable in the list is drawn in the order of the
list—the last drawable in the list is drawn on top.
with help of LayerList you can achieve the following:
Syntax
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#[package:]drawable/drawable_resource"
android:id="#[+][package:]id/resource_name"
android:top="dimension"
android:right="dimension"
android:bottom="dimension"
android:left="dimension" />
</layer-list>
I'm trying with the custom seekbar inside have number scale, But is not working. This seekbar must support all screen resolutions. how can i make like this. Please give your valuable idea.
My custom_seekbar.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/unselect"/>
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/select">
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/select">
</item>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/default_screen_bg"
android:orientation="vertical"
tools:context=".MainActivity" >
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:indeterminate="false"
android:max="10"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:progressDrawable="#drawable/custom_seekbar" />
</LinearLayout>
Unselesct.png
select.png
myresult screen like this
I'm expecting like this
There's number to solutions to the problem:
Use 9patch image for backgorund (which is basically should be used as background for seekbar). Like the following:
(name should be unselect_patch.9.png) and slightly modify custom_seekbar.xml to look like the following:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/unselect_patch"/>
<item android:id="#android:id/secondaryProgress">
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/select"
android:tileMode="disabled" />
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/select"
android:tileMode="disabled" />
</clip>
</item>
</layer-list>
Just provide exact size of the image in layout (e.g. layout_width="#dimen/select_image_width");
To support all resolutions - provide images for different resolutions, as described in Supporting Multiple Screens. The same images will not work fine for all resolutions and here's better just follow best practices described in detail at the link above.
I am looking to have a button's background be composed of a backround image, with another image overlayed on top. I do not need the button to have any text.
I have tried the following approach:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/button_background" />
button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/background_image" android:gravity="center"></bitmap>
</item>
<item>
<bitmap android:src="#drawable/foreground_image" android:gravity="center"></bitmap>
</item>
</layer-list>
However, when I do this, the foreground image is stretched to the size of the background image, even though I am specifying gravity to center.
Use an imagebutton with background image, like this:
<ImageButton android:layout_width="wrap_content"
android:background="#drawable/background_image" android:id="#+id/imageButton1"
android:layout_height="wrap_content" android:src="#drawable/foreground_image"></ImageButton>