Hi I am trying to create a background drawable for my splash screen which I'll be setting in theme itself. But the bitmap drawable used to keep in the center is getting stretched and I am not able to figure how to keep it normal. Below is my drawable code:
splash_screen_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="360"
android:centerColor="#color/colorAccentXDark"
android:endColor="#color/Black"
android:gradientRadius="500dp"
android:startColor="#color/colorAccentXDark"
android:type="radial"
android:useLevel="false" />
</shape>
</item>
<item
android:bottom="50dp"
android:top="50dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="500dp"
android:innerRadiusRatio="1"
android:shape="oval">
<gradient
android:angle="360"
android:centerColor="#color/colorAccentXDark"
android:endColor="#color/colorAccentXDark"
android:gradientRadius="400dp"
android:startColor="#color/colorAccent"
android:type="radial"
android:useLevel="false" />
</shape>
</item>
<item android:gravity="center">
<bitmap android:src="#drawable/ty_logo" />
</item>
</layer-list>
Here is code where I am setting this drawable as background of an activity:
<style name="TYTheme" parent="SearchActivityTheme.NoActionBar">
<item name="colorPrimaryDark">#color/colorAccentXDark</item>
<item name="android:alertDialogTheme">#style/AlertDialogTheme</item>
<item name="android:windowBackground">#drawable/splash_screen_bg</item>
</style>
So here the bitmap drawable ty_logo is an png is getting stretched in my phone. Since there is no scaleType option with bitmapDrawable I don't know how to handle it.
Add gravity to your bitmap set to center.
<item android:gravity="center">
<bitmap android:src="#drawable/ty_logo"
android:gravity="center" />
</item>
I hope that ty_logo is of suitable pixels and you have provided different pixels image for various device screens (ldpi, mdpi, hdpi, xhdpi, etc).
If not, do go through this answer to a similar problem you find yourself in : Resize images in bitmap in xml
Otherwise, this can be easily solved if your target version is for API 23 as <item> has width,height,gravity attributes provided for them.
And if not, the following code should work, using gravity attribute for bitmap. Again, this is going by the assumption that your logo is not having more pixels than resolution of the devices.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
...
<item>
<bitmap android:src="#drawable/ty_logo"
android:gravity="center" />
</item>
...
</layer-list>
You can wrap bitmap inside ScaleDrawable <scale> and use ScaleDrawable inside LayerListDrawable.
<item android:gravity="center">
<scale android:drawable="#drawable/ty_logo"
android:scaleHeight="80%"
android:scaleWidth="80%" >
</scale>
</item>
Related
I have a layer-list
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="2dp" android:left="2dp" android:bottom="2dp" android:top="2dp">
<bitmap
android:gravity="center"
android:src="#drawable/ic_menu_alert"/>
</item>
<item android:height="10dp" android:width="10dp" android:gravity="right|top">
<shape android:shape="oval">
<size android:height="10dp" android:width="10dp"/>
<solid android:color="#color/navigation_drawer_notification_red_color"/>
</shape>
</item>
</layer-list>
which shows this image
On lollipop and above everything is fine but on pre-lollipop red circle lose all sizing and padding attributes and image looks like this
I was looking for solution about 3 days and found nothing. I was trying to make my own toolbar layout and set to this imagebuuton scaleType="centerInside" but it didn't help. Could anyone help with this issue?
Thanks in advance!
Its best not to mention the height and width attributes in layer-list. When you use this as drawable in let's say an ImageView (the width and height of the ImageView will override the one's mentioned in item/shape).
You can use top, bottom, left, right to align your items in layer-list.
Note: height and width attributes of item is supported only from API 23.
Here is a working example (Tested in Android 7.0 and Android 4.4):
sample.xml
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu"
android:left="16dp"
android:right="16dp"
android:gravity="center">
<bitmap
android:src="#drawable/menu_icon" />
</item>
<item
android:top="8dp"
android:left="56dp"
android:right="24dp"
android:bottom="42dp">
<shape android:shape="oval">
<solid android:color="#android:color/holo_red_dark"/>
</shape>
</item>
</layer-list>
main.xml
<ImageView
android:layout_width="72dp"
android:layout_height="72dp"
android:src="#drawable/sample"
android:scaleType="fitCenter"/>
You can also use wrap_content for height & width in ImageView.
So i came up with a workable solution. I have a layer-list drawable in /drawable and /drawable-v21.
The layer-list drawable in /drawable-v21 contains a vector drawable. The layer-list drawable in /drawable contains a .png . It kind of defeats the purpose of using vector drawables but I had to do this to make it work in this one off case.
I made a custom spinner with an image inside to be showed as a spinner default visual:
(http://i.imgur.com/f6wj4gl.png)
but the arrow image is very blurry, and I can't adjust in order to stay clean as the image below:
(http://i.imgur.com/UlmpnKz.png)
here's my spinner's layout:
<Spinner android:id="#+id/sMeasPla"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
android:background="#drawable/tk_spinner_background"
android:layout_marginBottom="#dimen/margin_separator_bottom"/>
My selector (tk_spinner_background):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tk_spinner_background_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/tk_spinner_background_default"
android:state_focused="true" />
<item android:drawable="#drawable/tk_spinner_background_default" />
</selector>
My spinner background (tk_spinner_background_default):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape
android:shape="rectangle">
<solid
android:color="#color/transparent" >
</solid>
<stroke
android:width="3dp"
android:color="#color/gray_light" >
</stroke>
<padding
android:left="#dimen/padding_edit_text_left">
</padding>
<corners
android:radius="10dp" >
</corners>
</shape>
</item>
<item
android:top="5dp"
android:right="10dp"
android:bottom="5dp">
<bitmap android:src="#drawable/ic_spinner_arrow_default"
android:gravity="top|right" />
</item>
</layer-list>
</item>
</selector>
I don't have any methods in Bitmap like in an imageView (layout_width, layout_height, scaleType, etc) to change the image size...
can anyone tell me a way to have more control with the image size in a bitmap or other way to do this?
Thanks in advance
The problem was in the poorly use of the drawable folders... I had all images inside the same folder (drawable-hdpi)
Don't ask me why, but the devices (I tried in 5 different devices) wouldn't re-size the image correctly in this specific case... (probably because I couldn't define the size)
When I separate every image correctly with the specific size in the corresponding folder, the problem was solved, and the image appeared correctly...
I have an ImageView, and a <layer-list> in /res/drawable/. This is the layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<!-- This is a 24dp x 24dp PNG -->
<bitmap android:src="#drawable/ic_secondary_arrow"
android:gravity="center"/>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#color/icon_primary_background"
android:width="2dp"/>
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
ImageView has nothing special:
<ImageView
android:id="#+id/arrow"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="16dp"/>
When using src or setImageDrawable(int) pointing to the layer-list, center seems to be ignored (or at least this is not my desired behavior):
I want to display it as below. This is possible using background (or setBackground(Drawable)) instead of src:
The reason I insist is because setBackground(Drawable) is limited to API16+, and I'd rather not limit my audience because of this.
So, what is it that I'm missing?
Edit: as #pskink pointed below, I was missing setBackgroudDrawable(Drawable). But still, that was an incidental question. I really want to know what's the reason behind the different behavior of src and background (and the respective methods) in this case.
It seems that the ImageView draws both items at the same size. You can add “padding” to your drawable like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top=“16dp” android:left=“16dp” android:right="16dp" android:bottom="16dp">
<!-- This is a 24dp x 24dp PNG -->
<bitmap android:src="#drawable/ic_secondary_arrow"
android:gravity="center"/>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#color/icon_primary_background"
android:width="2dp"/>
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
I recently made my first custom shape and it turned out really good accept one thing. i can't seem to set the height and with of the drawable resource in a style resource.
I do not specify a height or width in på shape because i want to use this shape in different sizes. So i set height and width in my styles.xml file. But the final result is what looks like the shape using wrap_content as both height and width which i do not want.
Any help is greatly appreciated!
SHAPE - list_item.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="#color/list_item_background"
/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:startColor="#color/list_item_gradient_white"
android:endColor="#color/list_item_gradient_black"
android:type="linear"
/>
<stroke
android:color="#color/list_item_stroke"
android:width="1px"
/>
</shape>
</item>
STYLE
<style name="SmallListItem">
<item name="android:background">#drawable/list_item</item>
<item name="android:layout_height">69.5dip</item>
<item name="android:layout_width">fill_parent</item>
</style>
Try something like this:
<ImageView
style="#style/SmallListItem"
android:src="#drawable/list_item" />
See http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList for more information on how to use your layer-list
I want to use two nine patches inside LayerDrawable
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/solid">
<nine-patch android:src="#drawable/button_header_solid" android:dither="true" />
</item>
<item android:id="#+id/transparent">
<nine-patch android:src="#drawable/button_header_transparent" android:dither="true" />
</item>
</layer-list>
And it seems that only first layer is stretched while second one stays as is.
Both images are of the same size as .png, and have equal stretchable and padding areas.
The question is: Do we allowed to use several 9-patches (in one layer-list) or only one is allowed?
Thanks.
Just now faced with the same problem.
Try this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/solid">
<nine-patch android:src="#drawable/button_header_solid" android:dither="true" />
</item>
<item android:id="#+id/transparent">
<clip>
<nine-patch android:src="#drawable/button_header_transparent" android:dither="true" />
</clip>
</item>
</layer-list>
The following makes both 9-patches behave as you would expect (tested on Android 2.2). Both 9-patches are expanded to fill the whole drawable area.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/solid"
android:drawable="#drawable/button_header_solid"/>
<item android:id="#+id/transparent"
android:drawable="#drawable/button_header_transparent"/>
</layer-list>