I'm having trouble creating a simple rounded rectangle using XML. Every time I try to add the "corners" element to the custom shape I get:
java.lang.UnsupportedOperationException
at
android.graphics.Path.addRoundRect(Path.java:514)
at
android.graphics.drawable.GradientDrawable.draw(GradientDrawable.java:314)
at
android.view.View.draw(View.java:6520)
...
res/dawable/rounded_rectangle.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>
simple layout.xml using the above shape:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<View android:id="#+id/View01"
android:background="#drawable/rounded_rectangle"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</View>
</RelativeLayout>
Fyi, I'm trying to compile for Android 2.1 and I have all the latest updates installed to Eclipse and the Android SDK. This shape is a direct copy of something I saw on another website, but for some reason It doesn't want to work for me.
Thanks.
So, I was just playing around with this a bit and I changed a couple of lines in the rounded_rectangle.xml to get it working. See below:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<corners android:radius="30dp"/>
</shape>
I only wish Google would put out a proper reference doc for creating XML-based shapes. After hours (4+) of hunting down examples on the Web, I feel like it's still a guessing game as to what elements/attributes are supported in these types of XML documents. Sorry for the mini-rant.
I hope this helps someone else.
Related
Im trying to create a custom circular seekbar like this one:
I have the shape and the thumb xml done but the thumb isn't appearing when i put it in the layout xml.
Seekbar background xml (lap_counter.xml):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:thicknessRatio="16"
android:useLevel="false">
<corners android:radius="500dp" />
<stroke
android:width="45dp"
android:color="#color/blue_secondary" />
</shape>
</item>
</layer-list>
Custom thumb xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/white">
<item>
<shape android:shape="oval">
<solid android:color="#color/white"/>
<stroke android:color="#color/orange" android:width="3dp"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
</item>
</layer-list>
But when apply the custom xml this are the results:
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/sb_lap_counter"
android:layout_width="700dp"
android:layout_height="300dp"
android:layout_centerInParent="true"
android:progress="50"
android:background="#drawable/lap_counter"
android:thumb="#drawable/lap_counter_thumb"
tools:progress="50" />
I tried putting it in as a custom style in themes.xml but it doesn't work either.
What am i doing wrong?
You are using a seekbar.This only works for horizontal seeks.That orange thing is the thumbnail which you need.
I wonder if there is a way to create a view container with an Inner Shadow like in Figma in native Android.
I have already spent the whole day trying layer-list with different items (linear, radial gradients, shapes, bitmaps) but nothing seems to be similar to what I need.
Please check the attachment, pay attention to container's inner shadow, this is what I really need:
Links or parts of code/xml will be appreciated.
Thanks in advance!
Try this:
Example XML for the layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#00000000"/>
<corners android:radius="10dp"/>
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp"/>
</shape>
</item>
</layer-list>
You can set the above XML as the background for the CardView:
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/layer_list_example">
<!-- Add your content here -->
</androidx.cardview.widget.CardView>
Note that you may need to adjust the offset and blur radius to achieve the desired appearance.
CompileSdkVersion 26, if it's important. I want to create LinearLayout with rounded corners, and background color.
I created 2 LinearLayouts, one with corners, and one with color, but their shapes do not match my expectations.
Code from activity
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/whitegrey"
android:layout_marginTop="340dp"
android:id="#+id/layout"
android:layout_marginStart="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_border"
android:orientation="vertical"
android:padding="6dp"
android:textColor="#color/black">
...
</LinearLayout>
</LinearLayout>
custom_border.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="8dp" android:right="8dp" android:top="8dp" android:bottom="8dp"/>
<stroke android:width="2dp" android:color="#444444" />
</shape>
Actually, there is rounded border, and behind, there is rectangular layout with target color. I want to fill with target color only what is inside borders.
Is there any way to set the fill color, preferably in custom_border.xml?
Here, what I have at the moment:
Here, what I want to achieve:
View from phone, the letters on the left are cut off:
From the code samples you provide us, it doesn't seem necessary to me to have two LinearLayout. Only the layout with android:background="#drawable/custom_border" is required.
To achieve the expected result, just add the property <solid android:color="#color/whitegrey" /> to your custom_border.xml :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="8dp" android:right="8dp" android:top="8dp" android:bottom="8dp"/>
<stroke android:width="2dp" android:color="#444444" />
<solid android:color="#color/whitegrey" />
</shape>
I wish I was able to help you!
This colour code is given to me:
background-image:-moz-linear-gradient(53% 0% -90deg,rgb(255,255,255) 0%,rgb(204,204,204) 100%);
background-image:linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(204,204,204) 100%);
width:787px;
height:142px;
border-color:rgb(221,221,221);
border-width:1px;
border-style:solid;
And ask for this this is a preview
I try This code in my background of edittext
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<gradient
android:startColor="#ffcccccc"
android:centerColor="#e7e7e8"
android:type="linear"
android:endColor="#ffcccccc"
android:angle="90" />
<stroke android:color="#ffdddddd"
android:width="2dp"/>
</shape>
Now I want same as picture but i cant get It.
How can i set this ?
This the right code for getting gradient.
<gradient android:startColor="#ffcccccc"
android:type="linear"
android:centerColor="#e7e7e8"
android:endColor="#fff5f5f6"
android:angle="90" />
guys! I have a question :) trying to customize a switch a little bit, such as the outline of the switch will have a border, and the inside part of it, the one you click to activate the event, also with a border, but in a way that it won't overlap the outline border of the switch. Since I don't have enough rep, I can't actually post the picture, therefore I hope it is clear enough :) what I got so far is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:height="50dp"/>
<corners
android:radius="3dp"/>
<stroke
android:width="2dp"
android:color="#color/wampRed"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/wampRed"/>
<corners
android:radius="2dp"/>
</shape>
<
Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/switchButton"
android:layout_marginBottom="40dp"
android:textOn=""
android:thumb="#drawable/shape_track"
android:track="#drawable/shape_thumb"
android:layout_marginRight="5dp"
android:textOff=" "
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/dateOutput"
/>