Android Layer-list arrangment - android

i am using the following layer-list file to make a background image.
Layer-list:
<?xml version="1.0" encoding="utf-8"?>
<!-- <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/bgpattern"
android:tileMode="repeat"
/> -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item >
<bitmap
android:src="#drawable/bgpattern"
android:tileMode="repeat"
/>
</item>
<item android:drawable="#drawable/trans"
>
</item>
<item android:bottom="2dp" android:left="2dp" >
<bitmap
**android:src="#drawable/colordots"**
android:gravity="bottom"
/>
</item>
</layer-list>
but the android:src="#drawable/colordots image is appearing at center bottom of the screen i need it to be appear at the left-bottom of the screen. how can i do that can any one help me in doing this. the android:left="2dp" is not taking.

try <bitmap android:gravity="left|bottom"/>

Related

How to add a margin top to a bitmap?

This is the drawable file :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item>
<color android:color="#ffffffff"/>
</item>
<item>
<bitmap android:gravity="top|center_horizontal"
android:src="#drawable/splash_screen"/>
</item>
</layer-list>
I want the bitmap to have 20px margin-top, I didn't find how to set margin-top to bitmaps element
You can try with android:top.
The top offset in pixels.
<item
android:top="20dp">
<bitmap android:gravity="top|center_horizontal"
android:src="#drawable/splash_screen"/>
</item>

Custom drawable for RadioButton breaks for API 21/22 and below

I have created custom drawable for AppCompatButton and it is working perfectly fine for API level 23 and above.
Here is custom drawable.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked" android:state_checked="false" />
</selector>
background_radio_checked -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#FFF1EEFF" />
<stroke
android:width="1dp"
android:color="#color/color_ask_question" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked -
<?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">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topLeftRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_add_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
The drawables used are SVGs and have height width of 24dp.
How it looks on API 23+
But the same thing looks horrible on API level 21.
The image used in drawable stretches out to full width.
Tried removing animation but still the same results.
Not sure what wrong I'm doing or missing out.
Seems I'm using some property which is not available only from API 23 and above but not sure which one.
I'll answer by self, hopefully It'll help someone.
I was setting this drawable as background to my radiobutton and passing "#null" in button property.
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_button_backgorund"
android:button="#null"
android:checked="true" />
This wasn't working, so I created two separate custom drawables for button and background.
For custom drawable for background I just used shape with border, background color, radius etc but NO ICON. And for custom drawable for Button, I used icon.
Assigning these two custom drawables in background and button makes things work in both, lollipop devices and above.
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_radio_background"
android:button="#drawable/custom_radio_button"
android:checked="true" />
-----------Custom drawable for background-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_background" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_background" android:state_checked="false" />
</selector>
background_radio_checked_background -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-8dp"
android:right="-8dp"
android:top="-8dp">
<shape>
<solid android:color="#EBFFF7" />
<stroke
android:width="1dp"
android:color="#118F5D" />
</shape>
</item>
</layer-list>
background_radio_unchecked_background -
<?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">
<stroke
android:width="1dp"
android:color="#color/color_employer_divider" />
<solid android:color="#F2F2F2" />
<corners android:topRightRadius="#dimen/screen_margin_half_half_half" />
</shape>
</item>
</layer-list>
-----------Custom drawable for button-----------
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_shortAnimTime" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#drawable/background_radio_checked_button" android:state_checked="true" />
<item android:drawable="#drawable/background_radio_unchecked_button" android:state_checked="false" />
</selector>
background_radio_checked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_filled_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
background_radio_unchecked_button -
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/screen_margin_half"
android:drawable="#drawable/ic_poll_empty_24dp"
android:gravity="start|center_vertical"
android:left="#dimen/screen_margin_half_plus_four"
android:right="#dimen/screen_margin_half"
android:top="#dimen/screen_margin_half" />
</layer-list>
I'm still not sure why creating a single drawable which has both icon and border/background color, does not work with lollipop devices.
Suggestions, corrections on this solution are welcome.

Bitmap in custom drawable matching parent below API 23

I have a ListView and its items have an arrow aligned to the end, like this:
The arrow is set in the background, which is a custom drawable:
background_listitem.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#android:color/white" />
</shape>
</item>
<item
android:width="24dp"
android:height="24dp"
android:gravity="right|end|center_vertical"
android:right="#dimen/preferred_margin">
<bitmap android:src="#drawable/ic_chevron_right_black_24dp" />
</item>
</layer-list>
With API > 22 this is working great but 22 and below the background looks like this:
This is how I am setting the background:
listitem_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/listitem_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_listitem"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:padding="#dimen/preferred_margin">
...
</RelativeLayout>
Is there any way to fix this without adding the arrow as an ImageView?
you can change you background_listitem.xml file like this i hope this is help you.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white"/>
<item>
<bitmap android:src="#drawable/ic_chevron_right_black_24dp"
android:gravity="right|end|center_vertical" />
</item>
</layer-list>
I tried your example but by making small change and it worked.
Instead of applying gravity to the <item> tag, I applied the tag to bitmap, and the result is clear to me.
My xml code is as follows:
<item>
<shape>
<solid android:color="#android:color/white" />
</shape>
</item>
<item >
<bitmap
android:src="#drawable/ic_launcher" android:gravity="center|right"/>
</item>
And in my layout I applied them to parent RelativeLayout as follows:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#drawable/my_background"
android:layout_height="match_parent">
Here are my results:
Android API 23
Android API 19
Without gravity attribute in Android API 19
Hope this helps you

Android item size in layer-list

I need to set size for item in layer-list. For using as windowBackground in launch activity. I wrote this XML file and Android Studio displays it correctly. But in application the logo always full screen. How to make it?
<?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:endColor="#000004"
android:gradientRadius="1000"
android:startColor="#1f3371"
android:type="radial" >
</gradient>
</shape>
</item>
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/texture_5"
android:tileMode="repeat" />
</item>
<item android:drawable="#drawable/logo"
android:height="100dp"
android:width="77dp"
android:gravity="center"
>
</item>
</layer-list>
I found solution, but I expected better way.
Here is final code:
<?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:endColor="#000004"
android:gradientRadius="1000"
android:startColor="#1f3371"
android:type="radial" >
</gradient>
</shape>
</item>
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/texture_5"
android:tileMode="repeat" />
</item>
<item android:drawable="#drawable/logo"
android:bottom="214dp"
android:top="214dp"
android:left="100dp"
android:right="100dp"
android:gravity="center"
android:tileMode="repeat"
>
</item>
</layer-list>
At least it works at xxhdpi and xhdpi without distortion.
Starting from API 23, it is possible to set width and height right within the "item" tag:
<item android:drawable="#drawable/logo" android:width="..." android:height="..." />
You can do the followin
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/blanco"/>
<item
android:width="200dp"
android:height="200dp"
android:gravity="center">
<bitmap
android:gravity="fill"
android:src="#drawable/your_image"
android:mipMap="true"/>
</item>
</layer-list>
Just change width and height
I had the same problem and found the solution here.
I had to use my vector drawable as the source to a bitmap object:
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_logo_splash"/>
</item>

layer-list drawable not drawn correctly

I am trying to create a simple layer-list drawable for my Android app. When I set the drawable as src of an ImageView it is not drawn correctly:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Just two ovals with a little offset to each other. Nothing special (just a test) but it does not work.
It seems that android:left|right|bottom|top is the problem. If I use only of of these commands the drawable is drawn correctly. If two or more are used the ImageView stays empty.
Works:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Does NOT work (like the first example):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="..." >
<item android:top="20dp" android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
What is wrong here?
EDIT: # Rod_Algonquin
I use a quite simple layout to test the drawable:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#aaa" >
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/testDrawable" >
</ImageView>
</LinearLayout>
It seems that the number of android:left|right|bottom|top arguments is not the source of the problem but the concrete value being used.
This drawable works fine and:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
This one does not draw anything (the ImageView is just transparent):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="1dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
The only difference here is the value of android:top. 1dp does not work. 2dp works without any problem.
Any idea?
The problem is that you are using the layer-list drawable as an image resource of the ImageView. android:src will only accept an image not a drawable thus giving you nothing in there.
solution:
Instead of putting it in the android:src put it in the background where you can freely use the drawable.
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/testDrawable" >
</ImageView>

Categories

Resources