Develop Reference

how to customize an image view and textview?

i have a listview and the row model/design should be something as shown in the image below.
My question is, how can I design a view to appear as shown in the image in the the third row?? I want to design something like the blue rectangular shape with round corners and then write the value on it as shown in the image
Is it a textview or imageView? Please advice how can i design such a view.
image:

You must create a TextView and give it a Shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#color/common_border_color" />
<solid android:color="replace with blue color" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:radius="5dp" />
</shape>
Make this in an xml called rounded_corner.xml in the drawable folder.
android:background="#drawable/rounded_corner"

You can use textview and as a background of text view use below xml
rounded_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#abcdef" >
</solid>
<corners
android:radius="20dp" >
</corners>
</shape>

In your drawable create one xml file and add this code in that
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<padding
android:top="3dp"
android:left="8dp"
android:right="8dp"
android:bottom="3dp"/>
<solid android:color="#00796B" />
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
In your view(Button/TextView) add background, some ex code
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/delete"
android:text="Ur text"/>

Gravity for xml drawable

I want to create a custom View based on ImageView to make a widget as below where the drawable source is the camera and the background is the rectangle with the tick sign:
The problems are:
I can not create the border with the tick sign on the right: the tick is stretched fullscreen instead of staying at the bottom right.
The tick sign is sometime behind the image if I set it with android:background.
Here are my xml files:
The current border xml drawable
<?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/transparent"/>
<stroke
android:width="2dip"
android:color="#color/bg_black"/>
<padding
android:left="3dp"
android:right="3dp"
android:top="3dp"
android:bottom="3dp"
/>
</shape>
</item>
<item >
<layer-list >
<item>
<shape
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/border_yellow"/>
<size
android:width="37dp"
android:height="37dp"/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
</shape>
</item>
<item android:drawable="#drawable/ic_tick"/>
</layer-list>
</item>
</layer-list>
The Image Button xml layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/product1"
android:background="#drawable/toggle_rectangle_check"/>
Thanks for your time.

I'm not sure if this is the sort of solution you'd be looking for but instead of having an xml file with the styling in it, I believe it would be better to have a layout file which defines your layout for your custom Widget, Something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customWidgetBox"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customCheckmark"
android:gravity="bottom|right" />
</LinearLayout>
And to the drawable folder you would need to add both the customCheckmark.xml and customWidgetBox.xml
customCheckmark.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/check_mark">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
customWidgetBox.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/camera">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
Not sure if this code accomplish exactly what you want, but it'll be a good help to get you started because this is definitely the way to do it! :)
Some links that might be interesting for examples:
Set border and background color of textView
Drawable Resource, Android API
how to put a border around an android textview
Tips & Tricks -XML Drawables Part 1

Rounded corner for textview in android

I have a textview and want its corner to be in round shape. I already know it can be done using android:background="#drawable/somefile". In my case, this tag is already included so cannot use again. e.g android:background="#drawable/mydialogbox" is already there to create image in background
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:background="#drawable/mydialogbox"
android:orientation="horizontal" >
<TextView
android:id="#+id/textview_name"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
</RelativeLayout>
so when I want textview(textview_name) also with round corner, how this can be achieved.

Create rounded_corner.xml in the drawable folder and add the following content,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#color/common_border_color" />
<solid android:color="#ffffff" />
<padding
android:left="1dp"
android:right="1dp"
android:bottom="1dp"
android:top="1dp" />
<corners android:radius="5dp" />
</shape>
Set this drawable in the TextView background property like so:
android:background="#drawable/rounded_corner"
I hope this is useful for you.

Beside radius, there are some property to round corner like topRightRadius, topLeftRadius, bottomRightRadius, bottomLeftRadius
Example TextView with red border with corner and gray background
bg_rounded.xml (in the drawables folder)
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="10dp"
android:color="#f00" />
<solid android:color="#aaa" />
<corners
android:radius="5dp"
android:topRightRadius="100dp" />
</shape>
TextView
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_rounded"
android:text="Text"
android:padding="20dp"
android:layout_margin="10dp"
/>
Result

With the Material Components Library you can use the MaterialShapeDrawable.
With a TextView:
<TextView
android:id="#+id/textview"
../>
You can programmatically apply a MaterialShapeDrawable:
float radius = getResources().getDimension(R.dimen.corner_radius);
TextView textView = findViewById(R.id.textview);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
.toBuilder()
.setAllCorners(CornerFamily.ROUNDED,radius)
.build();
MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
ViewCompat.setBackground(textView,shapeDrawable);
If you want to change the background color and the border just apply:
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.....));
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color....));

Since your top level view already has android:background property set, you can use a <layer-list> (link) to create a new XML drawable that combines both your old background and your new rounded corners background.
Each <item> element in the list is drawn over the next, so the last item in the list is the one that ends up on top.
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap android:src="#drawable/mydialogbox" />
</item>
<item>
<shape>
<stroke
android:width="1dp"
android:color="#color/common_border_color" />
<solid android:color="#ffffff" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>

There is Two steps
1) Create this file in your drawable folder :- rounded_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp" /> // set radius of corner
<stroke android:width="2dp" android:color="#ff3478" /> // set color and width of border
<solid android:color="#FFFFFF" /> // inner bgcolor
</shape>
2) Set this file into your TextView as background property.
android:background="#drawable/rounded_corner"
You can use this drawable in Button or Edittext also

create an xml gradient.xml file under drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners android:radius="50dip" />
<stroke android:width="1dip" android:color="#667162" />
<gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#ffffff" />
</shape>
</item>
</selector>
then add this to your TextView
android:background="#drawable/gradient"

You can use the provided rectangle shape (without a gradient, unless you want one) as follows:
In drawable/rounded_rectangle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<stroke android:width="1dp" android:color="#ff0000" />
<solid android:color="#00ff00" />
</shape>
Then in your text view:
android:background="#drawable/rounded_rectangle"
Of course, you will want to customize the dimensions and colors.

Right Click on Drawable Folder and Create new File
Name the file according to you and add the extension as .xml.
Add the following code in the file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<stroke android:width="1dp" />
<solid android:color="#1e90ff" />
</shape>
Add the line where you want the rounded edge android:background="#drawable/corner"

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="5dp" />
<solid android:color="#ffffff"/>
</shape>
</item>
</layer-list>

Put your TextView inside MaterialCardView:
<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="25dp"
>
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/emergency_sms_template"
android:padding="6dp"
android:textSize="11sp"
/>
</com.google.android.material.card.MaterialCardView>

You can use SVG for rounding corners and load into an ImageView and use ConstraintLayout to bring ImageView on TextView
I used it for rounded ImageView and rounded TextView

Simply using an rounded corner image as the background of that view
And don't forget to have your custom image in drawable folder
android:background="#drawable/my_custom_image"

Draw radius border to imageview or textview in one corner in Android

I need to draw a border to an imageview or a textview in my app, but I need to draw it only in one corner, like the image.
I do a shape but i get border in all 4 sides:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1px" android:color="#FF000000" />
<solid android:color="#ffffffff"/>
<padding android:left="1px" android:top="1px"
android:right="0px" android:bottom="0px" />
<corners android:topLeftRadius="8px" />
</shape>
How can I to do make it like in the image?
Thanks, Mattia

Use this code will solve 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="#FF0000" />
<corners android:topLeftRadius="15dp" />
</shape>
</item>
<item android:left="10dp" android:top="10dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
<corners android:topLeftRadius="15dp" />
</shape>
</item>
</layer-list>
you have to make adjustment in the ( layout Xml ) also as:
android:layout_width
android:layout_height
android:paddingTop
android:paddingLeft
this is the output :
hope this help.

This is how I achieved. Using inset drawable we can achieve this easily and more customization we can do with less code. Use this twoside_border.xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- inset: It can remove border from any other side-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-15dp"
android:insetRight="-15dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rectangle">
<stroke
android:width="20dp"
android:color="#ED302F" />
<!--<corners
android:topLeftRadius="20dp"
/>-->
<!--<solid android:color="#f50a0a" />-->
</shape>
insetBottom & insetRight -dp values helps to hide the border where we do not need and as a output :
two side border image
to get corner curve remove the commented line in the above code
<corners android:topLeftRadius="20dp"/>
now we can see the curve bend
border with curve image
Use this xml in frame layout like below how I did & adjust the padding or margin according to your need, so that it fit inside the border image which look like a frame.
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:scaleType="centerCrop"
android:src="#drawable/your_image_file" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/twoside_border" />
</FrameLayout>

Square shaped layout border with round inside edges

I’m attempting to create a layout border with corners that are square on the outside and round on the inside. I’ve gathered that I need to create an .xml drawable definition composed of two shapes: one with a stroke width and corner radius and another with a stroke width only:
The drawables
round_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="4dp" android:color="#FF000000" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="4dp" />
<solid android:color="#FFC0C0C0" />
</shape>
square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#FF000000" />
<solid android:color="#FFC0C0C0" />
</shape>
Each of these works independantly as a border when appliedby itself like so:
android:background="#drawable/round_border"
but when they either or both are added to an item-list drawable like so:
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
and:
android:background="#drawable/composite_border"
The layout's background is completely black instead of just a black border.
Does anyone know how to make the layer list work for this task?

From Shape Drawable Doc you can see that shape can't have layer-list inside so you should define your composite_border.xml like this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/square_border"/>
<item android:drawable="#drawable/round_border"/>
</layer-list>
note that I changed the order of your items inside the layer-list as stated in the documentation of layer-list
Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top and you want it to be squared from outside

Try this will work fine enough:
solid is background color
stroke is border
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/white"/>
<stroke android:width="1dp" android:color="#ffaaaaaa" />
<size
android:width="15dp"
android:height="15dp"/>
</shape>

Create a xml file like round_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#CCCC33"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
In the layout set as background
<LinearLayout
android:id="#+id/layout_wellbeing"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/rounded_corner_leuvan"
android:orientation="horizontal" >
</LinearLayout>

square_border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp"
android:color="#FF000000"
/>
<solid android:color="#FFC0C0C0" />
</shape>
composite_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<layer-list>
<item android:drawable="#drawable/round_border"/>
<!-- <item android:drawable="#drawable/square_border"/> -->
</layer-list>
</shape>
watch out the comments and the quotation marks! =]