Develop Reference

Customize the GridView like in the image below

Please help me in customizing like in the image
Below is my grid_mainborders.xml
<?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/grid_two_borderselected"
/> <!-- focused -->
<item android:state_focused="false"
android:drawable="#drawable/grid_two_bordernormal"/>
</selector>
Below is my grid_two_borderselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#android:color/holo_blue_light" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="3dp" />
</shape>
Below is my grid_two_bordernormal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="2dp"
android:color="#android:color/white" />
<padding android:left="7dp" android:top="7dp"
android:right="7dp" android:bottom="7dp" />
<corners android:radius="3dp" />
</shape>
Below is my GridView Item file
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginTop="2dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="2dp"
android:background="#drawable/grid_mainborders">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cardViewGridLangsItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/grid_mainborders">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="10dp">
<TextView
android:id="#+id/tvMaintext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="English"
android:textSize="26sp"
android:padding="5dp"
android:textStyle="bold"/>
<TextView
android:id="#+id/tvSubText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="English"
android:textSize="20sp"
android:padding="5dp"/>
<TextView
android:id="#+id/tvAlphabet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="E"
android:textSize="38sp"
android:padding="5dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
I am using gridview with base adapter,
I have tried with few links but background is changing not with the corners of selected item.
Please help me on this Thanks in advance

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>

Designing thermometer in Android

Have tried many ways to design a thermometer in android but they are all suck.
The last work is using a vertical progress plus a circle.xml:
drawable\verticalprogressbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
</shape>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape>
<corners android:radius="50dip"/>
<solid android:color="#FF0000"/>
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
<shape>
<solid android:color="#FF0000"/>
</shape>
</clip>
</item>
</layer-list>
drawable\circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<solid android:color="#FF0000" />
</shape>
layout\activity_main.xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/tempGauge"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="10dp"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:max="50"
android:progress="25"
android:progressDrawable="#drawable/verticalprogressbar" />
<View
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="bottom"
android:layout_marginBottom="10dp"
android:background="#drawable/circle" />
</LinearLayout>
What is the best way to draw a real mercury-like meter with this background:
http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Thermometer_CF.svg/345px-Thermometer_CF.svg.png

Change the layout from linear to relative:
<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.example.myview.MainActivity" >
<View
android:id="#+id/view1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBottom="#+id/tempGauge"
android:layout_marginLeft="0dp"
android:background="#drawable/circle" />
<ProgressBar
android:id="#+id/tempGauge"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="10dp"
android:layout_height="fill_parent"
android:layout_alignRight="#+id/view1"
android:layout_marginRight="10dp"
android:max="50"
android:progress="25"
android:progressDrawable="#drawable/verticalprogressbar" />
</RelativeLayout>
Although it is not perfect, but finally looks better.
Now I need to add scales to it.

How to assign padding to Listview item divider line

How can i give padding to list item as i show in image.
I want to make the divider in the layout as shown in the image.
this is my list fragment code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<ListView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/listV_main"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"/>
This is my List section code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp">
<include
android:id="#+id/list_item_section_text"
layout="#android:layout/preference_category"
/>
This is my list item code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:adjustViewBounds="true"
android:paddingRight="?android:attr/scrollbarSize"
>
<ImageView
android:id="#+id/showlist_item_entry_drawable"
android:layout_width="82dp"
android:adjustViewBounds="true"
android:layout_height="68dp"
android:scaleType="fitXY"
android:paddingLeft="9dp"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="6dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
android:layout_weight="1"
>
<TextView android:id="#+id/list_item_entry_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:ellipsize="marquee"
android:fadingEdge="horizontal" />
<TextView android:id="#+id/list_item_entry_summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/list_item_entry_title"
android:layout_alignLeft="#id/list_item_entry_title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true"
android:textColor="?android:attr/textColorSecondary" />
</RelativeLayout>

Use 'inset'.....
(list_divider.xml)
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="50dp"
android:insetRight="50dp" >
<shape>
<solid android:color="#color/orange" />
<corners android:radius="2.0dip" />
</shape>
</inset>
and in your list view add like this...
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/list_divider"
...
/>
you can set the inset value as desired...
UPDATE
As pointed out by #Giulio Piancastelli , If the background of list container is different from background of list item then you may use 'layer-list'...
(list_divider.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="#color/list_background" />
</shape>
</item>
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="rectangle" >
<solid android:color="#color/divider_color"/>
</shape>
</item>
</layer-list>
and in your list view add like this...
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/list_divider"
...
/>

You need padding for dividers? Create your custom drawable-shape as:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
And set as divider for your ListView in xml:
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/custom_divider"
...
/>
UPD
I just have ListView in xml:
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="2dp"
android:divider="#drawable/line"
/>
Divider as line.xml in drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="10dp"
android:right="10dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
Do not make any modifications on the ListView in code. You can try to use Clean if resources are wrong builded.

As #Giulio Piancastelli mentioned under #ASP answer, the <inset> fails when the background colour of the list container is not the same as the rows inside the list. One solution is to use <layer-list> like below:
//This item is to overlay the container colour with the row background colour
<item
android:left="0dp"
android:right="0dp">
<shape android:shape="rectangle" >
<solid android:color="#color/row_background" />
</shape>
</item>
//This item is the divider, put it at bottom so it will overlay the background colour
<item
android:left="92dp"
android:right="0dp">
<shape android:shape="rectangle" >
<solid android:color="#color/divider
</shape>
</item>
Then you can set it as divider as most answers suggest:
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/layer_list"
...
/>

In your listitem give the paddingtop to the main layout as
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:padding="10dp"
....// Remaining fields
>
... //Remaining items
</LinearLayout>

this should be alternative solution for this question:
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="color/secondary_text"
android:layout_marginTop="16dp" />

I don't know why people are adding shape to the layered-list but for me this works just fine.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="10dp" android:height="2dp" android:drawable="#android:color/holo_blue_dark"/>
<item android:height="22dp" android:drawable="#android:color/transparent"/>
</layer-list>
1st item will be 10dp from the top and with a height of 2dp and a color of holo_blue_dark. (This will be the divider)
Now to give 10dp margin to bottom we need to create another transparent item with a height of 22dp (10dp (top margin) + 2dp (height of divider) + 10dp(bottom margin from divider)).
This is working fine for me. I hope this will work for you too.

set your list item divider height and color:
<ListView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/listV_main"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:divider="#android:color/darker_gray"
android:dividerHeight="1dp"/>

Android listSelector doesnt work

I am trying to style the List view and the list item as followings
List View
<ListView
android:id="#+id/list_items"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#color/color_dark_orange"
android:divider="#fce082"
android:dividerHeight="1px" />
List Item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/backgroud"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/list_image"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentLeft="true"
android:layout_marginRight="8dp"
android:background="#drawable/image_holder"
android:scaleType="centerCrop" >
</ImageView>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/list_image"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/list_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/list_timestamp"
android:ellipsize="end"
android:singleLine="true"
android:text="Harsha Mallikarjun Vantagudi"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold" >
</TextView>
<TextView
android:id="#+id/list_timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="6dp"
android:paddingLeft="30dp"
android:singleLine="true"
android:text="2 hours"
android:textSize="#dimen/text_size_xxsmall" >
</TextView>
</RelativeLayout>
<TextView
android:id="#+id/list_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text="Bangalore, India Bangalore, India Bangalore, India Bangalore, India"
android:textSize="#dimen/text_size_small" >
</TextView>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
On pressing any List Item the color doesnt change.
EDITED
List View
<ListView
android:id="#+id/list_items"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="#fce082"
android:dividerHeight="1px"
android:listSelector="#color/color_dark_orange"
android:smoothScrollbar="true" />

The cache color hint is an RGB color set by default to the window's background
color, that is #191919 in Android's dark theme. since the default cache color hint is #191919, you get a dark background behind each item during a scroll.To fix this issue, all you have to do is either disable the cache color hint optimization, if you use a non-solid color background, or set the hint to the appropriate solid color value. You can do this from code (see setCacheColorHint(int)) or preferably from XML, by using the android:cacheColorHint attribute. To disable the optimization, simply use the transparent color #00000000. :
if you need to change the list item color while pressing any List Item you have to add
android:listSelector="#drawable/listselector"
listselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize="true">
<item android:state_focused="false" android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
<stroke android:width="2dp" android:color="#android:color/transparent" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_focused="true" android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="#color/listitemfocus"/>
<stroke android:width="4dp" android:color="#android:color/transparent" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/listitempress"/>
<stroke android:width="4dp" android:color="#android:color/transparent" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
</selector>

I think you should be using android:listSelector attribute instead of android:cacheColorHint.

For some reason, using a color in your listSelector applies that color to the full list. However, if you create a shape resource with its solid attribute set to your color and use that drawable in the listSelector, it will behave as expected.
Here's my example (which references the colors I was originally trying to use):
red_faint_back.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/red_faint" />
</shape>
black_back.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/black" />
</shape>
and the selector
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:drawable="#drawable/black_back" />
<item android:state_pressed="true"
android:drawable="#drawable/red_faint_back" />
</selector>
Works like a charm!

I set the lisselector in the coustom adapter instead of setting in the xml file , and it work ok.