Develop Reference

Give custom border to TextView

How can I give the custom border to TextView where:
1) left and right border is 2 dp and with the different color with little opacity
2) top and bottom border is 1 dp
3) The text of TextView should be visible. right now What I have created is not showing the text of textview
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="2dp"
android:right="15dp"
android:top="1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>

use alpha color according to your recruitment
<?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="#080808" />
</shape>
</item>
<item
android:bottom="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#76d63f" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#d63f60" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp"
android:left="2dp"
android:right="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#3fa9d6" />
</shape>
</item>
</layer-list>

<?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="#76d273" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#76d63f" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#d63f60" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
add this code in your drawable(test_drawable) file and set to textview
android:background="#drawable/test_drawable"

Check my code I have integrated the same.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
//for top and bottom borders
<item
android:left="-2dp"
android:right="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#fff70b" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
//for left and right border
<item
android:bottom="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#e90c0c" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
Please note that opacity should be defined when creating your color only. While writing your color in colors.xml, you can change opacity like shown in below screenshot. Either change the 255 to your chosen opacity or use the bottom bar.
Also, you need to define the solid tag for each border and apply transparent color in order to make your TextView visible.
After applying the code in drawable, you will be able to see some preview like this :
Good Luck..!!

Edit Box with small tip at both ends

I am looking to design an edit box to look as following - as small tip at both ends
Any help would be really appreciated!.
Thanks,

Use below drawable xml in your textview or editText background:-
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
>
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#FF500778" />
<solid android:color="#FFFFFFFF" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#FFFFFFFF" />
<solid android:color="#FFFFFFFF" />
</shape>
</item>
</layer-list>

Create a drawable file like below and set it as background for your edit text
Drawable file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#android:color/darker_gray" />
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:bottom="10dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#android:color/white" />
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Result:

make a xml file in your drawable folder with this codes
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#de0b0b" />
<solid android:color="#ffffff" />
</shape>
</item>
<item
android:bottom="5dp"
android:top="0dp">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="#ffffff" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
for usage, use
android:background="#drawable/name"
to your textView or EditText
I hope this could help you

How to create round corner tab in android like this?

is there any body know how to create a round corner tab like this:
Expected Tabs:
Coming Tabs:
hope you can tell me.Thank you.

#Vinodh I use Tablayout with ViewPager. I set a style to the Tablayout and set the tabBackground property with a selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<corners android:topLeftRadius="8dp" android:topRightRadius="8dp"/>
<solid android:color="#fff"/>
</shape>
</item>
<item>
<layer-list>
<item>
<shape>
<corners android:topLeftRadius="8dp" android:topRightRadius="8dp"/>
<solid android:color="#color/white"/>
</shape>
</item>
<item>
<shape>
<corners android:radius="8dp"/>
<solid android:color="#000"/>
</shape>
</item>
</layer-list>
</item>
And set the background of Tablayout:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:topLeftRadius="8dp" android:topRightRadius="8dp"/>
<solid android:color="#000"/>

Try below shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#000000"
android:startColor="#000000"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#000000"
/>
</shape>

If you want to change tab layout make custom background in drawable and give rounded corner in both selected and selected tab
In Your Activity/Fragment
I set background in tablayout so you can make background as per your requirement
adding only customization code for brevity
val tabCount: Int = images_videos_tab_layout.tabCount
for (i in 0 until tabCount) {
val tabView: View = (images_videos_tab_layout.getChildAt(0) as ViewGroup).getChildAt(i)
tabView.requestLayout()
ViewCompat.setBackground(tabView,setImageButtonStateNew(requireContext()));
ViewCompat.setPaddingRelative(tabView, tabView.paddingStart, tabView.paddingTop, tabView.paddingEnd, tabView.paddingBottom);
}
fun setImageButtonStateNew(mContext: Context): StateListDrawable {
val states = StateListDrawable()
states.addState(intArrayOf(android.R.attr.state_selected), ContextCompat.getDrawable(mContext, R.drawable.tab_bg_normal_blue))
states.addState(intArrayOf(-android.R.attr.state_selected), ContextCompat.getDrawable(mContext, R.drawable.tab_bg_normal))
return states
}
In Drawable
1.tab_bg_normal
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/your_unselected_tab_color" />
<corners android:radius="25dp" />
</shape>
2.tab_bg_normal_blue
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/baseThemeColor" />
<corners android:radius="25dp" />
</shape>
3.tabview_bg
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="25dp"/>
<stroke android:color="#color/baseThemeColor" android:width="1dp"/>
<solid android:color="#00000000"/>
</shape>

Custom shape in android using xml

I am trying to draw a custom shape which I can use as a background for my layout. But I am not able to do so. Is it possible to draw a shape as below using xml in android. I am not getting how to cut the semicircle shape from the vertical centres of rectangle.

Use layer-list to make this custom shape drawable.
/res/drawable/custom_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Transparent Rectangle -->
<item>
<shape android:shape="rectangle">
<corners
android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp" />
<size
android:width="300dp"
android:height="100dp" />
<solid android:color="#FFFFFF" />
</shape>
</item>
<!-- Left Half-Circle -->
<item
android:left="-10dp"
android:right="290dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
<!-- Right Half-Circle -->
<item
android:left="290dp"
android:right="-10dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#000000" />
</shape>
</item>
<!-- Middle Dotted Line -->
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="line">
<stroke
android:width="1dp"
android:dashWidth="10px"
android:dashGap="10px"
android:color="#ff00"/>
</shape>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
OUTPUT:
Hope this will help~

In your case it might be worth to create a resizable bitmap (9-Patch drawable). Follow this guide.

try bellow xml. save it in drawable.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<solid
android:color="#ffffff"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="1dp"
android:color="#000000"
/>
</shape>

It is better to use 9-Patch images. If you can create an image like above you can use https://romannurik.github.io/AndroidAssetStudio/nine-patches.html to create 9-patch image(define expandable area).

Try this xml file in drawable :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle">
<solid android:color="#color/primary" />
<corners android:radius="50dp"/>
</shape>

Please refer the below xml, it may help you out
<?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/black" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<size
android:width="200dp"
android:height="200dp" />
<solid android:color="#color/colorAccent" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="line">
<solid android:color="#android:color/black" />
<stroke android:width="1dp"
android:dashWidth="10px"
android:dashGap="10px"/>
</shape>
</item>
<item
android:bottom="103dp"
android:left="-10dp"
android:right="205dp"
android:top="103dp">
<shape android:shape="oval">
<size
android:width="3dp"
android:height="3dp" />
<solid android:color="#android:color/black" />
<stroke android:width="1dp" />
</shape>
</item>
<item
android:bottom="103dp"
android:left="205dp"
android:right="-10dp"
android:top="103dp">
<shape android:shape="oval">
<size
android:width="3dp"
android:height="3dp" />
<solid android:color="#android:color/black" />
<stroke android:width="1dp" />
</shape>
</item>
</layer-list>

Try below code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners android:radius="3dip" />
<stroke
android:width="1dp"
android:color="#ED2A3C" />
</shape>

How to add a drop shadow to a Rectangular Shape in Android

I am developing an Android App in which I need to use a Rectangular shape which should have a drop_shadow. I have designed a rectangular shape but somehow i am not able to add a drop shadow to it on (right and left sides).
P.S.: this rectangular shape is added as a background attribute.
If this type of Question is already been answered then please provide the links here.
THANK YOU IN ADVANCE!!!!
Code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#000000" />
<corners
android:radius="10dp" >
</corners>
</shape>

Try this:
<?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:left="0dp"
android:right="1dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>