I have the following template
<?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:orientation="vertical"
android:background="#drawable/borders" >
<RelativeLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/category_starred_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rating_not_important"
android:contentDescription="#string/app_name" />
<TextView
android:id="#+id/category_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/category_starred_icon"
android:textIsSelectable="false"
android:textSize="18sp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:textColor="#android:color/white"
android:hint="#string/category" />
</RelativeLayout>
</LinearLayout>
i get a warning This RelativeLayout layout or its LinearLayout parent is possibly useless; transfer the background
attribute to the other view, i want solve it, but i have the follow problem i have a border in the LinearLayout is like a drop shadow but when i change the background color in my code
mLayout.setBackgroundColor(Color.paseColor(mColorString));
i lost the border, how i can solve the warning witout lose the border, the main problem is the background colors are dynamically
Have a look at this: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
This is an drawable that organizes other drawables in a layer list (one on top of the other). With it, you can use other drawables, like shape, to define the borders and the background the way you want.
I can't make a complete answer now, but if you search for this, I'm sure you can do it. When I have more time, I may come back to help you, if you haven't found out how to solve this yet.
Related
I am trying to get some text vertically aligned within a TextView, but for some reason it just sticks to the top edge of such TextView.
Trust me, I've read several questions here on Stack Overflow regarding the same, or similar, questions and tried applying the provided solutions, but nothing seems to make a change.
For instance, what I thought would solve the issue right away was to add the attribute android:gravity="center_vertical|left", but that didn't help either.
This user's question describes almost exactly my issue, except that his TextView is inside a RelativeLayout which in turn is inside a ScrollView, which I don't (and don't need or want to) use. And the images he provided are also perfectly applicable to what I'm trying to describe and achieve.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical" />
</LinearLayout>
The problem is that your TextView's height is set to wrap_content. This means that the size of the text's container will be the same as the height of the text, thus there really is nowhere within the view to center the content (it is effectively already centered vertically).
If the LinearLayout that you posted only contains the ImageView and the TextView, then you can simple change the height to match_parent and it should work fine.
If the LinearLayout contains other Views, you might want to consider using a RelativeLayout and setting the TextView to align with both the top and bottom of the image.
as your achievement suggest, you only need to change your gravity to layout_gravity
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2" >
<ImageView
android:id="#+id/account_server_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/account_server_icon"
android:paddingLeft="16dp"
android:gravity="left" />
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:layout_gravity="left|center_vertical" />
</LinearLayout>
You need to set gravity then you set text alignment to gravity
<TextView
android:orientation="vertical"
android:id="#+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:gravity="left|center_vertical"
android:textAlignment="gravity"
/>
The following XML results in the below image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/convoLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/right_bubble">
<TextView
android:id="#+id/convoBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" // cause
android:padding="5dp"
android:text="test test test test"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
Is anyone aware of how to get it to look like this:
Note: I need the RelativeLayout as this is a dumbed down version of my XML :).
EDIT:
Let me also clarify. Without android:layout_alignParentRight="true" in the TextView, the layout looks like the image below (there is white padding on the right)
In essence, I need that padding on the left.
EDIT2:
To further clarify, #drawable/right_bubble is a 9-patch image that is meant to stretch to house the inner views dynamically and the RelativeLayout is to have 3 TextViews inside of it, in which the 9-patch image should encapsulate all 3.
EDIT3:
This is what I want the end result to look like
you are setting the background to relative layout... so, whole layout will have same background no matter what views it holds. Try setting "android:background="#drawable/right_bubble" to TextView instead.
EDIT (by OP after getting answer from comments):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/convoLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" // added
android:background="#drawable/right_bubble" >
<TextView
android:id="#+id/convoBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content" // removed layout_alignParentRight
android:padding="5dp"
android:text="test test test test"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
J.Ajendra's answer got me most of the way there. His answer (that I edited in after understanding his comments) worked, but only if the RelativeLayout's container honors android:layout_gravity. (for example, if we were to Activity#setContentView(R.layout.convo_item)).
In my case, convo_item.xml was to be inflated into a ListView which overrides this behavior for RelativeLayouts (I'm not sure why, but it does) resulting in the chat bubble always being on the left. To solve this, I simply wrapped the RelativeLayout in a LinearLayout that took the parents entire width (android:layout_width="match_parent") and set the gravity of it's content to "right" (android:gravity="right"). The result, it works for all cases including ListViews and Activity#setContentView(...).
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/convoOuterLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<RelativeLayout
android:id="#+id/convoLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/right_bubble" >
<TextView
android:id="#+id/convoBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="test test test test"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</LinearLayout>
So I have a list of images that come from the web, I don't know which color are they and I want to place a text over the ImageView.
My idea is to place the ImageView, an image overlay with transparency gradient over that ImageView and the text above it. I want to mimic this behaviour:
Is there anyway to do this via XML?
When you write the XML for your list items which get inflated in the getView(...) of whatever ListAdapter you've written you can surely do this.
Something like this for the list item:
<?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">
<ImageView
android:layout_width="320dp"
android:layout_height="240dp"
android:background="#ACACAC"/>
<RelativeLayout
android:layout_width="320dp"
android:layout_height="240dp"
android:background="#drawable/gradient">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Here is your text"
android:textColor="#000000"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</RelativeLayout>
Then you create that drawable/gradient. For that you can recycle the answer from here.
Thanks to adityajones I managed to get there :)
So although this is my right answer, I'll mark his as the correct one!
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/image" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="200dp"
android:background="#drawable/gradient_image" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_margin="6dp"
android:layout_marginBottom="18dp"
android:shadowColor="#000"
android:shadowRadius="7.0"
android:text="This is some random text"
android:textColor="#color/white"
android:textSize="22sp" />
</RelativeLayout>
I'd use a FrameLayout or RelativeLayout. The first View you add to either should be the background ImageView, then obviously you'll need some TextViews and Other ImageViews [or Buttons, or ImageButtons, etc]
Seems like a reasonable layout: a background image, and then one additional view in each corner.
For the gradient, you'll probably want a separate Layout/View at the bottom with a gradient drawable as the background, although I can imagine you might be able to get away with setting the background of one of your TextViews as the gradient.
You do not have to use a gradient drawable file or set it in your xml..
you can do this pragmatically using GradientDrawable Class as explained in this related Question (Create a radial gradient programmatically) then set it as a background for a layout that covers your ImageView, this gives you ability to use different colors and orientations
I made a compound control, but when i add this new component into a XML layer with other standard components(e.g. TextView), when this layer is inflated, the compound control has a big margin added in the bottom separating this from the others components. I tried adding Layer_bottomMargin = 0dp without success, the only way to resolve this, is adding layer_height a fixed value (i.e. 15dp) instead "wrap_content", but this solution is not fine for me, due i want remove dinamically some component from my compound control.
The code of my compound control:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|top"
android:clickable="false"
android:background="#CCCCCC"
android:layout_marginTop="#dimen/fieldset_margin"
>
<TextView
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/title_default"
android:textSize="14sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/fieldset_lines_shadow"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/fieldset_lines_light"
/>
</LinearLayout>
And the code of my layer including this compound control:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#C8D5F6FF"
android:gravity="top"
android:layout_margin="8dp"
>
<com.apps.example.Header
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/fieldset_text_secondary"
android:text="nananananan"
android:textSize="10sp"
android:layout_marginLeft="#dimen/fieldset_margin"
/>
</LinearLayout>
Sorry but this is my first post and i can't upload images.
Thanks in advance.
I resolved partially by overwriting the onMeasure method in my compound control class. I did not this before because in the official documentation:
http://developer.android.com/guide/topics/ui/custom-components.html
says that is not necessary overwrite this method when is creating a compound control.
Anyway, this is partial solution due when an individual control of the compound is programmatically turned invisible (GONE) occurs the same issue mentioned in the original post but with smaller margin space.
I will continue trying to resolve this, but for now, this is my solution.
Thanks!
I would like to design a frame using 4 ImageView for each of the top, bottom, left and right side of that frame, as shown in the following example:
Seems simple, but I am really having a hard time doing it. I tried using a FrameLayout along with layout_alignParentLeft|Right|Top|Bottomlike the following:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/camera_masque"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
>
<ImageView
android:id="#+id/camera_top_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_top_masque_photo"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/camera_left_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_left_masque_photo"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/camera_right_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_right_masque_photo"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/camera_bottom_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_bottom_masque_photo"
android:layout_alignParentBottom="true"
/>
</FrameLayout>
It works well for the top and left sides, but not for the others (like it places the right and bottom sides on the top side...).
I also tried using a RelativeLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/camera_masque"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
>
<ImageView
android:id="#+id/camera_top_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_top_masque_photo"
android:layout_alignParentTop="true"
/>
<ImageView
android:id="#+id/camera_left_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="-2dp"
android:src="#drawable/ic_left_masque_photo"
android:layout_below="#id/camera_top_masque"
/>
<ImageView
android:id="#+id/camera_right_masque"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_right_masque_photo"
android:layout_marginRight="-2dp"
android:layout_below="#id/camera_top_masque"
android:layout_alignParentRight="true"
/>
<ImageView
android:id="#+id/camera_bottom_masque"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_bottom_masque_photo"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
But same thing, does not work as expected.
Any idea what is wrong with my layouts? How could I accomplish this?
Note: Images sizes are: 640*114px (top, bottom) and 34*572 (left, right).
Thanks!
I usually use linearlayout for things like this and control the fill using layout_weight parameters. You will probably find a lot of similar questions here.
Simply create a vertical linear layout and in the middle section create a horizontal linear layout.
This is made a lot simpler if you use the WYSIWYG layout designer in Eclipse ADT ... .see tools.android.com for details
There are a lot of tutorials available for Android layouts which are a more useful resource as Stack Overflow tends to deal with the programming issues rather than layouts.
I will answer my own question in order to highlight the mistakes I have made. Turns out, I was almost there, I only had to add an alignParentTop at both the right and left ImageViews and an alignParentLeftat the bottom ImageView.
I don't understand the logic behind this, though! (if someone could explain...)
If the frame are built by the same images. You can try a 9-patch drawable or a shape with borders and transparent center.