I would like to create a custom XML layout for my TextView, using rounded corners and a custom header, such as this example.
I found this very useful link that creates the following quite similar result.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#d8d8d8" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>
I wonder if it possibile to modify the XML layout above to get the header "ADD FRIEND" style, that is the darker gray background and the divider between the header textview ("ADD FRIEND") and the textview below (the one containing the "Nickname or email" and the "search" button).
I am thinking it is probably easier to do it with an image/drawable background, but getting it done in XML would be awesome (in terms of reusability for example).
Any help or suggestion on how to proceed is very welcome!
if you not using image for that then require three xml in drawable and create this type of layout :
1 linearlayout_background.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="#CABBBBBB" />
<corners android:radius="2dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/white" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
header_background :
<item><shape>
<padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" />
<corners android:topLeftRadius="5dp" android:topRightRadius="5dp" />
<solid android:color="#color/off_black1" />
</shape></item>
buttonbackground
<item><shape>
<padding android:bottom="5dp" android:left="5dp" android:right="5dp" android:top="5dp" />
<corners android:radius="5dp" />
<solid android:color="#00000000" />
<stroke android:width="1dp" android:color="#color/off_white2" />
</shape></item>
Related
I want to make a design like that
the delivery msg is a texview with custom background and it works fine but in the bottom of it there is a constraint-layout and when I used the custom background I made for it it didn't look fine there is a shadow in the corner, this custom background was applied fine before to a button but when I use it to constraint-layout it didn't works as expect
here is the custom drawable xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/turquoise" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" >
</padding>
<solid android:color="#color/white"
android:elevation="0dp"
/>
<size android:height="60dp" />
</shape>
</item>
how can I apply that to constraint-layout
there is two solutions:
Solution 1:
apply corners and padding to the rectangle with color turquoise
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/turquoise" />
<padding android:top="28dp" />
<corners
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<solid
android:color="#color/white"
android:elevation="0dp" />
<size android:height="60dp" />
</shape>
</item>
</layer-list>
please note that android:top value u have to set depending on your needs.
Solution 2:
create two separated layouts with the same designs just differ in layout.
set one with turquoise to constraintLayout and crate ImageView to have the one with white and set marginTop depending on your needs
any questions are welcomed
I was wondering if it is possible to have multiple borders/"stroke" elements on a shape, or if I need to use an image (or a bunch of shapes covering each other). My code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:endColor="#color/editTextBG"
android:startColor="#color/editTextBG"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeInner" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeCenter" />
<stroke
android:width="1dp"
android:color="#color/editTextEdgeOuter" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
I've tried just using the code, which didn't work, and giving the earlier strokes a bigger width (so that the later, if drawn over, would only color part). However, it seems the last stroke overrides the others?
A workaround for borders is to overlay elements:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/colorAccent"/>
</item>
<item android:top="8dp">
<color android:color="#color/colorPrimaryDark"/>
</item>
<item android:top="16dp">
<color android:color="#color/colorPrimary"/>
</item>
<item android:top="32dp" android:right="8dp">
<color android:color="#android:color/holo_red_dark"/>
</item>
</layer-list>
This is the result:
The first element in the layer-list from top to bottom is the background and every other is mounted on top.
<item>
<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/colorWhite" />
<stroke
android:width="1dp"
android:color="#979797" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<solid android:color="#ffd400" />
</shape>
</item>
I have a button and a selector that must change color, padding and corner radius of the button. I have no problems with changing the color, but I can never see any changes with padding and corner radius.
button_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/button_disabled" android:state_enabled="false">
<shape
android:shape="rectangle"
android:padding="8dp">
<corners android:radius="4dp" />
</shape>
</item>
<item android:drawable="#color/button_pressed" android:state_pressed="true">
<shape
android:shape="rectangle"
android:padding="8dp">
<corners android:radius="4dp" />
</shape>
</item>
<item android:drawable="#color/button_focused" android:state_focused="true">
<shape
android:shape="rectangle"
android:padding="8dp">
<corners android:radius="4dp" />
</shape>
</item>
<item android:drawable="#color/colorAccent">
<shape
android:shape="rectangle"
android:padding="8dp">
<corners android:radius="4dp" />
</shape>
</item>
</selector>
code of the button:
<LinearLayout>
....
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/add_to_fav"
android:id="#+id/add"
android:background="#drawable/button_color"
android:textColor="#drawable/button_text_color" />
</LinearLayout>
I know some clumsy way to get the padding - put it into the layout, but 1) it would be "useless parent"; 2) I wouldn't get corner radius.
So what am I doing wrong so I have not shape?
Thanks!
Padding, color and corners should be inside shape
So try this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape>
<padding android:left="5dp" android:top="2dp"
android:right="5dp" android:bottom="2dp" />
<corners android:radius="4dp" />
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
<item android:state_pressed="true">
<shape>
<padding android:left="5dp" android:top="2dp"
android:right="5dp" android:bottom="2dp" />
<corners android:radius="4dp" />
<solid android:color="#color/colorAccent"/>
</shape>
</item>
<item android:state_focused="true">
<shape>
<padding android:left="5dp" android:top="2dp"
android:right="5dp" android:bottom="2dp" />
<corners android:radius="4dp" />
<solid android:color="#color/colorPrimary"/>
</shape>
</item>
<item>
<shape>
<padding android:left="5dp" android:top="2dp"
android:right="5dp" android:bottom="2dp" />
<solid android:color="#color/colorPrimaryDark"/>
<corners android:radius="4dp" />
</shape>
</item>
</selector>
This way all of them will work.
The android:radius value was probly just too small for the effect to be visible. The syntax for the padding on the other hand has to be changed like this:
<item android:drawable="#color/button_focused" android:state_focused="true">
<shape
android:shape="rectangle">
<corners android:radius="20dip" />
<padding
android:left="8dip"
android:top="8dip"
android:right="8dip"
android:bottom="8dip" />
</shape>
</item>
Please note: as stated in the documentation for Shape Drawable,
Padding to apply to the containing View element (this pads the position of the View content, not the shape).
I use button with Font Awesome. When I try to set borders only on three sides of button, I see that border is all around my button. Here is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="1dip" android:bottom="1dip" android:left="1dip"><shape>
<solid android:color="#efeae0" />
<stroke android:width="1dp" android:color="#d5cfc3" />
<corners android:topLeftRadius="15dp" />
</shape></item>
</selector>
How can I remove border from right side of button?
i am create button using below tool may useful to you :)
http://angrytools.com/android/button/
see this solution
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item android:top="-2dp" android:left="-2dp" android:bottom="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke android:width="2dp" android:color="#21610B" />
</shape>
</item>
</layer-list>
Try out the below code to set the border in your view.
<?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="#FF0000" />
<padding
//android:bottom="10dp" Remove this to avoid seeing the bottom border
android:left="10dp"
android:right="10dp"
//android:top="10dp" Remove this to avoid seeing the top border
/>
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<solid android:color="#666666" />
</shape>
</item>
</layer-list>
Here is my coding. Here is design blue color for TextView's 4 border. What I want is to design only for 3 borders (top, left and bottom).
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="0dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ffffff"
android:endColor="#ffffff"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="0dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
</selector>
Below code placed at the bottom of height of 1dp, you have to play with this for other sides
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item>
<shape>
<solid android:color="#535353" />
</shape>
</item>
<!-- This is the main color -->
<item android:bottom="1dp">
<shape>
<solid android:color="#252525" />
</shape>
</item>
</layer-list>
Refer this discussion Open-sided Android stroke?
This is a quick solution (probably dumb), add android:translationX="2dp" on your TextView and you can add android:paddingRight="2dp" to make up for lost space.
Try like this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:bottom="1dp" android:left="1dp" android:right="0dp"
android:top="1dp"/>
<solid android:color="#000"/>
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#color/white"/>
</shape>
</item>
</layer-list>