I am trying to put two oval drawables on top of each other, the first has transparency. However with the way I have it, it displays the first oval's color at the size of the second oval.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<size android:width="15dp" android:height="15dp" />
<solid android:color="#35000000"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<size android:width="5dp" android:height="5dp" />
<solid android:color="#000000"/>
</shape>
</item>
</layer-list>
How can I get this to work as intended?
EDIT:
Here is the parent:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_layerlist" />
</LinearLayout>
After doing much research on the different types of XML drawables, it appears that your LayerDrawable (layer-list) is be scaling the ShapeDrawables independently. Then, the ImageView is scaling the LayerDrawable. According to this guide from Google, scaling for both ShapeDrawables and LayerDrawables is a concern. LayerDrawables will check for necessary scaling on each item you have. They have several solutions:
Set the gravity to something that does not scale, such as "center".
define the drawable as a bitmap.
Set the ImageView to scaleType that does not scale.
There is two major problem with this, however... You can only use gravity for the bitmap. And you cannot use a ShapeDrawable for the bitmap in XML. I tried everything I could think of to get it right. Here's the only thing that fixed it for me.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/oval1"
android:scaleType="center" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/oval2"
android:scaleType="center" />
</FrameLayout>
So: I removed the LayerDrawable, separated the Shapes into their own XMLs, made two ImageViews. (for ease I stuck them in a FrameLayout). This was the only way to stop the scaling.
Testing Procedure
Tested in Android 2.1, 3.0, 4.0
Changed Image scaleType
Changed Image width and height
Separated ShapeDrawables
Changed LayerList to just items with drawable attribute referencing separated shapes
Changed LayerList to bitmaps referencing separated shapes.
Changed order of shapes
Alternatively, you could do it in code.
Reference: Drawable Resources
Related
The gradient I have created it is as follows
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="45"
android:dither="true"
android:endColor="#00cff7"
android:startColor="#0095bf" />
</shape>
In my XML file, I want this gradient to be visible as a circle.
I have tried the following but the gradient appears as a square.
I tried the following third party library but the gradient is not visible.
XML
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="#drawable/blue_bg"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
Tried the following link but still, the gradient is square.
Any help on how this can be achieved?
Note: I don't want the gradient to be created in a circular shape as I'm reusing it later in the app
Use CardView like this:
<android.support.v7.widget.CardView
app:cardCornerRadius="192dp"
android:backgroundTint="#color/colorPrimary"
android:layout_width="96dp"
android:layout_height="96dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.v7.widget.CardView>
You don't need CircleImageView anymore.
You don't have specified the shape :
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="120dp"
android:height="120dp"/>
</shape>
I have a circular ImageView as you can see below, this references a vector drawable, I would like to fill the inside of the circle with another View, without having that rectangle outside the circle, is this possible in any way?
<FrameLayout
android:layout_gravity="center_horizontal"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#android:color/black"
>
<com.myapp.MySpecialBackground
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/icon"
android:tint="#color/blue"/>
</FrameLayout>
You can use a ShapeDrawable as background resource. Add a drawable resource file to your project and set the "padding" so the circular shape will not show outside of your blue circle:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<padding
android:left="30dp"
android:top="30dp"
android:right="30dp"
android:bottom="30dp" />
<size
android:width="150dp"
android:height="150dp" />
<solid android:color="#ff0000"/>
</shape>
I used 30dp but that's hard to tell from your screenshot, so most likely you'll have to experiment. Just keep in mind that you'll get a circle if your ImageView is a square and all padding values are equal.
(For older android versions: the size tag is relatively new, in earlier versions the width and height attributes went into the shape tag)
I'm trying to use a listView with a divider and I was about to change divider's width so I looked in the web site and I found this solution :
Listview divider margin
When I tested in my app, I have no divider, but if I switch to use a simple color the divider appears again
This this my code :
my Activity layout :
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="80sp"
android:elegantTextHeight="true"
android:text="Paramètres"
android:textSize="24sp"
android:gravity="center"
android:textColor="#ffffff"
android:background="#191919"/>
<ListView
android:id="#+id/list"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:dividerHeight="2dp"
android:divider="#drawable/list_divider">
</ListView>
</LinearLayout>
list_divider.xml
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="15dp"
android:insetRight="15dp" >
<shape
android:shape="rectangle" >
<stroke
android:dashGap="1dp"
android:dashWidth="1.5dip"
android:width="2dp"
android:color="#000000" />
<size android:height="3dp"/>
</shape>
</inset>
You are giving wrong file name to your divider attribute.Change this line
android:divider="#drawable/list_devider"
To
android:divider="#drawable/list_divider"
because your list divider drawable file name is list_divider not list_devider
And I will suggest you to use px as a dividerHeight instead of dp
if you specify 1dp or 1dip, Android will scale that down. On a 120dpi device, that becomes something like 0.75px translated, which rounds to 0. On some devices, that translates to 2-3 pixels, and it usually looks ugly or sloppy
For dividers, 1px is the correct height if you want a 1 pixel divider and is one of the exceptions for the "everything should be dip" rule. It'll be 1 pixel on all screens. Plus, 1px usually looks better on hdpi and above screens
So I modified my listdivide.xml file to that, the it work :
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="16dp"
android:insetRight="16dp">
<shape>
<solid android:color="#000000" />
<corners android:radius="1dp" />
</shape>
</inset>
But i still don't know why the first dosn't work :)
I'm trying to simplify some graphics from requiring a 9-patch for each density, to just using an XML drawable. It's a fairly simple graphic:
2 Segments:
8dp wide for both segments
Top segment is 2dp tall
Bottom segment fills the view
Right side is filled with transparency
Giving this result when set as a background image:
It seems like this should be fairly simple to recreate as an XML drawable, and would avoid creating 5 different 9-patch graphics. However, I've looked into layer-list drawables, inset drawables, clip drawables -- they all seem to require that you know the size of the view beforehand (e.g. to keep it 2dp for an inset, you'd need to set insetRight to the width of the view - 2dp). I also tried using the shape tag's size tag, but that doesn't keep a fixed size, just a fixed proportion (so for taller views it will scale proportionally).
Am I overlooking something simple, or is this something I'd have to resort to checking programatically after layout?
This is not possible. This is the best solution I found. Only xml, no coding, no bitmaps, no additional views )
<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">
<solid
android:color="#ff0000" />
</shape>
</item>
<item
android:top="4dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#00ff00" />
</shape>
</item>
<item
android:left="10dp">
<shape
android:shape="rectangle">
<solid
android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Via code you can make your own drawble type with desired behavior. Xml drawable very limited. IMHO my suggestion is the closest to what you demanded.
I think the answer by #Leonidos is very close to what I'm proposing, except I'm using the drawable as a separate view instead of the background for the entire list detail layout. This allows it to be a fixed width and to let the item text have its own background. Let me know if I'm not understanding your constraints.
The following file is "res/drawable/list_left_border"
<?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="#e76e63" />
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="#ffc257" />
</shape>
</item>
</layer-list>
Then on the layout for the list item in "res/layout/list_item.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:orientation="horizontal"
tools:context=".MainActivity" >
<View
android:background="#drawable/list_left_border"
android:layout_width="8dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/listItemText"
android:textSize="15sp"
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Here's the image. The background is pink to show that the list item is transparent.
I'm going to go one further and suggest a slight reworking of AndroidGuy's answer, which itself includes Leonidos' answer.
Same drawable XML, different list item XML as follows:
<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:orientation="vertical"
tools:context=".MainActivity" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100sp">
<ImageView
android:layout_width="8dp"
android:layout_height="match_parent"
android:src="#drawable/list_left_border" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Item Text"
android:textSize="22sp" >
</TextView>
</FrameLayout>
The FrameLayout gives the original background behaviour, rather than separation into a new view.
I've shown this below, with backgrounds to demonstrate:
This doesn't really deserve the points though.
I have a list view structure, with Relative layout that uses
alternating background images for odd/even elements. I'm trying to set
the background drawable dynamically by calculating the position. It
worked fine with the normal bitmap. But when I tried to use the
ninepatch image it breaks the UI, all the elements get distorted. What
am I doing wrong? Could it be how the ninepatch image is created or is
there a different way to use a ninepatch image compared to a normal
bitmap.
My List View XML goes like this
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/id01"
android:background="#drawable/my_9patch_bg_image">
<ImageView />
<RelativeLayout>
<ImageView />
<TextView />
<TextView />
</RelativeLayout>
</RelativeLayout>
May be the solution here might work for my problem. It's exact though I have to try it.
Since nobody answered you for a year now...
I had the same issue you need to setpadding of zero (even if you don't need it).
Good luck.
You can use nine patch in the same way you use a normal drawable. I assume you have a problem with the 9 patch itself. In the /tools directory of your android sdk you have the draw 9 patch tool. It will help you to correct your 9 patch drawable and to preview it for different sizes of your view.
select all sides except corners as the stretching edges
you can use this xml as background to show as cardview.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:dither="true" android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#e2e2e2" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:dither="true" android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#color/white" />
</shape>
</item>