I want to create a button as it is in the first picture. But my output is like in the second picture. How can i achieve the correct spacing between image and text in the button and also the shadow as it is in the first picture. How can i achieve this.
My code is as follows
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:left="2dp" android:top="4dp">
<shape>
<solid android:color="#1E90FF" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<!-- SHADOW LAYER -->
<item android:left="4dp" android:top="4dp">
<shape>
<solid android:color="#C0C0C0" />
</shape>
</item>
<!-- CONTENT LAYER -->
<item android:bottom="5dp" android:right="4dp">
<shape>
<solid android:color="#DADADA" />
</shape>
</item>
</layer-list>
</item>
try with this code this is running code you can use this code ..
<LinearLayout 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:orientation="vertical">
<LinearLayout
android:id="#+id/lla"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#CCCCCC"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="FIND PRODUCTS"
android:layout_marginLeft="5dp"
android:layout_gravity="center"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
Try this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><layer-list>
<item android:left="2dp" android:top="4dp"><shape>
<solid android:color="#1E90FF" />
</shape></item>
</layer-list></item>
<item><layer-list>
<!-- SHADOW LAYER -->
<item android:left="3dp" android:top="3dp"><shape>
<solid android:color="#C0C0C0" />
</shape></item>
<!-- CONTENT LAYER -->
<item android:bottom="3dp" android:right="3dp"><shape>
<solid android:color="#DADADA" />
</shape></item>
</layer-list></item>
</selector>
xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/back"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<ImageView
android:id="#+id/iconLeft"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginTop="10dp"
android:src="#drawable/ic_photos" />
<TextView
android:id="#+id/txtLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/iconLeft"
android:text="Find Product"
android:textSize="16sp" />
<ImageView
android:id="#+id/iconRight"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginTop="10dp"
android:src="#drawable/ic_photos" />
</RelativeLayout>
Related
I want spinner as dropdown like below images,
I created below like this
xml layout:
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:background="#drawable/edittext_shape"
android:padding="10dp"
android:paddingLeft="4dp"
android:id="#+id/rol_type"
android:layout_marginBottom="2dp">
Spinner shape
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:startColor="#color/white" android:endColor="#color/appblue" />
<stroke android:width="1dp" android:color="#color/block" />
<corners android:radius="4dp" />
<!-- <padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />-->
</shape></item>
<item ><bitmap android:gravity="right|bottom|end" android:src="#drawable/drop_arrow" android:tint="#color/red" />
</item>
</layer-list></item>
</selector>
My output:
I want below like this please help me in this case:
Try this:
I changed your background to style.
You can also extend this style and add your own elements https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
style="#android:style/Widget.Holo.Light.Spinner"
android:padding="10dp"
android:paddingLeft="4dp"
android:id="#+id/rol_type"
android:layout_marginBottom="2dp">
I use shape as background in TextView.
But I have no idea how can I center text.
screen
My shape:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorPrimary" />
<corners android:radius="30.0dip" />
<size
android:height="50dp"
android:width="190dp" />
</shape>
</item>
</selector>
Styles:
<style name="AppTheme.TextView" parent="#android:style/Widget.TextView">
<item name="android:background">#drawable/text_view_shape</item>
<item name="android:textColor">#android:color/white</item>
</style>
My Layout :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tutorial_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/img_two"
tools:context="com.....TutorialFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tutorial_new_job"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView"
style="#style/AppTheme.TextView"
android:layout_marginTop="200dp"
android:layout_gravity="center_horizontal"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tutorial_its_easy"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView2"
style="#style/AppTheme.TextView"
android:layout_marginTop="34dp"
android:layout_gravity="center_horizontal" />
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorPrimary" />
<corners android:radius="30.0dip" />
<size
android:height="50dp"
android:width="190dp" />
<padding
android:left="50dp"
android:right="50dp">
</padding>
</shape>
</item>
</selector>
plus android:gravity="center" for TextView
Use android:gravity="center_horizontal" or android:textAlignment="center_horizontal"
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/spinner1_day"
android:layout_width="70dp"
android:layout_height="40dp"
android:src="#drawable/edit_text_style"
android:text="Day"
android:textStyle="normal"
android:textSize="15dp"
android:fontFamily="sans-serif-light"
android:drawSelectorOnTop="true"
android:entries="#array/Day"
android:dropDownWidth="fill_parent"
android:background="#drawable/downimage"/>
<Spinner
android:id="#+id/spinner2_month"
android:layout_width="70dp"
android:layout_height="40dp"
android:background="#drawable/edit_text_style"
android:text="Day"
android:textStyle="normal"
android:textSize="15dp"
android:fontFamily="sans-serif-light"
android:drawSelectorOnTop="true"
android:entries="#array/Day"
android:layout_gravity="center_horizontal"
android:layout_weight="0.81"
android:layout_marginLeft="10dp"
/>
</LinearLayout>
i used android:dropDownWidth="fill_parent" and android:background="#drawable/downimage" but the image will be set as background.how can is set imageview inside the spinner at the right corner?
<LinearLayout
android:id="#+id/layoutSpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/input_field"
android:orientation="horizontal"
android:padding="5sp">
<Spinner
android:id="#+id/spinner_area"
android:layout_width="0sp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="9"
android:background="#null"
android:entries="#array/state"
android:gravity="center"
android:prompt="#string/area_prompt"
android:spinnerMode="dropdown" />
<ImageView
android:id="#+id/errow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5sp"
android:src="#drawable/arrow1" />
</LinearLayout>
Use this
Create an XML in drawable folder with any name for example spinner_bg.xml and add the following lines
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_ab_default_holo_dark_am" /> // you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list></item>
</selector>
Add the following lines to your styles.xml which is inside values folder
<style name="spinner_style" >
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
Now add this style to your spinner as
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/spinner_style"
android:popupBackground="#cccccc" />
For more detail visit here. Android add arrow image to spinner
Try drawableRight property in XML to set it on right side on spinner:
android:drawableRight="#drawable/downimage"
I have solved this problem on my side by using following simple code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/ambilwarna_arrow_down" />
</RelativeLayout>
Hope this will work for you .Keep coding
try to create a custom spinner using FrameLayout, I using this, and works well
<FrameLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/border_spinner_select_location"
>
<Spinner
android:spinnerMode="dialog"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/spinner_provinsi"
android:prompt="#string/promp"
android:background="#drawable/spinner_pressed"
></Spinner>
<ImageView
android:layout_width="23dp"
android:layout_height="30dp"
android:src="#drawable/ico_arrow_select_white_xxhdpi"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="25dp"
/>
</FrameLayout>
for border line :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="2dp"
android:color="#android:color/white" />
</shape>
for effect when your press the spinner
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#android:color/white" />
<item android:state_pressed="true"
android:drawable="#color/deep_white_pressed_spinner" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#android:color/holo_blue_bright" />
<item android:drawable="#color/semi_white_transparant" />
</selector>
dummy.xml (drawable should be of very less size-24dp)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list android:opacity="transparent">
<item android:width="100dp" android:gravity="right">
<bitmap android:src="#drawable/down_button_dummy_dummy" android:gravity="center"/>
</item>
</layer-list>
</item>
</selector>
layout snippet be like...
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
app:cardElevation="5dp"
>
<Spinner
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/dummy">
</Spinner>
</android.support.v7.widget.CardView>
I am trying to give shadow effect as shown below to edittext
but i am unable to do it. Below is what i have done till now
My code are as follow:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<LinearLayout
android:id="#+id/layout_linear_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/img_6parcels"
android:layout_centerInParent="true"
android:layout_marginBottom="10dp"
android:background="#drawable/screen_background"
android:gravity="center"
android:orientation="vertical"
android:paddingBottom="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="20dp" >
<EditText
android:id="#+id/edit_text_domain"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="Domain"
android:paddingBottom="3dp"
android:background="#drawable/edittext_shadow"
android:paddingTop="3dp">
<requestFocus />
</EditText>
<ImageView
android:id="#+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:src="#drawable/slice_address_transparent" />
<EditText
android:id="#+id/edit_text_invinzee"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/edittext_shadow"
android:gravity="center"
android:hint="Invinzee"
android:paddingBottom="3dp"
android:paddingTop="3dp" />
<EditText
android:id="#+id/edit_text_password"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/edittext_shadow"
android:gravity="center"
android:hint="Password"
android:inputType="textPassword"
android:paddingBottom="3dp"
android:paddingTop="3dp" />
<Button
android:id="#+id/log_in_Button"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:gravity="center"
android:text="LOGIN" />
</LinearLayout>
<LinearLayout
android:id="#+id/img_6parcels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:layout_marginTop="20dp" >
<ImageView
android:id="#+id/parcel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:src="#drawable/six3_03" />
</LinearLayout>
<TextView
android:id="#+id/text_delivery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/layout_linear_login"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="Perfect Job"
android:textColor="#353f41" />
</RelativeLayout>
</RelativeLayout>
My edittext_shadow.xml is as follow:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most important is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<solid android:color="#660099" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#660099" />
</shape>
</item>
<!-- White Top color -->
<item android:top="-3px" android:left="-3px">
<shape android:shape="rectangle">
<solid android:color="#86ae0b" />
</shape>
</item>
</layer-list>
I tried as shown in this link Add drop shadow effects to EditText Field but unable to accomplish it.
Any Help!!!
Thanks, Guys For helping.
Mixing code from Add drop shadow effects to EditText Field and answer from babar sanah I was able to find the solution.
My solution is as below:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most important in order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#333333"
android:centerColor="#86ae0b"
android:startColor="#666666" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#333333"
android:centerColor="#86ae0b"
android:startColor="#666666" />
</shape>
</item>
<!-- White Top color -->
<item android:top="5px" android:left="5px">
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#333333"
android:centerColor="#86ae0b"
android:startColor="#666666" />
</shape>
</item>
</layer-list>
Thanks alot for the help it means a lot to me.
Why you didn't try gradient? If it is possible please let me know..
<gradient
android:angle="270"
android:centerColor="#color/shadow_alpha"
android:endColor="#color/shadow_alpha1"
android:startColor="#color/shadow_alpha2" />
Define the colors as per your need..
create an xml shape.xml put in drawable folders and give your edit text background
android:background="#drawable/shape"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<!-- you can use any color you want I used here gray color-->
<gradient android:angle="-90"
android:endColor="#436EEE"
android:startColor="#436EEE"
android:centerColor="#4876FF" />
</shape>
How do I change the color of a Relative Layout Shape ? To work it like a button.
I tried to do it using a selector.
This is the code i used.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlGPS"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:background="#drawable/relative_selector"
>
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvs1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_below="#+id/tvl1"
android:layout_toLeftOf="#+id/iv1"
android:text="you can here protect ... "
android:textColor="#color/gray" />
<TextView
android:id="#+id/tvl1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/iv1"
android:text="GPS"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
relative_selector.xml In here I'm doing the changes using selector.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/relative_focus"/>
<item android:state_pressed="true" android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
<item android:drawable="#drawable/relative_background"/>
</selector>
relative_background.xml This is the shape.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<stroke android:width="1dp" android:color="#636161" />
<padding android:left="5dp"
android:top="2dp"
android:right="2dp"
android:bottom="5dp" />
<corners android:radius="6dp" />
<solid android:color="#88ffffff"
/>
</shape>
In "relative_clicked.xml" and "relative_focus.xml" I only changed the colors.
relative_focus.xml
<stroke android:width="1dp" android:color="#ffff00" />
relative_clicked.xml
<solid android:color="#88ffff00"/>
All .xml files are in drawable folder.
I want to work this like a button.Is someone having any idea?
From your selector xml:
<item android:state_pressed="true"
android:state_enabled="false"
android:drawable="#drawable/relative_clicked" />
Will it work if you remove state_enabled?
<item android:state_pressed="true"
android:drawable="#drawable/relative_clicked" />