I have a large png that I would like to use as a background on different layouts, but offset it so that I can have different parts showing (much like you can in CSS), preferable in the xml.
My main layout for the activity contains the following xml:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#layout/bg1">
Layout bg1 consists of the following xml:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/big_image"
android:layout_marginTop="50sp"
android:paddingTop="50sp"
android:gravity="top|left" />
The gravity property works as expected but margins and paddings are ignored, presumably because I'm working on a bitmap object rather than a layout. What I want to do is set these to a minus amount so that only part of the picture is shown. I've tried using a shape but that only wraps the content whereas I need to fill the entire background.
Any suggestions would be gratefully received. Thanks.
I have used an ImageView with a negative top margin value. The ImageView is declared first within the layout so that it is lowest in the stack of controls and will be rendered behind the others.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/bigLogo"
android:src="#drawable/big_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="-100px" />
</RelativeLayout>
You can use an InsetDrawable (it works from XML) to add extra padding to another drawable.
Related
I'm relatively new to android and I want to know how to put a visible divider/borders around images.
You could try to add an android:background attribute to your ImageView with the value of your desired border color. Then add an android:padding attribute to the ImageView with the value of your desired border width. It's not the most elegant solution, but it's understandable and for a new developer will do a fine job. For example:
<ImageView
android:id="#+id/list_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/android_image"
android:background="color/list_item_icon_border_color"
android:padding="1dp"
/>
Maybe the right way for performing this is by using custom XML drawables. You could check in Google for creating borders for ImageView using custom XML drawable. However being a little more complicated way than the upper mentioned method it could be an excellent way to start with XML defined custom drawables. Sooner or later you'll have to understand it, no other way. For circular border check this post - nice and clear explanation with custom XML drawable:
Create circular border around ImageView
In the item's layout you could put a View with heigth of 1dp or width 1dp and fill it with some color. This is a item for a list with a text and a bottom divider.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimary"/>
</FrameLayout>
For a long time I am reading posts from stackoverflow because they are very helpful and google seems to think that also.
Since yesterday I have a problem with a row in a ListView in Android. I want to show an image and the area between the image and the bottom of the element should be filled with a grey color.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/ConversationsBadgeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#c0c0c0"
android:orientation="vertical" >
<QuickContactBadge
android:id="#+id/ConversationsBadge"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
<!--
...
A LinearLayout with TextViews, shouldn't be interesting for this
...
-->
</RelativeLayout>
My Problem ist that the it seems that the inner layout only wraps the content but doesn't fill_parent. When I set for example 100dp it works but that is not what i want.
It would be nice if you could help me with that. I tried much workarround like using LinearLayouts and TextViews but nothing worked.
You can set the background color to the ListView itself, then everything in it will have the background you want.
BTW, I recommend using LinearLayout instead of RelativeLayout in your case.
The layout file should contain exactly one outermost element and it should have both android:layout_width="match_parent" and android:layout_height="match_parent" Your RelativeLayout has android:layout_height="wrap_content"
i think you can use you can take background color in another xml file and put in drawable folder and also using Linear Layout is very useful to your problem
In my Android project, I am not quite sure how to make my background image fill the entirety of the RelativeLayout root element in XML, which is the size of the screen. I want to be sure that this works for all aspect ratios, so the image will clip vertically or horizontally as necessary. Does someone know how to do this easily? I've only seen questions regarding ImageViews and Buttons, but not really generic Views.
My XML file currently:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/enclosing_rl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:fitsSystemWindows="false">
<!-- Other elements -->
</RelativeLayout>
Other than turning your image into a nine patch I don't think this is possible. What you could do instead is-
Add an ImageView as the first view in your RelativeLayout.
Set layout_centerInParent to true.
Have the layout_width and layout_height set to match_parent.
Then set scaleType to centerCrop.
That will make sure the image fills the screen without any distortion, but depending on screen size/orientation either some of the top/bottom or left/right of the image may be cut off.
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/background" />
Any other views in the RelativeLayout will appear on top of the ImageView, as long as it is the first view in the RelativeLayout (when you are in the xml).
Create a bitmap drawable XML resource in your res/drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
Use that drawable as background instead of #drawable/background
according to this answer If you want your ImageView fill your RelativeLayout,use align parameters for ImageView.
you can put all of your views to a LinearLayout and set align parameter to your background ImageView:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/my_background"
android:scaleType="centerCrop"
android:layout_alignTop="#+id/my_views"
android:layout_alignBottom="#+id/my_views"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/my_views"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
</RelativeLayout>
Its smart and 100% working answer is to set the property scaleType of image view !
android:scaleType="fitCenter"
This is my Android list_item layout XML:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:paddingRight="?android:attr/scrollbarSize"
android:background="#drawable/list_bg">
<TextView
android:id="#+id/tv_displayname"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ellipsize="end"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
This is the list_bg image:
and yet here is what it looks like when shown in Android emulator:
I can see that the background is being applied because there is a slight gradient effect to it, but I have no idea where this black overlay is coming from!
have you tried a different image to see if that one does the same thing? to me it looks like it is creating the image behind the list in your RelativeLayout and your textview background is on top. since you are setting it to fill the width of the row, i bet if you just set to wrap_content you would see it behind there
try putting the image as your TextView background instead
I would like to place an image into the background of my activities. This image is effectively a circle shaped logo which will be semi-transparent, and should sit behind any other content on the UI. I will also offset it into the bottom corner.
What is the best way I can place this image without it become "squashed" (egg shaped) under varying screen dimensions? My app will operate in portrait mode only.
This is what I'm trying to achieve:
So far, I've placed my circle image onto 3 white rectangle canvases for the popular sized screens 480x854, 320x480 and 240x320 which seems to work, but I don't think its very solid.
Any tips?
This probably is not the perfect solution, and will require a bit of maintenance on the UI, but here's my thought:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="-15dp"
android:layout_marginBottom="-15dp"
android:src="#drawable/circle"
/>
<!--Rest of Layout goes here-->
</FrameLayout>
Just wrap this around your current layout, and adjust the right and bottom margins to whatever negative margins you wish for the offsetting. This should work for any screen size, assuming you have drawables for each density.
EDIT: Yeah, you also shouldn't have to worry about a white rectangle this way, either. Just add the android:background tag to the FrameLayout with whatever color you want for the background, and save the logo as a transparent PNG.
I would do it like this, use a relative layout to have an ImageView in the background with on top of that a relative layout containing the rest of your layout
This way the image is as big as it can be keeping the correct dimensions
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:scaleType="centerInside"
android:src="#drawable/splash_picture"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<!-- rest of your layout -->
</LinearLayout>
</RelativeLayout>