Blur shadow around edittext with rounded corners - android

can anyone explain and give me an example - how to add blurred shadow around edittext with rounded corners
like on a picture

I think it's an elevation. What you need to do is you need to add background with rounded corners to EditText and set margin to the EditText because without margin your shadow will be cutted off.
edittext_background.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="8dp" android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp" android:topRightRadius="8dp"/>
</shape>
EditText:
<EditText
android:layout_width="match_parent"
android:layout_height="40dp"
android:elevation="8dp"
android:background="#drawable/edittext_background"
android:layout_margin="16dp" />

Related

Android-EditText Border is not visible

I am trying to create a border around a EditText but it does not work
Here is my EditText code
<EditText
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="16dp"
android:autofillHints="no"
android:background="#drawable/edit_text_border"
android:hint="#string/text"
android:inputType="number"
android:padding="8dp"
android:textColorHint="#757575" />
Here is my .xml code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#color/border"/>
<corners android:radius="5dp"/>
</shape>
Edit: I tried adding solid color but the whole box became of that color and not just border.
the corners are fixed
You are missing the width on stroke tags.
This should work:
<stroke android:color="#color/border" android:width="5dp"/>

Adding border to Cardview which contains an ImageView

I would like to add a border to a cardview which contains an ImageView. It works perfect if I use an icon as a image (a vector graphic). The image is inside an ImageView with the size MATCH_PARENT and added to a cardview. The cardview should be responsible for the border. Therefore I set the background image of the cardview this way:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<stroke android:width="1px" android:color="#e6e6e6" />
<corners android:radius="20dp"/>
<padding android:left="0dp" android:top="0dp"
android:right="0dp" android:bottom="0dp" />
</shape>
So the image of the ImageView seems to overwrite the background of the cardview. Any idea how to fix it?
This is not a direct solution to using a drawable, but I'd suggest to use MaterialCardView which offers you the same specs as in your drawable using app:strokeColor, app:strokeWidth & app:cardCornerRadius:
<com.google.android.material.card.MaterialCardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="20dp"
app:strokeColor="#e6e6e6"
app:strokeWidth="1dp">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#drawable/my_image" />
</com.google.android.material.card.MaterialCardView>
Note: the margin added to the ImageView that equals to the card stroke so that it's not covered by the card stroke, you can remove it if you'd like to.

Cut a shape from a view in android

I want to cut a transparent oval from a linear layout like below image
any idea?
You cannot cut layouts, instead what you can do is make the circular arrow image transparent by declaring the button opacity like the example given below:
Make an XML file like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<!--make button border solid color, nontransparent-->
<stroke android:color="#483D8B" android:width="2dp"/>
<corners android:radius="2dp"/>
</shape>
</item>
</selector>
Then simply add this file to your layout:
<Button
android:id ="#+id/push_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Background Transparent"
android:background="#drawable/button_bg_transparent"
android:padding="15dp"
/>
You will get the result like this:

Adding border around ripple effect button in android?

I have used the following code to add ripple effect to my button, but the border around it has disappeared and the button has merged with the back ground. I want to add border around it to distinguish it.
This is the code of my button:
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:textColor="#ffffff"
android:text="#string/action_sign_in" />
This is the drawable for the button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="1dp"
android:bottomRightRadius="1dp"
android:radius="0.1dp"
android:topLeftRadius="1dp"
android:topRightRadius="1dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#E8E6E7" />
</shape>
You can actually have both by using background and foreground properties, like so:
android:background="#drawable/the_name_of_your_button_file"
android:foreground="?android:attr/selectableItemBackground"
android:background="?attr/selectableItemBackground"
is causing the button to take on the theme, and blend into the background as if transparent. You are not pointing to the drawable file for the button, which has the stroke element, which gives the border.
If you want a border, you must use the stroke element in your drawable by pointing to it with:
android:background="#drawable/the_name_of_your_button_file"

Android - UI container with edging

Somebody knows how I can create container with edging and label in left side of top part?
Example: screenshots here
I tried background image, but fault with scaling on tablets.
Seems like you was right and there are layouts with rounded corners in the pictures. To make this use the code like this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke android:width="3dip" android:color="#B1BCBE" />
<corners android:radius="10dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
sources:
How to make layout with rounded corners..? and
round corners with border color
In this case you will not have scaling problems.
You can use a RelativeLayout to put the background container with the stroke and text + button. And then put a TextView with property android:layout_alignParentTop=true
<RelativeLayout
...>
<LinearLayout
....
android:background="#drawable/blue_stroke">
//Text + Button
</LinearLayout>
<TextView
...
android:background="#android:color/white"
android:layout_alignParentTop="true"/>
</RelativeLayout>

Categories

Resources