I have a editext which I would like to show as drop down. SO for that I have background.xml file:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item>
<bitmap android:gravity="right" android:src="#drawable/ic_arrow_drop_down" />
</item>
</layer-list>
</item>
</selector>
And added that as background for my edittext. This is what I get:
As you can see there is slight gap between the image and editext border. I would like to make my edittext like this:
How can I achieve this?
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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:background="#drawable/bg"
android:orientation="horizontal">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/bgnew"
android:src="#drawable/ic_android_black_24dp" />
</LinearLayout>
</LinearLayout>
Create bg.xml like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background Color -->
<solid android:color="#ffffff" />
<!-- Border Color -->
<stroke android:width="1dp" android:color="#ff9900" />
</shape>
create a bgnew.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background Color -->
<solid android:color="#ffffff" />
<!-- Border Color -->
<stroke android:width="1dp" android:color="#color/colorAccent" />
</shape>
Output
Create a RelativeLayout with EditText and ImageView UI Components :).
Don't complicate yourself.
Just try Linear layout with layout orientation horizontal of EditText and ImageView. It is simple.
Related
I've created three drawables for my custom button as shown in the code snippets below
custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_default" />
</selector>
button_default.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff" />
<stroke
android:color="#f71b5d"
android:width="0.5dp" />
<corners
android:bottomLeftRadius="5dp"
android:topRightRadius="5dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ebc2ce" />
<stroke
android:color="#f71b5d"
android:width="0.5dp" />
<corners
android:bottomLeftRadius="5dp"
android:topRightRadius="5dp" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />
</shape>
Here is the parent layout where I'm trying to use these drawables to create a custom button. The custom button is inside the LinearLayout
fancy_card.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_gravity="center"
android:clickable="true"
card_view:cardCornerRadius="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/fancy_card_bg">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_button"/>
</LinearLayout>
</android.support.v7.widget.CardView>
My problem: The button inside the LinearLayout does not show up but when I remove my custom drawable from the background of the button, (android:background="#drawable/custom_button"), I can now see the button. If I remove the button from the LinearLayout and apply my custom_button drawable background to it, it works. I'm really confused of what is going on here.
Give an ID to the Button and define button background in your java file.
btn.setBackgroundResource(R.drawable.custom_button);
I custom my layout by using layer-list xml in Android. But, I done for layer-list and see exactly what i want to custom. But, when I apply in my layout, it show not exactly what i want, I don't know why.Help me, please!
This is my layer-list.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size
android:width="#dimen/dp35"
android:height="#dimen/dp35" />
<solid android:color="#color/colorAccent" />
</shape>
</item>
<item android:right="12dp"
android:top="#dimen/dp20"
android:bottom="-5dp">
<rotate
android:fromDegrees="25">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
<item android:left="12.5dp"
android:top="#dimen/dp20"
android:bottom="-5dp">
<rotate
android:fromDegrees="-25">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
Preview 1
My layout using layer-list.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/bg_sale_off"
android:text="Textview"
android:layout_centerInParent="true" />
</RelativeLayout>
Preview 2 ( without triangle at bottom)
you can try
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_sale_off"
android:text="Textview"
android:layout_centerInParent="true" />
</RelativeLayout>
I want to set the line as background below EditText using shape xml but when I set it line set on center
I want like below
but when I set the shape below
drawable/line.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:height="4dp"
android:color="#color/crabfx_dark_gray" />
</shape>
activity_main.xml
<EditText
android:id="#+id/edt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_margin="20dp"
android:background="#drawable/line"/>
I got below output
is any solution ?
Try this one i hope you will get perfect solution..
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/gray" />
</shape>
</item>
<!-- main color -->
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<shape>
<solid android:color="#color/white" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="1dp">
<shape>
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
Or Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/gray" />
</shape>
</item>
<item
android:bottom="1px"
android:left="0px">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<EditText
android:id="#+id/edt1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/line"/>
<EditText
android:id="#+id/edt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/line"/>
</LinearLayout>
Try this code just below your EDIT_text:
<View
android:id="#+id/dividerView"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#191919"
>
</View>
I am using custom drawable to set background of edit text.Following is the code for edit text background
<?xml version="1.0" encoding="utf-8"?>
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#595C65" />
<solid android:color="#ffffff" />
It displays the edit box with rectangle background .But i want to set edit text background with L shape(set left and bottom backgrounds).
Without using external images and i want to set these background via drawable xmls.
Expected output:
Current output:
I found a solution for these:
text.xml:
<?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="#000000" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<item android:bottom="3px" android:left="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
main.xml:
<?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:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:background="#drawable/text"
android:layout_width="170dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp"
android:ems="10"
android:gravity="center_horizontal"
android:padding="2dp"
android:password="true" />
</RelativeLayout>
Expected Output:
Without using external images we can get a output with the help of drawable text.xml
Using a drawable this should work :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#555555" />
</shape>
I have custom designed EditText
search_page.xml
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:background="#E1E1E1"
android:weightSum="1" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:text="City" />
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="#drawable/rounded_edittext"
android:layout_weight=".75" />
</LinearLayout>
rounded_edittext.xml
<?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="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
I want to use color code #2f6699 to get a border color like an outline to the EditText text box as below:
Any ideas on how to achieve this?
Use the below code in your rounded_edittext.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="10dp"
/>
</shape>
This should work
For EditText in image above, You have to create two xml files in res-->drawable folder.
First will be "bg_edittext_focused.xml" paste the lines of code in it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFFFFF" />
<stroke
android:width="2dip"
android:color="#F6F6F6" />
<corners android:radius="2dip" />
<padding
android:bottom="7dip"
android:left="7dip"
android:right="7dip"
android:top="7dip" />
</shape>
Second file will be "bg_edittext_normal.xml" paste the lines of code in it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#F6F6F6" />
<stroke
android:width="2dip"
android:color="#F6F6F6" />
<corners android:radius="2dip" />
<padding
android:bottom="7dip"
android:left="7dip"
android:right="7dip"
android:top="7dip" />
</shape>
In res-->drawable folder create another xml file with name "bg_edittext.xml" that will call above mentioned code. paste the following lines of code below in bg_edittext.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_edittext_focused" android:state_focused="true"/>
<item android:drawable="#drawable/bg_edittext_normal"/>
</selector>
Finally in res-->layout-->example.xml file in your case wherever you created your editText
you'll call bg_edittext.xml as background
<EditText
:::::
:::::
android:background="#drawable/bg_edittext"
:::::
:::::
/>
Use the below code in your rounded_edittext.xml :
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<stroke android:width="2dp"
android:color="#2F6699"/>
<corners android:radius="3dp" />
<gradient android:startColor="#C8C8C8"
android:endColor="#FFFFFF"
android:type="linear"
android:angle="270"/>
</shape>
android:background="#E1E1E1"
// background add in layout
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff">
</EditText>
edit_text.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<corners android:radius="5dp"/>
<stroke android:width="2dip" android:color="#color/button_color_submit" />
</shape>
use here
<EditText
-----
------
android:background="#drawable/edit_text.xml"
/>
Use a 9-patch drawable or create a Shape drawable.