Develop Reference

Android/Spinner: Remove padding to the right of the arrow

I'm using a spinner in a relative layout with a couple of other layout elements (layout-v21):
<Spinner
android:id="#+id/spinner"
android:layout_width="155dp"
android:layout_height="34dp"
android:layout_alignBottom="#+id/textList"
android:layout_alignTop="#+id/textList"
android:layout_alignParentEnd="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="0dp"
android:layout_toEndOf="#+id/textList"
android:paddingRight="1dp"/>
This sets the distance to where the parent layout ends:
android:layout_marginRight="0dp"
android:layout_alignParentEnd="true"
This sets how close the choice items inside the spinner can get to the left of the arrow (right padding of the text):
android:paddingRight="1dp"
But is there a way to get rid of (or at least make smaller) the unnecessary space/padding that is to the right of the arrow but still within the spinner layout element (so I can then use more space on the left without changing the size of the spinner)?
This is what I'm talking about:
Edit: Here's the code for the RelativeLayout:
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.mycompany.myapp.MainActivity"
android:backgroundTint="#000000"
android:focusableInTouchMode="true">

It work for me :
<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:backgroundTint="#000000"
android:focusableInTouchMode="true">
<Spinner
android:id="#+id/spinner"
android:layout_width="155dp"
android:layout_height="34dp"
style="#style/spinner_style"
android:layout_alignParentEnd="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="0dp"
android:paddingRight="1dp"/>
styles.xml
<style name="spinner_style">
<item name="android:layout_height">35dp</item>
<item name="android:background">#drawable/spinner_bg</item>
</style>
spinner_bg.xml
<?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="#android:color/white" android:startColor="#android:color/white" android:type="linear" />
<stroke android:width="1dp" android:color="#color/colorAccent" />
<corners android:radius="0dp" />
<padding android:bottom="6dp" android:left="6dp" android:right="6dp" android:top="6dp" />
</shape>
</item>
<item>
<bitmap android:gravity="center|right" android:src="#drawable/ic_spin_down_arrow" />
</item>
</layer-list>
</item>
</selector>

Inside the spinner how to set imageview at the right corner

<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>

Android white background EditText that act as button

I'm trying to Style an EditText to look like the one in the above picture.
I tried setting a background but the result was not at all as excpected
Could you someone point me to the right direction?

use this xml as background fro your edittext:
<?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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
and put some padding in your edittext.

You can use android CardView Library and set EditText background to null
Below is the sample code for it
Add the library in gradle for cardview
compile 'com.android.support:cardview-v7:21.0.+'
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:padding="10dp"
android:elevation="10dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:orientation="vertical">
<!-- Card Contents go here -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<EditText
android:id="#+id/edt_first_name"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:editable="true"
android:ellipsize="end"
android:text="Text"
android:inputType="text"
android:singleLine="true" />
<ImageView
android:layout_width="wrap_content"
android:src="#drawable/ic_menu"
android:layout_height="wrap_content"
></ImageView>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

how to make card list in android

I was looking for some ListView, styling techniques and I found this one Post-How to make card List, I wanted the ListItems to be just like this :
list_item_background.xml is :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
I have implemented that in my RowOfListView.xml like :
<?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="wrap_content"
android:layout_margin="#dimen/ten"
android:background="#drawable/list_item_background" >
<ImageView
android:id="#+id/imageView_in_row"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/row_member_name"
android:layout_marginBottom="#dimen/ten"
android:layout_marginLeft="#dimen/five"
android:background="#drawable/rectangle"
android:contentDescription="#string/image"
android:src="#drawable/member" />
<TextView
android:id="#+id/row_member_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/ten"
android:layout_marginRight="#dimen/ten"
android:layout_marginTop="#dimen/ten"
android:layout_toRightOf="#+id/imageView_in_row"
android:ellipsize="end"
android:text="Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
.
.
.
</RelativeLayout>
But I'm getting this one :
unable to get that margin between Items of ListView as in prior picture, where I should set that margin.

You can try like this for listview row xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/outer"
style="#style/CardOuterStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_white"
android:orientation="vertical" >
//your fields here
</LinearLayout>
</FrameLayout>
and CardOuterStyle
<style name="CardOuterStyle">
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
<item name="android:paddingTop">5dp</item>
</style>

You should set the dividerHeight of the ListView as :
<ListView android:id="#+id/MyListView"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:divider="#android:color/transparent"
android:dividerHeight="#dimen/ten"/>
Alternatively, you may also give padding in your relative layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten"
android:background="#drawable/list_item_background"
android:paddingTop="#dimen/five"
android:paddingBottom="#dimen/five" >

Effect in EditText from xml

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>