android set divider padding for preference screen - android

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

Related

Kotlin wrap content issues while passing the value

I created a badge as a textview and i'm passing my count to it. The issue that i've faced is the width - if i pass "512", visible will be only "51". I've tried changing it to "match-content" but it doesn't help.
activity.xml:
<LinearLayout
android:id="#+id/ll_tasks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone">
<TextView
android:id="#+id/tasks_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="#dimen/badge_top"
android:layout_marginEnd="5dp"
android:background="#drawable/badge_circle"
android:gravity="center"
android:textColor="#color/white"
android:textSize="11sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/iv_tasks"
android:layout_width="match_parent"
android:layout_height="#dimen/icon_height"
android:src="#drawable/ic_task_inactive" />
<TextView
android:id="#+id/tv_tasks"
style="#style/unselected_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_title_top"
android:gravity="center"
android:text="#string/tasks" />
</LinearLayout>
badge-circle.xml <- for badge background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="#F45725" />
<size android:width="12dp" android:height="12dp" />
</shape>
activity.kt
fun countTasks(tasks: String) {
tasks_counter.text = tasks
}
Looks like that:
How can I make it auto resizable? Thanks in advance
Set ll_tasks linear layout width to wrap_content and TextView width to wrap_content.
You are restricting your textview size to 16dp, where it's getting cut off.

Parent Relative Layout Foreground Color affecting Textview Color

I need relative layout background with some transparent for that i used gradient option, But it is affecting text view color also , I gave color of text view is white color but it looks like gray color. Please help me to get out of this issue.
<RelativeLayout
android:id="#+id/topLayout1"
android:layout_width="match_parent"
android:layout_height="210dp"
android:layout_alignParentTop="true"
android:foreground="#drawable/image_overlay"
>
<RelativeLayout
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/preloader_image"
>
<TextView
android:id="#+id/resName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="Green Way"
android:textColor="#color/White"
android:textSize="25sp"
android:backgroundTint="#color/White"
/>
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/resName"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="#string/items"
android:textColor="#color/White"
android:textSize="16sp"
/>
</RelativeLayout>
</RelativeLayout>
and image overlay code,
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#B0000000"
android:centerColor="#A0000000"
android:endColor="#00FFFFFF"
android:angle="270"
/>
</shape>
<color name="White">#FFFFFF</color>
You can use #83000000 color code for setting transparency and that too in android:background instead of android:background property. Alternatively, you can also use "android:aplha="0.x" where 1 < x < 9, for transparency. Your final code will look like this.
<RelativeLayout android:id="#+id/topLayout1"
android:layout_width="match_parent"
android:layout_height="210dp"
android:layout_alignParentTop="true"
android:background="#83000000"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/resName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:text="Green Way"
android:textColor="#FFFFFF"
android:textSize="25sp"
android:backgroundTint="#FFFFFF" />
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/resName"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:text="Items"
android:textColor="#FFFFFF"
android:textSize="16sp" />
</RelativeLayout>
You should see this ANSWER to know more about transparency. You can use various hex codes to achieve different level of transparency. Like for 50% transparency 80 code is used and color code would be like #80000000. Similary, you can use various codes in the scheme #xx000000.

Rounded button on the ListView

I've got layout like this
<ListView>
andorid:layout_width="math_parent"
android:layout_height="math_parent"
android:orientation="vertical" >
<ListView>
andorid:layout_width="math_parent"
android:layout_height="wrap_content"
android:orientation="horisontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:textColor="#android:color/black"
android:layout_gravity="center_vertical"
android:text="bla bla"
android:textSize="13sp" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:background="#drawable/round_button"
android:layout_weight="1" />
</ListView>
.........
</ListView>
So my round button is not rounded cause the number of pixels in child layout on height less than in parent main layout. How could i get the round button?
Thanks
If you want the round button then create an XML file named round.xml inside drawable folder.
Then add the following to xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#e5e4e2" />
<corners android:radius="3dp" />
</shape>
Then make this as background of Button
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/myButton"
android:background="#drawable/round" />

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.

Trying to space items in a ListView while using adapter and drawable. Margin is not working

I am trying to have a listview where items have rounded corners and the items are spaced out from each other. This is done using a custom ArrayAdapter.
MyCustomAdapter arrAdapter = new MyCustomAdapter();
setListAdapter(arrAdapter);
I am using a drawable image to round the corners
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="10dp" />
<gradient
android:angle="90"
android:endColor="#993333"
android:startColor="#ffffff"
android:type="sweep" />
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
and setting it in the layout as background to the top most container - the LinearLayout
<?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="wrap_content"
android:layout_margin="4dp"
android:background="#drawable/square"
android:orientation="horizontal" >
<TextView
android:id="#+id/routeTag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/circle"
android:padding="10dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="some text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/stopD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:padding="5dp"
android:text="(text)"
android:textColor="#777777"
android:textSize="10sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/nextTT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="9dp"
android:paddingTop="5dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="14sp" />
<TextView
android:id="#+id/moreTT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/nextTrainTime"
android:paddingBottom="5dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
For some reason in the graphical display I am able to see that single element exactly as I want it - with margins all around (I also want it to move away from the edges of the screen left and right).
But when I run this and let the adapter do its job I am getting a list of items, touching the sides of the screen and no space between them apart forma single line which is used to separate the items on a normal list.
Anyone have a clue how to make it behave?! I have search far and wide.
Thanks for your help
The space between your item and widescreen can be done with:
<?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"
android:top="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">...</shape>
</item>
In my case I used android:divider and android:dividerHeight on a ListView block to seperate each element of a ListView, and the left-right space with the android:left android:right properties.
The post where I got the info was this

Categories

Resources