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
Related
I just want to make a simple image view but when I run that app the unnecessary white background comes. I don't want to need that part. any solution.
and here is my xml file for that image view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:src="#drawable/pot1"/>
</LinearLayout>
In code use -
imgview.setScaleType(ScaleType.FIT_XY);
Or in xml Image view -
android:scaleType="fitXY"
remove the gravity attribute if you want to make it stick to the top of screen or add scaleType attribute fitCenter, cropCenter or fitXY if you want to make it fill the screen.
I have an cup shape image.
i want to change my relative layout exactly same as my imageview,
is it possible in android?
Any help?
Thanks
Change layout like this image
Imageview
Use ImageView in RelativeLayout set imageview to
imageView.bringToFront();
Hope this helps :
<RelativeLayout
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="#id/rel_actionbar"
android:layout_margin="10dp"
android:padding="4dp">
<RelativeLayout
android:id="#+id/rel_screenshot"
android:layout_width="match_parent"
android:layout_height="300dp">
<ImageView
android:id="#+id/img_to_print"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
<ImageView
android:id="#+id/img_tshape"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:scaleType="fitXY"
android:src="#drawable/img_t"
android:visibility="visible" />
</RelativeLayout>
Set imgTShape.bringToFront(); In java file As Milan Suggested and use Transparent image for this.
Use relScreenShot.addView(imgPrint, 0); to add view dynamically inside the layout and set image in imgprint that will remain inside the root layout only.
For what purpose do you want your layout like to be so?
In one word, it's impossible.
Android View must be Rectangle shaped although they can store non-rectangle shape images inside.
In Android UI design using XML, how is it possible to put an ImageButton to align exactly with the background of the activity xml file.
Suppose, I have two images, one acts as the background image for the activity, and the second one acts as the image button source.
This is the background image.
http://i.stack.imgur.com/e1Ow5.png
This is the button image. http://i.stack.imgur.com/m0tUU.png
I will set the first image as background to the activity. My question is how will I properly place and align the second image,that is the button to be exactly inside the "central rectangle" of the background. The "central rectangle" is the place holder, and it can be anywhere in the screen.
Not: I tried using relative layout, but, couldn't really place the button depending on the background.
Edit:-
Actually the rectangle and the rounded-rectangle at the center of the background is just a place-holder. It can be anything, even nothing. Or it can be anywhere. It might not be at the center. Consider the whole image, I need to put the button image where the place-holder is. That is my intention. Say for example , consider a radio application, where there is a turning button acting as volume rocker. Everything else in the image is the background, and the volume rocker might be a different image.
The answer is its impossible the way your are trying to do it.
What you want to do is cut the background up further so the button is centered.
So using your images as an example, here is how the view hierarchy would look
->FrameLayout1
---->Framelayout2
-------->Button
FrameLayout1 would be the background without the inner square
FrameLayout2 would be the inner square
Button would the button asset and placed centered in FrameLayout 2.
There are other techniques on top of this you will need to make it look pixel perfect, like using 9 patch drawables.
Considering you are trying out in landscape mode( your images seems so)
You can try the following code.
bg : your background
img: your center image
<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="#drawable/bg" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/img" />
</RelativeLayout>
<?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:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_bg" />
</RelativeLayout>
drawable/img_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg">
</item>
<item android:drawable="#drawable/fr">
</item>
</layer-list>
or
<?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:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/bg" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/fr" />
</RelativeLayout>
bg.png and fr.png are transparent image with same height and width.
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.
I am having a problem getting the ListView to display properly. It currently looks like this with the following xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/favs_main">
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:textSize="15sp"/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"
android:layout_above="#id/return_button"/>
</RelativeLayout>
If you notice the list is down on the screen. I want it to be just below the favorites text instead of just above the return to home button. The catch however is that I always want the button to show and the list view to just occupy the space between the favorites text and the button. The text is from the background image so I can't just align below that. So even with 100 items I would still like to show the button.
Thanks for the help
If the word "favorites" is part of a background image as suggested in the RelativeLayout's background attribute, then you won't be able to align an element below it without using hacky margins or something to that effect. If you want to align an element below the word, separate that into a different ImageView and set the layout_below of the ListView to the id of that ImageView. To get an element to align properly in between two other elements, use a combination of layout_above and layout_below.
Couldn't you just align the ListView to the Parents' Top and set a margin for the ListView so that it is below the Text of the Background?
Also you could change the background to provide the Text in an ImageView and align the ListView to be below the ImageView.
Instead of trying to make a persistent View always show up under the ListView and align it (which you can do, see other suggestions), you might want to take a look at using a footerView:
http://developer.android.com/intl/de/reference/android/widget/ListView.html#addFooterView
"Add a fixed view to appear at the bottom of the list."
Note that it can be another layout too if you eventually need to do more than just one Button.
this my listview which have multiple entries and textview and button fixed in the botton. i haven't inserted background. try this hope it will help.
http://www.techuv.com/layout-with-butoon-and-textview-fixed-in-bottom/
You could use a simple LinearLayout and use the weight attribute on the ListView :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/favs_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ListView
android:id="#+id/favsListView"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="180dp"/>
<Button
android:text="Return to Home"
android:id="#+id/return_button"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true"
android:textSize="15sp"/>
</LinearLayout>