I would like to create a custom drawable background for an EditText component in my Android layout. This should include a lower border spanning the entire length of the EditText, and 2 connected vertical lines at either end which take up 25% of the height, as per below:
The text itself will then use android:gravity="left|center" with a small amount of margin on the left/top/bottom.
I've been able to create a custom border on other input text elements where it was desirable to include all borders using a shape such as below:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#android:color/transparent"/>
<corners
android:bottomRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
<stroke
android:color="#color/lightgrey"
android:width="1dp"/>
</shape>
However, now I don't want a full rectangle, only 1 full side + 2 partial sides.
Two steps to achieve that:
Keep only the bottom border by removing the top, right, and left borders by adding negative insets with android:left|right|top.
Add new rectangle for the side items: adjust left/right relevant gravity, and limit the height to which size you want (here it's set to 8dp):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom border -->
<item
android:left="-50dp"
android:right="-50dp"
android:top="-50dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/lightgrey" />
</shape>
</item>
<!-- Left border -->
<item
android:height="8dp"
android:gravity="left|bottom">
<shape android:shape="rectangle">
<solid android:color="#color/lightgrey" />
<size android:width="1dp" />
</shape>
</item>
<!-- Right border -->
<item
android:height="8dp"
android:gravity="right|bottom">
<shape android:shape="rectangle">
<solid android:color="#color/lightgrey" />
<size android:width="1dp" />
</shape>
</item>
</layer-list>
Here is the result
Related
I want to have a bottom line in a view. The following drawable somehow adds a bottom border:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<!-- Set the border color of your layout here -->
<solid android:color="#color/red" />
</shape>
</item>
<!-- This is for border bottom but
you can change this according to your need -->
<item android:bottom="2dp" >
<shape
android:shape="rectangle">
<!-- Set the background color of your layout here -->
<solid android:color="#color/green" />
</shape>
</item>
</layer-list>
The result of this is:
Problem:
1) I don't understand how this works at all. It seems this is some trick using margins to get a red bottom border but I don't really get it.
2) I need to be able to add a bottom border but I don't want to set any specific background color for the whole view. Is that possible?
This is telling the system from where to start this item layout.
Since here we have bottom 2dp so this layout start 2dp from bottom.
Change bottom to end,start or other options for more understanding.
For 2) I need to be able to add a bottom border but I don't want to set any specific background color for the whole view. Is that possible?
replace your drawable with below code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<!--Uncomment this if you wnat to set any background color to
your rectangle
<solid android:color="#ffffff" />-->
<stroke
android:width="1dp"
android:color="#color/red" />
</shape>
</item>
Hi I want the edittext border colour only on left,top and right with blue colour but bottom should be transparent or grey.
How can I achieve this using shape.xml
As of now I am using the below code but unable to make the bottom line grey
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle"
>
<stroke android:width="1dp"
android:color="#49b1bb"
/>
<corners android:radius="0dp" />
</shape>
Following code will help you to achieve your goal:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Border -->
<item>
<shape>
<solid android:color="#49b1bb" >
</solid>
</shape>
</item>
<!-- Body -->
<item
android:left="2dip"
android:right="2dp"
android:top="2dp">
<shape>
<solid android:color="#ffafafaf" >
</solid>
</shape>
</item>
</layer-list>
What exactly above code is doing is it simply create border for all side first then after that It is adding layer on bottom border so that it is not visible to user.
Happy coding!!!!!!!!!!
I cannot use Lollipop elevation property because I need to target devices from API 18.
I need to place a shadow on the right and left side of a view.
This is what I tried so far :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<item>
<shape >
<!-- set the shadow color here -->
<stroke
android:width="2dp"
android:color="#7000" />
<!-- setting the thickness of shadow (positive value will give shadow on that side) -->
<padding
android:bottom="0dp"
android:left="2dp"
android:right="2dp"
android:top="0dp" />
<corners android:radius="3dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#color/salmon" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
I tried adding gradients in the first item, but it spreads from left to right which is not what I am looking fo. Is there a way to isolate two unique gradients for each side ?
This is what I am trying to do :
You can try using a gradient contained within a rectangle, which you can size: example below is a shadow I used for Navigation Drawer. You can modify this to fit your needs.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#111"
android:endColor="#00000000">
</gradient>
<size
android:height="#dimen/activity_vertical_margin"
android:width="5dp">
</size>
</shape>
Alternitively, you can use a CardView from v7 CardView support library, which supports Android api 7+.
You need to create your own drawable for it.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#android:color/white"
android:startColor="#color/black_38">
</gradient>
<size
android:height="4dp">
</size>
</shape>
And then for example with help of relative layout to align to any side of your layout. For me it's bottom shadow of custom app bar.
...
<View
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:background="#drawable/app_bar_shadow"
android:layout_height="4dp"/> // height of your shadow
I want to make some think like this in android layout background, is there any solution ?
I have 2 borders, one at top and the other is bottom, and they have different colors, and also I don't want to have any borders at left and right
CSS Code is:
#shape{
border-radius : 2px;
border-top : 1px solid #070709;
border-bottom : 1px #383841;
/*...*/
}
NOTE: Border has radius too.
Create an XML in drawable folder and put this code in it:
<?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/darker_gray" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:top="3dp">
<shape android:shape="rectangle" >
<solid android:color="#383841" />
<corners android:radius="5dp" />
</shape>
</item>
<item
android:bottom="3dp"
android:top="3dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
This layer list contains 3 items
1: color on top with round corners.
2: color on bottom with round corners.
3: color on rest of the view.
You can set this as background to any view.
According to Open-sided Android stroke?, there are basically 2 ways to implement borders for TableLayout.
Use Stroke
<?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="#ffffff"/>
</shape>
However, this is not something which I want, as I only want bottom border. Hence, I try another alternative.
Use 2 layers
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
<shape>
<solid android:color="#ffffff" />
</shape>
</item>
<!-- This is the main color -->
<item android:bottom="1dp">
<shape>
<solid android:color="#000000" />
</shape>
</item>
</layer-list>
However, during list view selection, the TableRow will not be highlighted with ListView selection color, as its background already take over by "#000000" layer.
Is there any better way I can have bottom border only, yet it will obey ListView selection highlight color?
In your shape file use <solid android:color="#android:color/transparent"/> instead <solid android:color="#00ffffff"/>