Can i give the gradient color on stroke(Border) of a button.
Please help me soon.
<item>
<shape android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="#6053565B" />
<size android:height="40dp"/>
<stroke android:width="2px" android:color="#6053565B" />
</shape>
</item>
Create a drawable shape in your drawable folder like this, and called it button
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#eecc68" />
</shape>
and in your .xml put like below,
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginLeft="52dp"
android:layout_marginTop="39dp"
android:background="#drawable/button"
android:text="Button" />
This is a solution for your problem. You can use this if your button background is a fixed color. Im still searching for the same with a transparent button and a gradient border.
Related
This drawable :
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#70628b" />
<stroke android:width="12dp"
android:color="#4c3f6e"
/>
<corners android:radius="8dp"/>
</shape>
This is my textview
<TextView
android:id="#+id/tv_disabled_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/disabled_transparent_frame"
android:fontFamily="#font/inter_medium"
android:gravity="center"
android:padding="#dimen/dp_24"
android:text="02 : 45"
android:textColor="#color/white"
android:textSize="#dimen/dp_32"
android:textStyle="bold"
android:visibility="visible" />
I am trying to apply circular drawable in inside and outside but given code its showing only outer :
Current screen using this code :
Expected screen
I am unable to do circular please help me in this .
try this code
It can show nested corner
<?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="#4c3f6e" />
<corners android:radius="8dp" />
<padding
android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#70628b" />
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>
note that your "expected screen" has some small shadow under inner color area, you won't achieve this with common drawable, even with layer-list
I would advice you to use CardView
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/outer_background"
android:padding="12dp">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="4dp"
android:visibility="gone"
app:cardCornerRadius="8dp"
app:cardBackgroundColor="#70628b">
<TextView ...
adjust elevation param for more/less shadow
outer_background.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#4c3f6e" />
<corners android:radius="8dp"/>
</shape>
be pixel-perfect, build beautiful apps!
I'm trying to set a transparent circle with a stroke as the background of a TextView in android:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:background="#drawable/decibel_circle"
android:text="30 dB"
android:fontFamily="sans-serif"
android:textColor="#android:color/black"
android:textSize="70dp" />
</RelativeLayout>
And this is the shape I want to use, located in decibel-circle.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="5dp"
android:color="#F44336">
</stroke>
<solid android:color="#android:color/transparent"/>
<size
android:width="36dp"
android:height="36dp" />
<corners android:radius="12dp" />
</shape>
</selector>
The problem is that the shape is never shown, neither in the preview nor when I run my app.
What am I doing wrong?
in your decibel-circle.xml remove selector just use shape alone
Use this only
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="5dp"
android:color="#F44336">
</stroke>
<solid android:color="#android:color/transparent"/>
<size
android:width="36dp"
android:height="36dp" />
<corners android:radius="12dp" />
</shape>
I have a simple background in my drawable folder, just a border that I use on my EditText :
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="2dp"
/>
<solid android:color="#ffffff"
/>
<stroke
android:width="1dip"
android:color="#000" />
</shape>
But I want to achieve this.
Top rounded and the bottom rectangle in the edges! I'm having trouble and do this
Create one Drawable shape xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dip"
android:color="#color/colorAccent"/>
<corners android:radius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
</shape>
Set that drawable in you EditText background
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Text"
android:padding="#dimen/dimen10"
android:background="#drawable/testing"/>
create
round_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white"/>
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
</shape>
Set that drawable in you Edit Text background
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_shape"/>
Please try this one work for me
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#000" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
please check and change radius.
here create editbox_custom_top_radius.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--Here Corner use for give curve to your edit text-->
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<!--stroke is use to apply border on edit text-->
<stroke android:width="2dp"/>
<!--solid for incase you want background color to edit box-->
<solid android:color="#color/app_grey"/>
</shape>
create editbox_custom_bottom_radius.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--Here Corner use for give curve to your edit text-->
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"/>
<!--stroke is use to apply border on edit text-->
<stroke android:width="2dp"/>
<!--solid for incase you want background color to edit box-->
<solid android:color="#color/app_grey"/>
</shape>
and apply it on your edit box
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text"
android:padding="#dimen/dimen10"
android:background="#drawable/editbox_custom_top_radius"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text"
android:padding="#dimen/dimen10"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text"
android:padding="#dimen/dimen10"
android:background="#drawable/editbox_custom_bottom_radius"/>
</LinearLayout>
try it.
I try to put a border for a button in android but unfortunately android:background="" dosen't give any chance to put a drawable resource file. Also it dosen't any chance to put a background color.
This is my button ,
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/space1"
android:text="Submit"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textSize="25dp"
android:layout_centerInParent="true"
android:background="#drawable/button_border" />
IDE(Android Studio) brings the error in the last line of the button xml.
And this is my button_border.xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="5px" android:color="##662a48" />
</shape>
Button should be like below
How to correct this error ?
Have any ideas about this problem .
Thank you.
Because you are providing the wrong value i.e. android:color="##662a48"
try this..
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="5px" android:color="#662a48" />
</shape>
Change your border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270" />
<corners android:radius="5dp" />
<stroke android:width="5px" android:color="#662a48" />
</shape>
remove one # # you stroke color
that is, change
#662a48 instead of ##662a48
You don't need to use extra XML for that. You can use the default functionality like,
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#662a48"
android:text="Submit"
app:strokeWidth="2dp"
app:cornerRadius="10dp"/>
I'm wondering how to create something like the image below using drawables so I can apply it as background?
This isn't a simple rectangle with rounded corners but a kind of a rectangular oval,
Attempts:
Using a rectangle:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<size android:width="40dp"
android:height="10dp" />
<corners
android:radius="100dp" />
Using an oval:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF"/>
<size android:width="40dp"
android:height="10dp" />
I think for this you have to change the size of text view, By using the below code I got the result.
Code used 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="#ff2233"/>
<corners
android:radius="100dp" />
</shape>
Code used in button...
<Button
android:id="#+id/btn_click"
android:layout_width="90dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="22dp"
android:layout_marginTop="16dp"
android:background="#drawable/sh"
android:text="Click" />
Result: ..........