I have a layerlist that I use as a background for a spinner. I'm trying to resize the bitmap that is one of the items in the layerlist. The problem is that there aren't any resizing traits that can be found. Please see code below:
<?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">
<solid android:color="#ffffff"/>
<stroke
android:width="2dp"
android:color="#80000000"/>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp"/>
</shape>
</item>
<item>
<bitmap
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#mipmap/ic_launcher" />
</item>
</layer-list>
Here is a visual of what's happening:
How can I resize this bitmap? I'm trying to scale the image down because its too big. I've tried changing the layout width and height to a certain number and also resizing the image in an image editing program but nothing happened. Any help would be appreciated.
Related
I'm trying to create an XML drawable which will have an image on the left, and then a solid background which will fill the rest of the width where ever the drawable is used. The background color is the same color I have in the image itself, and the purpose is to continue the color for the full width.
I've tried this, but this just gives me the image in the center of the View which I apply it to. What I want is the image on the left, and then to the right of the image the background color to fill whatever remaining space is left.
<?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="#00355f"/>
</shape>
</item>
<item
android:drawable="#drawable/bg_navbar"
android:gravity="center_vertical|start"/>
</layer-list>
The obvious solution is to make a LinearLayout with my background color and then drop the image into it, but since this is used throughout my app, I was hoping to be able to create an XML drawable resource instead.
Try the below code snippet. I hope it will help you.
<?xml version="1.0"
encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90"
android:endColor="#ffffff"
android:startColor="#ffffff"
android:type="linear" />
<stroke android:width="1dp"
android:color="#dddbda" />
<corners android:radius="5dp" />
<padding android:bottom="10dp"
android:left="3dp"
android:right="10dp"
android:top="3dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|left"
android:src="#drawable/drdw" />
</item>
</layer-list>
</item>
</selector>
I made a tile with some "shadow" and rounded corners using the following layer-list:
<?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/background" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/activity_background" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:bottom="3px" android:right="3px">
<shape android:shape="rectangle">
<solid android:color="#color/header" />
</shape>
</item>
</layer-list>
It's used as a background for dynamically loaded views that are not activity layouts, and thus do not cover the whole screen (notifications, for example).
Here's a layout that uses this tile:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:padding="6dp"
android:background="#drawable/tile">
...
</RelativeLayout>
Now I want to use a drawable PNG as the background of the layout. I tried to put it directly as the background of the layout android:background="#drawable/blob_gradient" but then the first view (aka first notification) covers the whole screen. I also tried to use the tile with android:drawable="#drawable/blob_gradient" in its last item, but same results.
I'm sure that the solution is simple, and I probably approach the subject with the wrong attitude. Any help will be appreciated.
I want to create a custom View based on ImageView to make a widget as below where the drawable source is the camera and the background is the rectangle with the tick sign:
The problems are:
I can not create the border with the tick sign on the right: the tick is stretched fullscreen instead of staying at the bottom right.
The tick sign is sometime behind the image if I set it with android:background.
Here are my xml files:
The current border xml drawable
<?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="#android:color/transparent"/>
<stroke
android:width="2dip"
android:color="#color/bg_black"/>
<padding
android:left="3dp"
android:right="3dp"
android:top="3dp"
android:bottom="3dp"
/>
</shape>
</item>
<item >
<layer-list >
<item>
<shape
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/border_yellow"/>
<size
android:width="37dp"
android:height="37dp"/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
</shape>
</item>
<item android:drawable="#drawable/ic_tick"/>
</layer-list>
</item>
</layer-list>
The Image Button xml layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/product1"
android:background="#drawable/toggle_rectangle_check"/>
Thanks for your time.
I'm not sure if this is the sort of solution you'd be looking for but instead of having an xml file with the styling in it, I believe it would be better to have a layout file which defines your layout for your custom Widget, Something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customWidgetBox"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customCheckmark"
android:gravity="bottom|right" />
</LinearLayout>
And to the drawable folder you would need to add both the customCheckmark.xml and customWidgetBox.xml
customCheckmark.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/check_mark">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
customWidgetBox.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/camera">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
Not sure if this code accomplish exactly what you want, but it'll be a good help to get you started because this is definitely the way to do it! :)
Some links that might be interesting for examples:
Set border and background color of textView
Drawable Resource, Android API
how to put a border around an android textview
Tips & Tricks -XML Drawables Part 1
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>