I am getting a weird grey border around the input text field of a search view with emulators which have API >= 26. Only SearchViews inside of a fragment encounter this issue.
Can you please advise on how this can be resolved?
SearchView Picture
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_layout"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:background="#color/grey_background"
android:clickable="true"
android:focusableInTouchMode="true">
<RelativeLayout
android:id="#+id/search_view_layout"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/grey_background">
<SearchView
android:id="#+id/search_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:iconifiedByDefault="false"
android:padding="2dp"
android:layout_margin="5dp"
android:layout_marginLeft="0dp"
android:queryHint="Search...."
android:elevation="0dp"
android:background="#drawable/search_view_border"
android:focusable="false"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/recycler_view"
android:paddingTop="5dp"
android:background="#color/grey_background"
android:layout_below="#+id/search_view_layout"
android:clickable="true"
android:focusableInTouchMode="true"
android:focusable="true" />
</RelativeLayout>
The code for search_view_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<item>
<shape>
<!-- set the shadow color here -->
<stroke
android:width="10dp"
android:color="#A1A9B4" />
<!-- setting the thickness of shadow (positive value will give shadow on that side) -->
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:radius="0dp"/>
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#ffffff" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
try this idea
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#drawable/border_shape_grey">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_gravity="center"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:orientation="horizontal">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="#drawable/ic_search"/>
<EditText
style="#style/TextAppearance.AppCompat"
android:layout_width="0dp"
android:layout_weight="1"
android:hint="#string/action_search"
android:focusableInTouchMode="true"
android:focusable="true"
android:descendantFocusability="blocksDescendants"
android:inputType="text"
android:singleLine="true"
android:background="#00000000"
android:padding="8dp"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
border_shap_grey.xml
<?xml version="1.0" encoding="utf-8"?>
<stroke android:width="2dp"
android:color="#f5f6f6"
/>
<solid android:color="#f5f6f6"/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners
android:radius="5dip"/>
A solution to this issue that I have found:
Change the searchview widget to android.support.v7.widget.SearchView
Retrieve the search_plate layout and set its elevation to 0.
LinearLayout searchPlate = (LinearLayout) searchView.findViewById(android.support.v7.appcompat.R.id.search_plate);
searchPlate.setElevation(0f);
Reference:
Accepted answer in Changing the background drawable of the searchview widget
Related
<FrameLayout
android:id="#+id/flTodayTraining"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/fl_today_training_bg_margin_bottom"
android:layout_marginTop="#dimen/fl_today_training_bg_margin_top"
android:layout_marginHorizontal="#dimen/fl_today_training_bg_margin_horizontal"
android:background="#drawable/today_training_bg"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvDaysTrained"
>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="#dimen/iv_today_training_detail_height"
android:src="#drawable/male_upper_body"
android:scaleType="fitXY"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/upper_body"
android:textSize="#dimen/tv_today_training_detail_text_size"
android:textColor="#color/black"
android:paddingVertical="#dimen/tv_today_training_detail_padding_vertical"
android:gravity="center"
/>
</androidx.appcompat.widget.LinearLayoutCompat>
</FrameLayout>
That's the cornered background of the frame layout
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners
android:radius="15dp"
/>
</shape>
As you can see in the image, it's rounded in the bottom, but not in the top, how do I make it rounded in all corners?
Please give me an answer that works on all version, not only api 31 +
Very simple. Just use cardView
see below XML code
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="15dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/fruit1" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:gravity="center"
android:paddingBottom="5dp"
android:text="Apple"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
and the result is below
pros-
you can easily give elevation to card view to show shadow
easily give it radius.
looks more attractive.
much more.
I hope it'll help you.
Instead of setting the background to the FrameLayout set it to the immediate ViewGroup. Also remove fitXy in the imageview
<FrameLayout
android:id="#+id/flTodayTraining"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/fl_today_training_bg_margin_bottom"
android:layout_marginTop="#dimen/fl_today_training_bg_margin_top"
android:layout_marginHorizontal="#dimen/fl_today_training_bg_margin_horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvDaysTrained"
>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/today_training_bg"<--set it to immediate viewgroup instead
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="#dimen/iv_today_training_detail_height"
android:foreground="#drawable/some_foreground" <-- insert the new background drawable you created
android:scaleType="centerCrop"
android:src="#drawable/male_upper_body" <-- removed fitXy
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/upper_body"
android:textSize="#dimen/tv_today_training_detail_text_size"
android:textColor="#color/black"
android:paddingVertical="#dimen/tv_today_training_detail_padding_vertical"
android:gravity="center"
/>
</androidx.appcompat.widget.LinearLayoutCompat>
</FrameLayout>
Create this background drawable
<?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="8dp"
android:color="#color/white" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="#dimen/padding_margin_8" />
<stroke
android:width="8dp"
android:color="#color/white" />
</shape>
</item>
</layer-list>
Here is Background drawable
<?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="6dp" />
<stroke
android:width="1dp"
android:color="#8C0B0B" />
</shape>
Here is XML Card view where Background Drawer btn_typing_background
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginTop="25dp"
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp"
android:background="#drawable/btn_typing_background"
android:textColor="#969696">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Add your Phrase"
android:textSize="14sp" />
</androidx.cardview.widget.CardView>
Can Anyone Help with me this, Thank you in advance
Card view does not support android:background, instead you can use MartialCardView for your usage like this:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="6dp"
app:strokeWidth="1dp"
app:strokeColor="#8C0B0B">
I'm trying to add a background rectangle shape to a custom RelativeLayout in android and I'm following the recommendations of most questions on here by implementing a custom drawable in customborder.xml and setting it as the background of the custom.axml view. I have also tried setting the relativeLayout source as well.
You can see I've also tried it in an imageView which isn't showing up either.
I've messed around with size and color but nothing appears to be rendered.
Am I missing something that needs to be done in code? Or the xml?
customborder.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
shape="rectangle">
<corners radius="20dp"/>
<padding left="50dp" right="50dp" top="50dp" bottom="50dp"/>
<stroke width="10dp" color="#B2F7FE"/>
<solid color="white"/>
</shape>
custom.axml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:background="#drawable/customborder">
<ImageView
android:id="#+id/imageViewBackground"
android:layout_width="fill_parent"
android:layout_height="49.0dp"
android:layout_gravity="center"
android:background="#ffededed"
android:adjustViewBounds="false"
android:alpha="1"
android:backgroundTint="#00000000"
android:foreground="#drawable/customborder" />
<refractored.controls.CircleImageView
android:id="#+id/Image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:src="#drawable/icon" />
<LinearLayout
android:id="#+id/Text"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="10dip"
android:layout_marginLeft="10.5dp"
android:background="#drawable/customborder">
<TextView
android:id="#+id/Text2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="24dip"
android:textColor="#FFFFFFFF"
android:paddingLeft="5dip"
android:text="Test"
android:layout_marginLeft="46.0dp"
android:layout_marginTop="12.0dp"
android:layout_gravity="left" />
<TextView
android:id="#+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF7F3300"
android:textSize="20dip"
android:textStyle="italic" />
</LinearLayout>
Please replace your customborder.xml file with following code,
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
<padding
android:bottom="50dp"
android:left="50dp"
android:right="50dp"
android:top="50dp" />
<stroke android:width="10dp" android:color="#B2F7FE"/>
<solid android:color="#ffffff" />
</shape>
Your mistake was android prefix is missing.Also you are missing close tag in your layout.
Hi friends please help here i trying to do below shape more than three days but cant able to get it how can i do it
But the Output i am getting is this one
Below is my code
close_drawable.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#30000000"/>
<size android:height="70dp" android:width="70dp"/>
</shape>
<clip android:gravity="left" android:clipOrientation="horizontal"/>
</item>
<item android:drawable="#drawable/close" android:width="50dp" android:height="50dp" android:gravity="center"/>
</layer-list>
And my Xml Code is
<RelativeLayout
android:id="#+id/bottomroot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/nope"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/close_drawable" />
<ImageView
android:id="#+id/superlike"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-1.5dp"
android:layout_toRightOf="#+id/nope"
app:srcCompat="#drawable/superlike_drawable" />
<ImageView
android:id="#+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-1.5dp"
android:layout_toRightOf="#+id/superlike"
app:srcCompat="#drawable/like_drawable" />
<ImageView
android:id="#+id/like_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-1.5dp"
android:layout_toRightOf="#+id/like"
app:srcCompat="#drawable/likelist_drawable" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/superlike"
android:layout_alignEnd="#+id/superlike"
android:gravity="center"
android:layout_below="#+id/superlike"
android:text="Mashalla!"
android:textColor="#fff" />
</RelativeLayout>
Your circle xml shoul look like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="#20000000" />
<size
android:width="70dp"
android:height="70dp" />
</shape>
EDIT: this can happen if you have paddings in the layout that holds the ImageVIew
I want to set a text view and edit text on same line in android.
As I've wrote here I should do it with linear layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="200px"
android:orientation="horizontal"
android:layout_alignParentLeft="true"
android:background="#android:color/background_light"
android:layout_alignParentStart="true"
android:layout_below="#+id/loginTitle"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:text="Phone"
android:layout_height="200px"
android:gravity="center"
android:id="#+id/phoneTV"
android:textColor="#f7941e"
android:textSize="20sp">
</TextView>
<EditText android:layout_width="wrap_content"
android:id="#+id/phoneNumber"
android:layout_height="200px"
android:gravity="center"
android:background="#android:color/background_light"
android:text="0.00"
android:textSize="20sp"
android:inputType="number|numberDecimal"
android:layout_marginLeft="10dp">
</EditText>
</LinearLayout>
but it doesn't look at all as I want to.
My goal is to reach this component
Can you please help me how to do such a thing?
Thanks in advance!
Eden Ben simon
I put this together because I like its simple look.
Here is the final look of it.
layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2c2d2d"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="5dp"
android:background="#drawable/item_holder"
android:orientation="horizontal">
<TextView
android:id="#+id/phoneTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item"
android:gravity="center"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="Phone"
android:textColor="#f7941e"
android:textSize="16sp">
</TextView>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#bdbfc1"/>
<EditText
android:id="#+id/phoneNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/item_info"
android:gravity="left"
android:inputType="number|numberDecimal"
android:paddingBottom="8dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:text="516-678-7325"
android:textColor="#6d6e71"
android:textSize="16sp">
</EditText>
</LinearLayout>
</RelativeLayout>
Drawable Files Create three drawable files in the drawables folder. Used to create round corners.
item_holder.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<stroke
android:width="1dp"
android:color="#b9bbbe"/>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:radius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
item.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="0dp"
android:radius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"/>
</shape>
item_info.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#f1f1f2"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:radius="0dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp"/>
</shape>
Create a background for your TextView
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item android:right="-1dp">
<shape>
<solid android:color="#FFFFFF"/>
<stroke
android:width="1dp"
android:color="#BDBFC1"/>
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="0dp"
android:radius="1px"
android:topLeftRadius="7dp"
android:topRightRadius="0dp"/>
</shape>
</item>
</layer-list>
And your EditText
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is the line -->
<item android:left="-1dp">
<shape>
<solid android:color="#F1F1F2"/>
<stroke
android:width="1dp"
android:color="#BDBFC1"/>
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="7dp"
android:radius="1px"
android:topLeftRadius="0dp"
android:topRightRadius="7dp"/>
</shape>
</item>
</layer-list>
Put this into your activity
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
>
<TextView
android:id="#+id/tvPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#drawable/text_view_background"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="Phone"
android:textColor="#F7941E"
android:textSize="20sp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/tvPhone"
android:layout_alignTop="#id/tvPhone"
android:layout_toRightOf="#id/tvPhone"
android:background="#drawable/edit_text_background"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:textColor="#F7941E"/>
</RelativeLayout>
It looks like this, you just need to fine tune it a bit ;)
change the attribute in LinearLayout to android:orientation="vertical"
Change orientation to vertical and use layout_weight for both of your views.
Adjust the values to obtain the desired effect. More info here: Linear Layout
You can use drawable left attribute
android:drawableLeft="#drawable/name_icon_edittext"
Make separate image with text 'phone' and create an 9 patch image for Edittext background. I hope it will work !
Use dp instead px. It seems like a perfect place to just use a LinearLayout with orientation horizontal with a weights.
There is no need to write 200px every time just use Match parent.
So go with a LinearLayout with orientation: Horizontal unless I'm missing something here
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/bgmainactivity"
android:orientation="horizontal">
<TextView
android:id="#+id/phoneTV"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="0.5dp"
android:layout_weight="0.3"
android:background="#android:color/background_light"
android:gravity="center_vertical|center_horizontal"
android:padding="5dp"
android:text="Phone"
android:textColor="#f7941e"
android:textSize="20sp"
android:textStyle="bold"></TextView>
<!--U can use some like this to add divider -->
<!--<TextView-->
<!--android:layout_width="1dp"-->
<!--android:layout_height="match_parent"-->
<!--android:background="#android:color/background_dark"></TextView>-->
<EditText
android:id="#+id/phoneNumber"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="0.5dp"
android:layout_weight="0.8"
android:background="#EBEBEB"
android:gravity="center_vertical|center_horizontal"
android:inputType="number|numberDecimal"
android:padding="5dp"
android:text="0.00"
android:textSize="20sp"></EditText>
**bgmainactivity.Xml**
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#565656" />
<stroke
android:width="1dp"
android:color="#565656" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp" />
I just hope remaining denting panting will done by your self.
Happy Coding