Develop Reference

How to draw a dot circle inside a square drawable in android?

I want a small dot inside a square button , this is what i have tried till now as answered by azizbekian:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size android:width="100dp" android:height="100dp"/>
<solid android:color="#38b0ef"/>
</shape>
</item>
<item
android:bottom="45dp"
android:left="45dp"
android:right="45dp"
android:top="45dp">
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#0c5069"/>
<size android:width="20dp" android:height="20dp"/>
<solid android:color="#0c5069"/>
</shape>
</item>
</layer-list>
The first image is what i have tried and the second image is what i want excluding the text.
and also this code is the button to which i have to apply the drawable
there are seven such buttons in an horizontal linearlayout with weightsum:100 each button has weight 14
<Button
android:id="#+id/wed"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginEnd="1dp"
android:background="#drawable/my_button_dot"
android:text="WED"
android:textAllCaps="true"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_weight="15"/>
the dot does not appear in the background when this drawable is applied to the button, maybe because of the size of button and drawable i tried to adjust the size of drawable, but i just do not understand it and it did not work, how can i adjust it such that the dot appears in button background.

first create color_circle in drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ffffff">
</solid>
<size
android:width="48dp"
android:height="48dp" />
</shape>
and then
<RelativeLayout
android:layout_width="64dp"
android:layout_height="148dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:textAllCaps="true"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="WED" />
</LinearLayout>
<View
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:background="#drawable/color_circle" />
</RelativeLayout>
i hope this is what you want

This is
ImageView has src to dotted.xml.
<ImageView
android:layout_width="178.8dp"
android:layout_height="178.8dp"
android:src="#drawable/dotted"
android:layout_centerInParent="true"
android:layerType="software" />
add below to drawable/dotted.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<stroke
android:color="#android:color/white"
android:dashWidth="1px"
android:dashGap="10px"
android:width="6.6dp"/>
</shape>

Rounded linear layout leaving extra space on corners

i am creating a rounded linear layout with some buttons and textviews, i have used a custom selector as background of layout. My problem is that layout have extra space on corners how to remove this? any help will be appreciated
here is my code
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp"
>
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
/>
<stroke android:width="2dip"
android:color="#color/#275D69"/>
</shape>
Layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector"
/>
Current output:
Dont want that space where i have placed red marks.

With below code you have rounded background with least space on corner
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="5dp" />
<stroke
android:width="2dip"
android:color="#275D69" />
</shape>
this may include space on corner but it's too low.
just reduce radius value.

Try to use this approach, is not the most clear solution but for me works:
Create a Layout container with transparent background, and use it as a container of your rounded layout
<LinearLayout
.....
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#android:color/transparent"
......>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector"
android:orientation="vertical">
<!-- content of the rounded ll -->
</LinearLayout>
</LinearLayout>
The white spaces should be disappeared

Here is a solution you need to follow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<stroke
android:width="2dip"
android:color="#275D69"/>
</shape>
Now in main xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:margin="10dp"
android:background="#drawable/selector"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
Problem solved!

You can make rounded corners using cardView
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="6dp"
app:cardCornerRadius="5dp"
app:cardBackgroundColor="#D3D3D3"
app:cardPreventCornerOverlap="false"
card_view:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp" />
</android.support.v7.widget.CardView>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
<stroke android:width="0dip"
android:color="#color/#275D69"/>
</shape>
<corners android:radius="6dip" />
Put corner radius whatever you want.

After getting pissed for 2 days I finally found it .
It cannot be solved by any drawable files or by editing the canvas but simply by making the layout as base layout.
There are several methods and stuffs under values you have to choose the right ones and add it in your styles.
First add these to your styles.xml
<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/CustomBottomSheetStyle</item>
</style>
<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/drawable_round_bottom_sheet</item>
</style>
Now the most important part is to call the AppBottomDialogue for this I used this
override fun getTheme(): Int {
return R.style.AppBottomSheetDialogTheme
}
Now you can choose whatever to do with your method I used ImagesView inside ConstraintLayout you can directly clip it no problem.

Best way to Implement textview inside circular image/rectangle in android

I am working on an Android app where I need to show some text inside circle like
The text is dynamic.Similarly I want to implement textview inside rectangle shape like
I found out that shape xml file can be used to draw some shapes like
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="20dip"/>
<stroke android:color="#color/colorPrimary" android:width="5dip"/>
<solid android:color="#android:color/transparent"/>
</shape>
But it is not proper as I want some empty space between text and circle.I also tried to use android:background in textview but could not achieve the above mentioned scenario.
What is the Best way to implement above scenario?
How such similar scenarios can be implemented?
Can I use some custom images so that circle/rectangle shapes can be changed and how to achieve this?

You can use something like this..
btn_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="50dp" />
<solid android:color="#000"/>
</shape>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Total Count"
android:layout_marginTop="40dp"
android:textSize="36dp"
android:background="#drawable/btn_bg"
android:textColor="#fff"
android:id="#+id/btn"
/>
</RelativeLayout>

Try this:-
In your xml:-
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/test">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="11"
android:layout_centerInParent="true"/>
</RelativeLayout>
#drawable/test
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="20dip"/>
<size android:height="40dp" android:width="40dp"/>
<stroke android:color="#color/colorPrimary" android:width="2dip"/>
<solid android:color="#android:color/transparent"/>
</shape>

Add gradient to imageview

I want to add a gradient on the bottom of my image . Something like this :
I tried something like this but I only get the gradient no image..
<ImageView
android:id="#+id/trendingImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
/>
trending_gradient_shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#android:color/darker_gray"
android:startColor="#android:color/darker_gray" />
<corners android:radius="0dp" />
</shape>

You need two layers: An ImageView, and a View on top of that with your gradient as android:background. Put these two Views in a FrameLayout:
<FrameLayout
... >
<ImageView
...
android:src="#drawable/trend_donald_sterling" />
<View
...
android:background="#drawable/trending_gradient_shape"/>
</FrameLayout>

Simply set the alpha value in your gardient.xml:
Your imageView:
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
Your gradient xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
In the color value, the first two places after # correspond to the alpha value, while the rest are the actual color value in R G B format, two for each.

try using the "foreground" attribute in your imageview
<ImageView
...
android:src="#drawable/trend_donald_sterling"
android:foreground="#drawable/trending_gradient_shape" />
it worked for me.

Use android:foreground="..." instead of android:background="..."
Now you won't need to put ImageView and View inside a FrameLayout!
So your final code will be:
ImageView
<ImageView
...
android:foreground="#drawable/trend_donald_sterling"/>
Drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>

this is how im gonna do,
i used relative layout as my parent layout, use the following code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/img_sample"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradiant"/>
<LinearLayout
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.55"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Events"
android:gravity="bottom"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#ffffff"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Some description about the events goes here"
android:textSize="14sp"
android:textColor="#ffffff"/>
</LinearLayout>
</RelativeLayout>
hope you can figure out, here i attach my gradiant code below.use it inside the drawable folder....
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>

This is an easy way that creates a similar effect yet doesn't actually have the image disappear. Sometimes using the foreground attribute is not the best for the gradient, especially if using a motionlayout or you have nested scrollviews. Create an entirely new imageview and set the background to the gradient.
XML With Both Imageviews
<ImageView
android:id="#+id/main_imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="#drawable/peakpx__1_"
ads:layout_constraintHeight_percent=".55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/main_imageView_gradient"
android:layout_width="0dp"
android:layout_height="0dp"
ads:layout_constraintHeight_percent=".55"
android:background="#drawable/gradient_theme_background"
app:layout_constraintEnd_toEndOf="#id/main_imageView"
app:layout_constraintBottom_toBottomOf="#id/main_imageView"
app:layout_constraintStart_toStartOf="#id/main_imageView" />
Then for the gradient, I use black #000000 for darker themes, and white #ffffff for lighter ones. A lot of answers I see on this are not adding the center color. This is important if you want to have the gradient start closer to the edge of the image.
gradient_background
<?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:type="linear"
android:endColor="#ff000000"
android:centerColor="#00000000"
android:startColor="#00000000"/>
</shape>

**1> Create file black_shadow.xml**
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#00000000"
android:centerColor="#9c000000"
android:endColor="#000000"
android:type="linear" />
</shape>
</item>bla
</selector>
**2> Just add below line in Imageview.**
android:foreground="#drawable/black_shadow"

EditText does not get rounded

I am trying to get a rounded EditText.
My EditText in layout is like
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<EditText
android:id="#+id/EditTextSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_round"
android:padding="5dip"
android:singleLine="true" >
<requestFocus />
</EditText>
<ImageView
android:id="#+id/searchBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#android:drawable/ic_menu_search" />
</FrameLayout>
and the drawable I am using as EditText background is like
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="12dp"
android:bottomRightRadius="12dp"
android:topLeftRadius="12dp"
android:topRightRadius="12dp" />
</shape>
In my XML graphical layout, my edittext looks fine and rounded, but in emulator and also in device it does not look like that?
Does anyone have any idea why could that be?
Thanks

Remove the android:padding="10dp" attribute to make the drawable look like this. I just tested it and removing the padding attribute shows the rounded corners just fine.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<corners
android:bottomLeftRadius="12dp"
android:bottomRightRadius="12dp"
android:topLeftRadius="12dp"
android:topRightRadius="12dp" />
</shape>
To add padding to the Shape Drawable, notice the padding attribute added in the code above.
The proof lies in the pudding: ;-)
Device Screenshot:
Emulator Screenshot:

You didn't provide the stroke element, so you probably just don't see the background (since it's only a white fill!). When you change the background or add a stroke, it should be visible.
Add:
<stroke android:width="2dp" android:color="#000000" />
And poof! The rectangle is visible :) BTW The padding isn't the issue - it's simply ignored.