I've got two shape drawable xml files that I am using on imagebuttons. One contains a ring, the other contains an oval small enough to fit into the larger ring, similar to a radiobutton. In this image http://imgur.com/mYPALoT you can see (from left to right) the ring, the smaller middle oval, and the combined image showing the layerlist view of both together. This doesn't work and instead shows a complete filled in oval.
Here is the ring xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="3"
android:thickness="1dp"
android:useLevel="false">
<solid android:color="#1976D2" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
Here is the oval xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#1976D2" />
<size
android:height="7dp"
android:width="7dp" />
</shape>
Here is the layerlist xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ring_select" />
<item android:drawable="#drawable/ring_center" />
</layer-list>
I'm not familiar with layerlists as I am new to android. What am I doing wrong?
In case another person descends upon this page by the guiding of the knowledegable Google...
I have a workaround that may or may not work for you: instead of using <scale> , try <inset>. You can use a combination of the <item>'s android:top / android:bottom / android:left / android:right and the <inset>'s android:insetXXX to size the image
You can do things like set the sides of each inset value relative to your source image's dimensions. For example, if you have a 64 pixel-wide image and want to cut it down by 50%, you can do (64 / 4 = 16) for each side
I finally found the answer. Basically, the oval in front needs to have this added to it's line:
<item android:top="10dp" android:bottom="10dp" android:left="10dp" android:right="10dp">
The dimensions need to be the same since this is an oval. I'm still not sure why the oval stretched to the entire size of the ring, especially since the size was defined. If anyone has any idea why the top oval stretched like that, please let me know.
Related
I want to create geometric shape for all of the screen sizes in Android.
I wrote the code for this case. But my shape changes in other screen sizes.
I want to create shape like the following picture
And my code is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
</shape>
</rotate>
</item>
<item android:top="180dp" android:bottom="-100dp" android:left="-70dp" android:right="-50dp">
<rotate android:fromDegrees="6">
<shape android:shape="rectangle">
<solid android:color="#color/base_color6" />
</shape>
</rotate>
</item>
</layer-list>
I did this but it breaks on different resolution. Because of the angle view are distort and that causes major UI issue. To break that, I create a WEBP Image with that angle and set it to the background. And set the whole view around that in ConstraintLayout with group and barrier. Now it pretty much work fine on various resolution device
for rounding image corners there are many library and released, but i want to round custom corners such as only TopLeft and BottomRight but i cant find this library on Android Arsenal or github. for example see this screen shot
all of released libraries rounding all corners, and i dont like it
If you want to use such rounded corners (only 2 out of 4), I'd suggest creating .png file with corners as you want them, 9patching images to stretch properly and setting created file as background to your layout (CardView, any layout you use...)
Set below xml as background of your main layout of listview raw file.
corner.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="#ffffff" />
<corners android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" />
</shape>
</item>
</layer-list>
Hope it helps!!!
What I have:
I have a LinearLayout which contains Views with a background Drawable (rectangular shape with rounded corners and a stroke). They act as color selection buttons. Initially the first button has a background with a thicker stroke (4px instead of 1px). Everything is nice (see left side of picture below).
What I want:
However, when I press such a button, I want to remove the thick stroke from the previously selected button and apply it to the actual button. I try it the following way (only a snippet):
// get layout
LinearLayout favoriteColorsLayout = (LinearLayout) findViewById(R.id.favoriteColorsLayout);
// get view at old position, update stroke, invalidate
View view = favoriteColorsLayout.getChildAt(selectedColorButton);
GradientDrawable drawable = (GradientDrawable) view.getBackground();
drawable.setStroke(1, Color.parseColor("#bbbbbb"));
view.invalidate(); // do I need this?
// also update stroke of new view
..
// re-layout
favoriteColorsLayout.requestLayout(); // do I need this?
What I see:
And indeed the thicker stroke is moved but unfortunately the layout is wrong afterwards! The colored background of buttons 2-4 should become thinner when the stroke surrounding them gets thicker so that they are still fitting into the containing layout but this does not happen (see right side of picture below). Instead the stroke is partially cut off (because otherwise it would be drawn outside the bounds of the View). This is not a desired effect.
What do I have to do to get the desired effect instead?
I know how many buttons of which color I have only at runtime, so I would prefer a programmatic solution.
Actually I'm beginning to think it could be an Android bug since drawing the stroke outside the borders per default is surely not desired behavior. I see the effect on the emulator and API level 23 as well as my old phone with API level 11.
A bit of layout xml. The linear layout (Views are added programmatically):
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:id="#+id/favoriteColorsLayout"></LinearLayout>
The button Views:
<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="#dimen/color_selection_button_size"
android:layout_height="#dimen/color_selection_button_size"
android:layout_margin="#dimen/color_selection_button_margin"
android:layout_gravity="center"
android:background="#drawable/color_selection_cell_background">
</View>
The buttons background drawable (color_selection_cell_background.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="1px"
android:color="#bbbbbb"/>
<corners
android:radius="5px" />
<gradient
android:angle="90"
android:centerX="0.5"
android:centerY="0.5"
android:startColor="#aaaaaa"
android:endColor="#bbbbbb"
android:type="linear" />
</shape>
Not sure why you are doing it in code but why not have two drawables and change those?
button_blue_selected.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue_500" />
<stroke android:width="4dp" android:color="#color/grey_500" />
<corners android:radius="5dp" />
</shape>
button_blue_unselected.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue_500" />
<stroke android:width="1dp" android:color="#color/grey_500" />
<corners android:radius="5dp" />
</shape>
Then update the background drawable in your code:
View view = favoriteColorsLayout.getChildAt(selectedColorButton);
view.setBackgroundResource(R.drawable.button_blue_selected);
Or even better you could use a third drawable with state so you didn't need to update it directly in code:
button_blue.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/button_blue_selected" />
<item android:drawable="#drawable/button_blue_unselected" />
</selector>
And then:
view.setSelected(true);
I am trying to implement in XML a ShapeDrawable like this, but so far without success.
How do I make the Stroke visible only for two sides?
Is that even possible?
Otherwise what cloud I use (I seed it as background of a TextView).
Here is a solution which is using a LayerListDrawable:
background_white_lateral_border.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="#android:color/white" />
</shape>
</item>
<item>
<inset
android:insetLeft="1dp"
android:insetRight="1dp" >
<shape android:shape="rectangle" >
<solid android:color="#android:color/black" />
</shape>
</inset>
</item>
</layer-list>
Note: This firstly draws a white rectangle and then a black rectangle with a left and right inset of 1dp on top of it, giving the effect of lateral borders. It's just something to keep in mind, in case you worry about performance (which is in my opinion negligible for minor styling like this).
AFAIK, that is not possible with a single ShapeDrawable. A nine-patch PNG, or a LayerListDrawable of two ShapeDrawables (one per line) should work though.
I'm trying to define a background drawable in XML that will make the background have a 1dp grey border on the left. The XML I'm using is:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00FFFFFF" />
<stroke android:width="1dp" android:color="#CCCCCC" />
<padding android:left="1dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
In the screenshot below you can see that it's actually putting a 1dp border around the entire view (the "Recent Lessons" area):
Can someone explain to me what I've done wrong here?
I think that you may have confused padding and stroke. The 1dp stroke you are adding is the border you see around the shape - not the padding. Try following these examples. For more about LayerList see the android docs (LayerList section). Basically, it boils down to multiple drawables as one.