I have a searchview and i changed the edittext box of them with a drawable (with java code). However I have a mysterious border that i can't remove. If you see the screenshot you will see the red line that is a border defined in drawable 'editext.xml' My problem is I doesn't know what is the black line arround the edittext. Anybody know what is and how i remove it?
drawable (edittext):
<?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="#c66262" />
<solid android:color="#FFFFFF" />
</shape>
drawable (searchview):
<?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"/>
<stroke android:width="1dip" android:color="#000000" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
acitivty xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".SearchActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="160sp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/search_background"
android:orientation="vertical" >
<SearchView
android:id="#+id/searchView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20sp"
android:layout_marginRight="20sp"
android:layout_marginTop="60sp"
android:actionViewClass="android.widget.SearchView"
android:background="#drawable/searchview"
android:fitsSystemWindows="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:iconifiedByDefault="false"
android:paddingLeft="10sp"
android:paddingTop="5sp"
android:showAsAction="collapseActionView" >
</SearchView>
</LinearLayout>
</RelativeLayout>
ScreenShot: http://imageshack.com/a/img842/6100/ebsb.jpg
thanks in advance
I think your red color is set in this line in your edittext shape:
<stroke android:width="1dip" android:color="#c66262" />
maybe set here:
<stroke android:width="1dip" android:color="#000000" />
for a black stroke
Edit: this is for making red line black. I misunderstood question a bit. Anyhow I think would look nicer this way. My few cents ;-)
Anyhow, if you don't want the black line, then just set the black line (#000000) to let's say white:
<stroke android:width="1dip" android:color="#ffffff" />
or simply get rid of it at all, by just deleting this code here, which looks like it is your black stroke:
<stroke android:width="1dip" android:color="#000000" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
Just remove following line from drawable(searchview):
stroke android:width="1dip" android:color="#000000"
Related
I am trying to add some margin to the scrollbar inside of an editText but I am not sure how to do that, given the scrollbar is inside of the editText itself ("scrollbars=horizontal"). The way it comes automatically is too close to the text and I need it to be farther away, is there a way to do that?
I have a custom style for the scrollbar and it already looks the way it does in the picture, except for the distance, maybe there's a way to adjust the margins there? So far, only the right margin works, the top and bottom one make the bar disappear.
It needs to look like this:
XML:
<EditText
android:id="#+id/edit_text"
style="#style/Field"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/size_2"
android:layout_marginTop="#dimen/size_1"
android:layout_marginBottom="#dimen/size_1"
android:autofillHints="#null"
android:clickable="true"
android:duplicateParentState="true"
android:focusable="true"
android:inputType="text"
android:scrollbars="horizontal"
android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbHorizontal="#drawable/scrollbar"
android:scrollbarTrackHorizontal="#drawable/scrollbar_track"
android:gravity="center_vertical"/>
Scrollbar thumb:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="16dp"> <!-- Margin -->
<shape>
<solid android:color="#color/specific_border_2" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Scrollbar track:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="16dp"> <!-- Margin -->
<shape>
<solid android:color="#E2E0EB" />
<stroke
android:width="1dp"
android:color="#color/specific_background_3" />
<size android:width="15dp" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
You can set android:scrollbarStyle="outsideOverlay" and control the margin of the scrollbar using android:paddingBottom
Demo:
<EditText
android:id="#+id/name_text"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fadeScrollbars="false"
android:paddingBottom="8dp"
android:scrollbarAlwaysDrawHorizontalTrack="false"
android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbHorizontal="#drawable/scrollview_thumb"
android:scrollbars="horizontal" />
scrollview_thumb.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#C2C3C3" />
<corners android:radius="15dp" />
<size android:width="5dp" />
</shape>
I try to put a border for a button in android but unfortunately I can't see the button border.
Drawable File 👇
<?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="12dp" />
<stroke android:width="3px" android:color="#7E8082" />
</shape>
</item>
</selector>
XML 👇
<Button
android:id="#+id/btn_signup"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="122dp"
android:background="#drawable/bg_signup"
android:fontFamily="#font/poppins_semibold"
android:text="Create an Account"
android:textAllCaps="false"
android:textColor="#color/black"
app:layout_constraintTop_toBottomOf="#+id/btn_login" />
You don't need to use a custom drawable, just use a MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#7E8082"
app:strokeWidth="1dp"
app:cornerRadius="12dp"/>
Don't use a selector for single option use shape directly
bg_signup
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#cdcdcd"/>
<corners
android:radius="4dp"
/>
<stroke
android:width="1dp"
android:color="#000"
/>
</shape>
use Style attribute instead of android:background="#drawable/bg_signup"
make a custom style then call it android:style="#style/bg_signup"
I have a button
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="45dp"
android:onClick="loginIsClicked"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:background="#drawable/button"
android:text="#string/Auth"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:enabled="false" />
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
How can I add animation to the button used in the default buttons?
Example:
enter image description here
If I understood correctly, what you are looking for is a ripple. Wrap your shape in a ripple as follows and provide your ripple color:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/rippleColor">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
</item>
</ripple>
Add MaterialButton.
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Button" />
Also do not forget to change theme Theme.AppCompat.Light.DarkActionBar to Theme.MaterialComponents.Light.DarkActionBar in styles.xml file.
I wanna to create custom shadow for view which i customize as like as my plan.
Custom Shadow looks like Card View elevation.
I need this type of shadow
Hm. This one is extremely simple and producing very similar (imo) result to what you requested. Obviously params like elevation, corner radius etc can/should be tweaked.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:padding="16dp"
android:layout_height="match_parent"
tools:context=".FirstFragment">
<androidx.cardview.widget.CardView
android:id="#+id/textview_first"
android:layout_width="300dp"
android:layout_height="100dp"
app:cardCornerRadius="20dp"
app:cardElevation="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Check this one. This works for me.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#d8d8d8" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="7dp" />
</shape>
</item>
I want to made the present rectangular button into round shape and add the picture of share button in it. I mean the button should be of round share and it should have only image(fit) of "share"
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="8dp"
android:text="03"
android:textStyle="bold"/>
Create drawable file as bg_share.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/colorPrimaryDark">
</solid>
<corners
android:radius="500dp">
</corners>
<padding
android:top="0dp"
android:right="10dp"
android:left="10dp"
android:bottom="0dp">
</padding>
</shape>
And in your main.xml create imageview instead of button like
<ImageView
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bcshare"
android:padding="10dp"
android:src="#drawable/ic_share_black_24dp" />
In MainActivity.java do something like this
share.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Your code...
}
});
You can find the answer Here
create a resource drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF404040" />
<corners android:radius="6dp" />
<gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />
</shape>
then set to the button background .
android:background="#drawable/button_background"
you can create a separate drawable and implement round shape. Then set the drawable to the background of the button as below
Create a drawable file as circle_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#008577"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
Then change the layout as follows
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_button"
android:text="Button"/>
Create an xml in drawable folder and name it like: "round.xml" and use this xml in your given button background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeffffff" />
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topRightRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
and to your button in layout xml you can use the last line to set background
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="8dp"
android:text="03"
android:textStyle="bold"
android:background="#drawable/round"/>
You can use the standard MaterialButton with the Widget.MaterialComponents.Button.Icon style.
Something like:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/ic_share"
app:iconSize="24dp"
app:iconPadding="0dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
/>
Use the app:shapeAppearanceOverlay to get rounded corners. In this way you will have a circle.
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">32dp</item>
</style>