I am building an Android Application that has a :
Splash Screen , which displays the logo of the Application
What is working :
The screen is being displayed perfectly well and is going to FirstActivity as desired if I set a ImageView in a layout for the SplashScreenActivity .
What isn't :
However this isn't the correct approach as it produces a delay when the App starts as layout is being inflated . I have used the recommended approach as follows :
splash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/black" />
<item
android:gravity="center">
<bitmap
android:src="#drawable/logo"
android:gravity="center"/>
</item>
</layer-list>
styles.xml
<style name="Splash" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#drawable/splash</item>
</style>
AndroidManifest.xml
<application
android:theme="#style/Splash">
When i tried to set the bitmap src from mipmap folder it produced a tiny image .
As I also had the SVG file of the logo I tried using Vector Asset to
produce a drawable but bitmap src needs an image and the App crashed .
Then I tried to generate a PNG from SVG using ImageMagick , InkScape
and other tools with their recommended options for high quality images .
But it still isn't as sharp as using a ImageView with a Vector Drawable as its source and finally I can't think of any other way now .
So , how can I achieve the same quality of the image like all other Apps have ? Also is there any way I can make bitmap use the SVG itself ?
#hrk sing is right, dont even bother trying to display a bitmap correctly. you will always get low resolution images. the best you can do is really create a vectordrawable even online on a page such as vectr. what I did is silmply scale the vectordrawable directly in the xml and it finally worked perfectly for my splash screen
<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 in in my splash screen drawable like so and it works great:
<?xml version="1.0" encoding="utf-8"?>
<!-- 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>
my code is actually only drawing the triangle in the following picture 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.
You Should use vector instead of png or jpg
to use vector in android use
app:srcCompat="#drawable/logo"
and you need to add vectorDrawables.useSupportLibrary = true to your build.gradle file
// Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
for more information and usage REFER TO:
https://www.androidhive.info/2017/02/android-working-svg-vector-drawables/
Related
I am using this example to create splash screen for my android app. But the background image is stretching. Below is the 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/splash_portrait" />
</item>
</layer-list>
How to proportionately scale the bitmap?
The image you use should be a Vector Image.
Vector Images can resize at will and still retain clarity.
If you use normal images, no matter how you implement it, it will either stretch or shrink depending on the mobile screen.
I'm trying to center a drawable image with some padding on either side to use as a splash screen logo. The problem is it's either stretched across the entire screen or ignores any padding if I use gravity.
<?xml version="1.0" encoding="utf-8"?>
<item
android:drawable="#color/grey_3"/>
<item android:gravity="top|center_horizontal|center_vertical" android:drawable="#drawable/zc_logo_r"
android:top="100dp"
android:left="200dp"
android:right="200dp"
android:layout_margin="100dp"
>
</item>
I've tried using a bitmap, android:gravity="fill_horizontal" and various other suggestions on SO with the same result.
How can I scale and center the image in my xml?
As a reference, if you come across the same issue, I solved it with a square image in drawable folders (i.e. hdpi, mdpi, xhpi, xxhpi and xxxhdpi) instead of resizing a rectangular image which was too big in size and gets distorted.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/grey_3"/>
<item android:gravity="center">
<bitmap android:src="#drawable/splash_logo"/>
</item>
</layer-list>
It's probably easiest to turn your drawable image into a nine-patch.
The problem you're running into is that a layer-list doesn't have an intrinsic idea of it's size. The bounds are set when it is placed inside of a container. The xml attributes are set at compile-time so it's difficult to get dynamic values inside of the xml drawable.
If you can use an ImageView, then you can set your drawable in the src attribute and use padding, margins and scaleType to control the position an scaling of the drawable.
I want to resize a bitmap in a layer-list, added as an item.
This is what I have tried,
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#android:color/white" />
<size
android:width="46dp"
android:height="46dp" />
</shape>
</item>
<item
android:width="11dp"
android:height="24dp"
android:gravity="center">
<bitmap android:src="#drawable/facebook_f" />
</item>
</layer-list>
Using Android Studio 2.0 Preview 5, the preview shown is perfect but the actual image is a blunder.
Preview by AS,
Actual image,
Changing image resource size manually or in the xml itself does not change anything.
Note : 'f' shape image dimensions are 53 * 128.
EDIT : AS was using API version 23 to render layouts. When I changed it to 21 (on which I was testing it too), it appeared blurred. I checked the same on Android M device and the images were perfect. So now, this xml is behaving API specific.
The android:height and android:width for <item> are only available for API 23 and above. If you use these attributes for API below 23, it will not give you an error, but simply ignore it.
I am attempting to use a VectorDrawable in a LayerList without scaling the vector. For example:
<layer-list>
<item android:drawable="#color/grid_item_activated"/>
<item android:gravity="center" android:drawable="#drawable/ic_check_white_48dp"/>
</layer-list>
The drawable ic_check_white_48dp id defined as:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>
The desired effect is for the check icon to be centered in the layer drawable, without scaling. The issue is, the layer-list above causes the check icon to be scaled to fit the layer size.
I can produce the desired effect if I replace the vector drawable with PNGs for each density and modify the layer-list as such:
<layer-list>
<item android:drawable="#color/grid_item_activated"/>
<item>
<bitmap android:gravity="center" android:src="#drawable/ic_check_white_48dp"/>
</item>
</layer-list>
Is there any way I can do this using a VectorDrawable?
I ran into the same problem trying to center vectors drawables on a layered list.
I have a workaround, its not exactly the same but it works, you need to set a size for the entire drawable and add padding to the vector item:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<size android:height="120dp" android:width="120dp"/>
<solid android:color="#color/grid_item_activated"/>
</shape>
</item>
<item android:top="24dp"
android:bottom="24dp"
android:left="24dp"
android:right="24dp"
android:drawable="#drawable/ic_check_white_48dp"/>
</layer-list>
The size of the shape above sets the size of the entire drawable, 120dp in this example, the padding on the second item, 24dp in this example, centers the vector image.
Its not the same as using the gravity="center" but its working way of using vectors in API 21 and 22.
Been struggling with the same problem. The only way I found to fix this and avoid the drawable to scale up was to set the drawable size and using gravity to align it:
<layer-list>
<item android:drawable="#color/grid_item_activated"/>
<item
android:gravity="center"
android:width="48dp"
android:height="48dp"
android:drawable="#drawable/ic_check_white_48dp"/>
</layer-list>
Hope it helps!
Edited solution that will make your SplashScreen look great on all APIs including API21 to API23
First of all read this article and follow the GOOD way of making a splash screen.
If your logo is distorted or wont fit and 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:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:opacity="opaque">
<!-- The background color, preferably the same as your normal theme -->
<item
android:gravity="center">
<shape android:shape="rectangle">
<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="#drawable/logo_vect"/>
</item>
</layer-list>
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.
I'm currently working on a splash screen with a vector drawable centered both horizontally and vertically. Here is what I got on API level 25:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<!-- background color, same as theme -->
<item android:drawable="#android:color/white"/>
<!-- app logo -->
<item
android:drawable="#drawable/my_app_logo"
android:gravity="center_horizontal|center_vertical"
android:width="200dp"
android:height="200dp"
/>
</layer-list>
If you want to adjust the vector drawable's dimension, modify android:width and android:height attributes above, not necessarily modify the original drawable.
In addition, my experience is DO NOT put the vector drawable in a bitmap tag, which never works for me. Bitmap is for .png, .jpg and .gif format file, not for vector drawable.
Reference
https://developer.android.com/guide/topics/resources/drawable-resource#LayerList
https://developer.android.com/guide/topics/resources/more-resources.html#Dimension
I added a full border around a view but I need to add just the corner as shown image below :
I mean the red corner only .
I tried to adjust the below border xml , but it didn't work :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="10dp" android:height="10dp" android:color="#B22222" />
<solid android:color="#FCE6C9" />
<corners android:radius="20dp" />
</shape>
Any help will be appreciated
I don't think it's possible to do this using a ShapeDrawable, as it would require you to use some sort of margin or padding on the drawable itself. There actually is a padding attribute, but unfortunately that only has effect on the content of the View, and not the drawable itself.
That being said, an easy solution would be to create a 9-patch in stead and apply that as background to the TextView. Just for demonstration purposes: make the 9-patch look somewhat like this:
Edit:
On second thought, there's actually another option that relies on using a LayerDrawable to create the desired effect. It's a bit tedious to create and I have my doubts it'll be more efficient than using a 9-patch, but at least you don't have to render out images, which means that if you need to make e.g. a change in colours, it's more straightforward.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rounded" />
<item android:drawable="#android:color/white" android:left="30dp"
android:right="30dp" />
<item android:bottom="30dp" android:drawable="#android:color/white"
android:top="30dp" />
<item android:bottom="30dp" android:left="10dp" android:right="10dp"
android:drawable="#color/pink" android:top="30dp" />
<item android:bottom="10dp" android:left="30dp" android:right="30dp"
android:drawable="#color/pink" android:top="10dp" />
</layer-list>
Some details: #drawable/rounded is the code snippet you posted yourself. The following two items are simply white rectangles with an offset, to create the white edges. Now, since these will also overlay the pink surface, we need two more pink rectangles (again with specific offsets) to counter that. The result is a background that looks exactly like what you're showing in your question.
Note that you might want to see if you can optimise this a bit. At the least I'd recommend not hardcoding the offsets (like I did for simplicity), but store them in a dimens.xml file so you can keep these values centralized and consistent by referencing them from both the ShapeDrawable and LayerDrawable.
Addendum: On pre-ICS (or perhaps pre-Honeycomb) devices, there appears to be an issue with directly referencing colours with the android:drawable attribute. You can however easily get around this by setting up another drawable (be it either a 9-patch or ShapeDrawable) to represent this colour. For example, in the snippet above, you would replace android:drawable="#color/pink" with android:drawable="#drawable/color_pink", where color_pink can simply be an xml file containing:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FCE6C9" />
</shape>
Obviously you will need to do the same for all other colours referenced in the LayerDrawable. Tested on Gingerbread 2.3.7.
I would create a 9-patch file and set it to be the background of the main container. The steps to do that would be.
You create the background you would like roughly in fireworks, illustrator, or whatever image editing software you prefer.
Then crop the artwork so that there is only a 1 pixel border around the artwork. Save it as a png.
Open the draw9patch.bat file in your android sdk folder on your computer C:\Program Files (x86)\Android\android-sdk\tools.
Open your png file. You can then use your mouse to click on the outer 1 pixel border which will turn the clicked pixels black. The areas that you have black pixels on both the top and bottom or on the left and right will be the area that is stretched. In your case you just want to have the middle area where there is no red stretched.
My personal preference is to just open the file above and save it as a 9 patch file. Then open it in my photo editing software to create a 1 pixel thick line in the same fashion as above. It is quicker and more precise.
Finally add the file to your drawable folder. Then set the background of your main view container to the drawable.
That should be it. Hope that helps.