Develop Reference

How to set a drawable shape in android:progressDrawable in seekbar (shape size deceresed in <21 api and incresed in >=21 api)

I have a view (Seekbar) in which i am setting a drawable shape named seek_bar.xml in progressDrawable, but i am getting different result when i run the layout in different level api. Means when i run the layout in <21 the shape size seems too small but when i run the layout >=21 shape size seems perfect, please help me how to fix this api level issue for this layout. See the images.
and my appcompct version is.
compile 'com.android.support:appcompat-v7:23.1.1'
I have a view named confirm.xml code looks like
<LinearLayout
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_background"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/txt_dia"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="40dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="#string/dialog_title_logout"
android:textColor="#color/gray_dark"
android:textSize="#dimen/dialog_text_title"
android:textStyle="bold"
>
</TextView>
<RelativeLayout
android:id="#+id/yes_no_back_strip"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/swipe_btn"
android:layout_marginBottom="15dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
>
<SeekBar
android:id="#+id/unlockButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false"
android:max="100"
android:progress="50"
android:thumb="#drawable/slide_thumb"
android:splitTrack="false"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:thumbOffset="1dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:progressDrawable="#drawable/seek_bar"
/>
<LinearLayout
android:id="#+id/yes_no_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:visibility="visible"
>
<TextView
android:id="#+id/confirm_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:paddingLeft="15dp"
android:text="#string/btn_txt_yes"
android:textColor="#color/gray_light_high"
android:textSize="#dimen/common_text_size"
android:textStyle="bold"
/>
<TextView
android:id="#+id/cancel_btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="right|center_vertical"
android:paddingRight="15dp"
android:text="#string/btn_txt_no"
android:textColor="#color/gray_light_high"
android:textSize="#dimen/common_text_size"
android:textStyle="bold"
/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
and my seek_bar.xml is ....
<?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>
<gradient
android:angle="0"
android:startColor="#ffe0db"
android:centerColor="#aeff6960"
android:endColor="#ff0002"
/>
<corners android:radius="35dip" />
<size android:height="49dp"
android:width="190dp"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip >
<shape>
<gradient
android:angle="0"
android:startColor="#0b6e07"
android:centerColor="#75ba70"
android:endColor="#97ba93"
/>
<corners android:radius="35dp"
/>
<size android:height="49dp"
android:width="190dp"/>
</shape>
</clip>
</item>
</layer-list>

In api level >20 android:width and android:height not works with shape, i mean it well automatically detect the correct height and width accordingly to the view but it is not the case when you are using the api level <20. So when you fix the min width and height it will remains fixed through out all the api levels.
Otherwise you can specify different -2 layout size.
Just add minHight and maxHight in your seekbar layout
<Seekbar
.....
android:minHeight="50dp"
android:maxHeight="50dp"
....
/>

textview position by background imageview

I have background imageview (green with 3 red circle) and 3 textview (A,B,C).
how can I put textviews exactly on center of red circles that support multi screen devices , portrait/landscape?
Edited:
maybe I asked wrong question.
my main question is:
1- I've an image in my layout for example like this:
2- I want put textview on image in exact positions
when I test on different screen size , position of textviews changed.

Try this
activity_main.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:background="#00FF00"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:id="#+id/num_txt"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="A"
android:textColor="#000000"
android:textSize="20dp" />
<TextView
android:id="#+id/num_txt2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="30dp"
android:layout_marginLeft="100dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="B"
android:textColor="#000000"
android:textSize="20dp" />
<TextView
android:id="#+id/num_txt3"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="100dp"
android:layout_marginLeft="50dp"
android:background="#drawable/bg_red"
android:gravity="center"
android:text="C"
android:textColor="#000000"
android:textSize="20dp" />
Save in drawable bg_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="#FF0000" android:width="5dip"/>
<solid android:color="#FF0000"/>
</shape>
The Output is :

In the text view xml attribute
android:gravity="center"
and make the circle xml file width as warp content
width = "wrap_content"

How to use common background for multiple items?

If I want to get a look as below, what do I do? More specifically, how do I set the white background around multiple items?
EDIT:
The grey is the background for the whole screen, and the white is like a "box" placed on the grey background, together with the buttons, divider and textview.
I'm thinking like this:
<TableLayout
android:background="#eae8e8>
...
<WhiteBox
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_margin="16dp"
android:background="#FFFFFF/>
<TextView>
...
<Divider>
...
<Button>
...
<Button>
...
</WhiteBox>
</TableLayout>
Where "WhiteBox" of course is something else, but would it be possible to do something like this?

I would recommend leaving as many of the elements as possible transparent to prevent overdraw issues but it depends on your overall needs. By using #null backgrounds you can change the base background element and everything drawn over it would change accordingly (true transparent).
Layout
<?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:background="#color/white"
android:padding="10dp">
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:ems="10"
android:gravity="center"
android:inputType="text"
android:text="Test"
android:textColor="#CCC" >
<requestFocus />
</EditText>
<View
android:id="#+id/divider"
android:layout_below="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#CCC" />
<LinearLayout
android:id="#+id/buttons"
android:layout_marginTop="10dp"
android:layout_below="#+id/divider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#drawable/testbutton"
android:text="BUTTON 1"
android:textColor="#CCC" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#drawable/testbutton"
android:text="BUTTON 2"
android:textColor="#CCC" />
</LinearLayout>
</RelativeLayout>
Button style
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#null" />
<stroke android:width="1dp" android:color="#CCC" />
</shape>
</item>
<item>
<shape>
<solid android:color="#null" />
<stroke android:width="1dp" android:color="#CCC" />
</shape>
</item>
</selector>

Yes you can go ahead with your approach.just give margin to your inner layout to which your background is set to white.and you can also set the background to white for the text views and buttons you are using inside your inner layout.Set the text color as gray for text view and button.eg:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eae8e8">
<RelativeLayout
android:layout_width="200dp"
android:layout_margin="30dp"
android:layout_height="200dp"
android:background="#FFFFFF"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text"
android:layout_margin="50dp"
android:text="TextView"
android:textColor="#android:color/darker_gray"
android:background="#FFFFFF"
/>
<Button
android:layout_marginTop="20dip"
android:text="Button"
android:textColor="#android:color/darker_gray"
android:layout_below="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button1"
android:background="#FFFFFF"
/>
</RelativeLayout>
</LinearLayout>

By default when you create an xml with no backgrounds applied to your parent layout and if the widgets inside also does not have any background image/color set.it renders white on the screen.Just don't add any image/color as background.You can also set the background as white.
android:background="#FFFFFF" set this to your widgets in xml. like button or text view etc to have it appear white.

android set divider padding for preference screen

I have PreferenceScreen contain many CheckBox , i customize it by refer it to custom layout as bellow :
<?xml version="1.0" encoding="utf-8" ?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
<CheckBoxPreference
android:summary="checkbox one"
android:key="key_one"
android:layout="#layout/mylayout"
/>
<CheckBoxPreference
android:summary="checkbox two"
android:key="key_two"
android:layout="#layout/mylayout"
/>
</PreferenceScreen>
mylayout.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:minWidth="#dimen/preference_icon_minWidth"
android:orientation="horizontal">
<ImageView
android:id="#+android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:layout_marginRight="8dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
android:layout_weight="1">
<TextView
android:id="#+android:id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:fadingEdge="horizontal" />
<TextView
android:id="#+android:id/summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/title"
android:layout_alignLeft="#android:id/title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"
android:maxLines="4" />
</RelativeLayout>
<LinearLayout
android:id="#+android:id/widget_frame"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="#dimen/preference_widget_width"
android:gravity="center"
android:orientation="vertical" />
</LinearLayout>
Every thing run fine also i customize divider between checkbox in prefs activity as :
ListView list = (ListView) findViewById(android.R.id.list);
list.setDivider(new ColorDrawable(Color.RED)); // or some other color int
list.setDividerHeight((5));
list.setVerticalScrollBarEnabled(false);
when i want to set padding to divider only as :
list.setPadding(0, 0, 0, 0);
it set padding to all view ,
HOW can i set padding to divider only without affect padding of all view .
any help will be appreciated, thanks

To allow preference divider padding
first : add this line to your preference activity which lead to transparency of android default divider
list.setDivider(new ColorDrawable(0x00000000));
second : create folder named drawable in res , then create on it divider.xml which will be as below :
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#B22222" />
</shape>
third :
add View to your mylayout.xml so it will be as below :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:minWidth="#dimen/preference_icon_minWidth"
android:orientation="horizontal">
<ImageView
android:id="#+android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dip"
android:layout_marginRight="8dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
android:layout_weight="1">
<TextView android:id="#+android:id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:fadingEdge="horizontal" />
<TextView android:id="#+android:id/summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/title"
android:layout_alignLeft="#android:id/title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"
android:maxLines="4" />
<View
android:id="#+id/divider"
android:background="#drawable/divider"
android:layout_width="match_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_height="5dp"
android:layout_below="#+android:id/summary"/>
</RelativeLayout>
<!-- Preference should place its actual preference widget here. -->
<LinearLayout android:id="#+android:id/widget_frame"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:minWidth="#dimen/preference_widget_width"
android:gravity="center"
android:orientation="vertical" />
the point here you add View bellow your texts and refer that view to divider shape in drawable res so finally you will get an custom divider which it can be customized as you need.
hope that help you .
the output will be as below:

You have to create your custom drawable-shape
custom_divider.xml
<shape android:shape="rectangle">
<solid android:color="#color/grey" />
<corners android:radius="2dp" />
</shape>
set this as divider for your ListView in xml
activity_list.xml
<ListView
android:dividerHeight="2dp"
android:divider="#drawable/custom_divider"
...
/>

You must create your own drawable resource for divider:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetTop="5dp">
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
<size android:height="4dp" />
</shape>
</inset>
In this case divider shape height is 4dp and top padding is 5dp, when you set divider height you must sum shape height + inset's.
ListView list = (ListView) findViewById(android.R.id.list);
list.setDivider(new ColorDrawable(Color.RED)); // or some other color int
list.setDividerHeight((5)); //wrorng code
list.setVerticalScrollBarEnabled(false);
To set divider height correctly for all dencity screens you must set it in dp's but for default number "5" interpreted in pixels(px).
final float scale = getContext().getResources().getDisplayMetrics().density;
int pixels = (int) (dps * scale + 0.5f);
For more information about shape and inset drawable resource use Android Documentation Drawable resources

You should try deriving a theme from android's default one, assigning it to your preference screen (although they say there's a bug on 2.x versions that prevents you from doing that unless you workaround as described here), and overriding the android:dividerPadding property of one of the styles.
I can't really tell you for sure which style that would be, you'll have to dig into it, here's android's styles.xml for reference and here's an example how to override ListView appearance in a theme

Card Interface: Can't fit contents and text is clipped

I'm making an app with it's contents inside card-like views but I am having a couple of problems:
I can't get the label line (the blue line) to move away from the card text. I've tried both padding and margin (on both line imageview and textview from text) and nothing seems to work here.
The bottom part of the card title is getting cropped because of the line spacing. How can I fix this and keep the line spacing?
Check this screenshot for better understanding: http://imgur.com/qsoCFrB
Here's the code to the card background and the interface itself:
card_bg:
<?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="1dp"/>
<solid android:color="#bdbdbd" />
</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="6dp"
android:left="6dp"
android:right="6dp"
android:top="4dp" />
</shape>
</item>
</layer-list>
main acitivity:
<?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="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg" >
<ImageView
android:id="#+id/iconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:src="#drawable/icon_example" />
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cardText0001"
android:layout_marginTop="4dp"
android:background="#drawable/card_label" />
<TextView
android:id="#+id/cardTitle0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/cardText0001"
android:layout_toRightOf="#+id/iconView0001"
android:fontFamily="sans-serif-condensed"
android:maxLines="2"
android:paddingLeft="4dp"
android:lineSpacingExtra="-6dp"
android:text="#string/card_title_002"
android:textColor="#717171"
android:textSize="16sp" />
<TextView
android:id="#+id/cardText0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/iconView0001"
android:fontFamily="sans-serif"
android:layout_marginTop="4dp"
android:maxLines="1"
android:text="#string/card_desc_002"
android:textColor="#acacac"
android:textSize="12sp" />
</RelativeLayout>
</FrameLayout>
Thanks in advance.

this is the creator of the Gist on GitHub!
Have you tried increasing padding on the RelativeLayout, perhaps that could fix the problem? Or even on the TextView element?
Try doing that and see what the results are.
EDIT: Also, why is there negative line spacing within the Text View?
DOUBLE EDIT: So what was happening is that your layout_alignBottom in the linkTitle TextView was shorter than the height of two lines of text, therefore it was cropping the title to limit the height of the TextView to that of the FavIcon ImageView. Removing this property fixes the issue.
Similar issue goes for the label shape, that alignBottom is what's messing it up.
Change layout_alignBottom to layout_below and then padding/margin should affect the position as you please.
Here is the updated version of your code that should remedy your issues:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linkCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ccc" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_marginTop="4dp"
android:background="#drawable/card_bg">
<TextView
android:id="#+id/linkTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/faviconView0001"
android:padding="4dp"
android:maxLines="2"
android:text="#string/link_title_001"
android:textColor="#717171"
android:textSize="17sp" />
<TextView
android:id="#+id/linkDesc0001"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linkTitle"
android:paddingTop="6dp"
android:paddingBottom="9dp"
android:fontFamily="sans-serif"
android:maxLines="1"
android:text="#string/link_desc_001"
android:textColor="#acacac"
android:textSize="13sp" />
<ImageView
android:id="#+id/faviconView0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="6dp"
android:layout_alignParentLeft="true"
android:src="#drawable/favicon_example" />
<View
android:layout_height="0dp"
android:layout_width="fill_parent"
/>
<ImageView
android:id="#+id/labelSource0001"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linkDesc0001"
android:background="#drawable/card_label" />
</RelativeLayout>
</FrameLayout>
I hope that all of this helps!