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.
Related
I'm trying to add an icon at the end of my SearchView like this
Here's my actual code:
<RelativeLayout
android:id="#+id/home_relativelayout_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary">
<android.support.v7.widget.SearchView
android:id="#+id/search_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColorHint="#color/grey_medium"
android:layout_margin="#dimen/mpoint_divider_padding"
android:gravity="center"
android:layout_centerVertical="true"
android:inputType="textNoSuggestions"
android:background="#drawable/wo_search_background" />
</RelativeLayout>
Seems there are no property such as android:drawableRight, I even tried to add a child like an ImageView but nothing appears on screen
Is it possible to achieve what I want with a SearchView or should I switch to an EditText+ImageView ?
Thanks for your help
You can do it something like this:
Add the ShapeDrawable something like this to your drawable folder:
Border.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#android:color/white" /> //Background color here
<stroke android:width="3dip" android:color="*Border color*"/>
</shape>
Then Add the SearchView as follows:
<LinearLayout
android:layout_width="match_parent"
android:background="#drawable/Border"
android:layout_height="wrap_content"
android:Orientation="horizontal">
<android.support.v7.widget.SearchView
android:id="#+id/search_view"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="wrap_content"
android:textColorHint="#color/grey_medium"
android:layout_margin="#dimen/mpoint_divider_padding"
android:gravity="center"
android:layout_centerVertical="true"
android:inputType="textNoSuggestions"
android:background="#drawable/wo_search_background" />
<ImageView android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
.../>
</LinearLayout>
Using this you can handle the click event by adding it to the image.
Revert in case of queries and if it doesn't work.
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" />
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
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!
I am trying to apply a simple gradient background to my main LinearLayout. My problem is that the background refuses to stay in the background and instead decides to also cover my views (TextViews and Buttons, in this case). What am I doing wrong/am I missing? Thanks for your help!
main layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_gradient"
android:orientation="vertical"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select the PC to communicate with..." />
<TextView
android:id="#+id/textViewStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Status" />
<RadioGroup
android:id="#+id/radioGroupDevices"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
<Button
android:id="#+id/btnVolDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-" />
<Button
android:id="#+id/btnPlayPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="|>" />
<Button
android:id="#+id/btnVolUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />
<Button
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>" />
</LinearLayout>
</LinearLayout>
drawable/bg_gradient.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="270" android:endColor="#181818" android:startColor="#616161"/>
<stroke android:width="1dp" android:color="#343434" />
</shape>
Result (Screenshot from Eclipse xml editor, but looks the same on the actual phone)
http://s14.directupload.net/images/130415/q8q6hcmn.png
As you can see, the text lines and the buttons appear to be at least partially covered by the background. I also tried to use a normal black background, but with the same result. All views appear "foggy" behind a black haze.
It seems you are developing for the android version 3 or higher...so in this versions and the versions above the theme is set such as the controls seems to be having transparent background...
try changing the controls(buttons,textviews) background to some hash color values
eg:-android:background="#ffaaff"
now you need not to change your code...give it a try as it is...
for your buttons put this in your code to make them transparent...
v.setBackgroundColor(0x0000FF00 );
hope this works for you
I do not see your buttons to be polluted by your gradient. As for the top most text - it's normal as by default TextView background is transparent, so container's bg will be seen thru it.