I need some help with an Android Layout.
What I want to achive is a Layout where the views around the grey view are growing with the screensize and the view in the middle is always centered.
If the screen would be so small that in touches the grey views left and right should have the width of 0...
I have made an Imageviewer the grey area is the image and the outer areas all have a black background. the image should match the screen if the screen is small. but if it grows the image shall not scale, but the areas around it should grow...i hope you understand what i mean.
Maybe a vertical linear layout with a horizontal layout in it?
thank you!
Try this:
Use RelativeLayout
Use fixed size say 400dp x 400dp for the middle (grey) square
Use android:layout_centerInParent="true" for the grey square
Position top to be above and alignParentTop=true,
bottom to be below and alilgnParentBottom = true
left: toTheLeft of center and below top, above bottom
right: toTheRight of center, below top, above bottom
Here we go:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/center"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#343434" />
<LinearLayout
android:id="#+id/top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/center"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#ababab" />
<LinearLayout
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/center"
android:layout_toLeftOf="#+id/center"
android:background="#cfcfcf" />
<LinearLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/left"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/left"
android:layout_toRightOf="#+id/center"
android:background="#cfcfcf" />
<LinearLayout
android:id="#+id/bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/center"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#ababab" />
</RelativeLayout>
If all that outside space is just going to be a black background like you said, then why not just have one RelativeLayout with an ImageView centered inside it with a fixed layout_width and layout_height that will stay the same on all devices. Set the RelativeLayout with a black background. This way would perform better, and really, if all you want is a black border around the image, you don't need to worry about having actual layouts everywhere else. As long as you set a fixed width and height and center it, it should perform just as you want.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:src="#drawable/apache" />
</RelativeLayout>
Like that. Or use "100px" if you want to be really specific I suppose.. though that's not recommended.
You can handle big and small screens by setting up dimensions for various screen dimensions, so for example:
values/dimens.xml:
<resources>
<dimen name="margin"0dp</dimen>
</resources>
values-w480dp/dimens.xml:
<resources>
<dimen name="margin"3dp</dimen>
</resources>
values-w600dp/dimens.xml:
<resources>
<dimen name="margin"6dp</dimen>
</resources>
etc.
Now you can set your margin in your ImageView like this:
android:layout_marginRight/Left="#dimen/margin"
Don't forget to set your ImageView to
android:gravity="center"
If your layout just consists of only this ImageView then you can leave out the margin and just set the gravity to center.
Related
Image of what I want to do
I want to align the center of the smaller red box to the left-edge of the black box. The red box has it's width and height set to wrap_content and there is a text-view inside. The black box takes up half the screen width. It's in a linear-layout with a spacer on the left and right, the spacers have .25 weight while the black-box has .5 weight.
I'd prefer to do this in XML without the use of margins. The red-box may contain 2 characters or 20, the contents come from the server.
There's only "toLeftOf" and "alignLeft". What I want to do is essentially "align center of box to left edge of another box".
Here is a simple implementation of what you want using only XML.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="100dp"
android:layout_height="50dp"
android:id="#+id/imageView"
android:background="#000000"
android:layout_marginLeft="50dp" />
<ImageView
android:layout_width="50dp"
android:layout_height="25dp"
android:id="#+id/imageView2"
android:background="#ff0000"
android:layout_marginTop="-40dp"
android:layout_marginLeft="25dp" />
You can try this xml for your purpose. But what you want center of black box with dynamic content, but it's not recommended, the reason is, if Content too long or too short, it will not look good in UI, because You want to maintain width of red box dynamically as well as center of left edge also. So black box size also you need to change everytime. That is not good. Please try my solution and you can always modify this layout as per your thought process.
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/view_1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="#000000" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/view_1"
android:layout_centerVertical="true"
android:background="#ff0000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Hi"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Hope it will help you !
My background image of view is making some weird margins i don't need. Here is the photo:
As you can see TextView is highlighted and the View (with blue background image) should wrap around that TextView, but it looks like TextView is making some margins.
Here's the XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#color/white_as_stone">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_user"
android:id="#+id/view_user"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="#dimen/view_margin_to_side"
android:layout_marginStart="#dimen/view_margin_to_side"
android:layout_marginTop="#dimen/side_margins"
android:layout_marginRight="#dimen/side_margins"
android:layout_marginEnd="#dimen/side_margins">
<!-- margins above have nothing to do with my problem -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="why y doing this?"
android:id="#+id/txt_user"
android:textColor="#color/white_as_stone">
</TextView>
</LinearLayout>
And this is my background image:
I don't have much experience with 9-patch drawables, i tried tweaking scale area, but it doesn't help. Any help is appreciated.
You need to increase the black lines at the bottom and right of your 9patch image. They define the available content area for the image.
Well I have to fit one ImageView inside another one. It is smaller and has to be exactly at the center. I have both images scaled for different screen resolutions but I can test only on one phone and I am wondering if I set the second image's height and width with dpi to fit my screen resolution will it be perfectly matched on all screens or is there any property in Android aside from setting the height and width that will automatically center one ImageView inside of other ImageView?
Edit: It's in RelativeLayout and the ImageViews are at the top left so I haven't added anything specific to the because they by default are there.
Edit2: Well changing the first ImageView to be RelativeLayout helps center the second image inside of it but then the RelativeLayout grows too big and enlarges the image that is background. Is there a way to make the RelativeLayout be as big as its background?
try this
<?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:orientation="vertical" >
<RelativeLayout
android:layout_width="250dp"
android:layout_height="250dp" >
<ImageView
android:id="#+id/base"
android:layout_height="250dp"
android:layout_width="250dp"
android:src="#drawable/home"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<ImageView
android:id="#+id/center"
android:layout_height="150dp"
android:layout_width="150dp"
android:src="#drawable/home"
android:layout_centerInParent="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</RelativeLayout>
You cannot put an imageView inside another. Hope the following code will be helpful for you.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_image"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image_on_center" />
</LinearLayout>
Use RelativeLayout and then use android:layout_centerInParent="true" remember the order you add the ImageViews will decide what is on top :)
Try this:
android:layout_gravity="center"
I have a banner that I am displaying on an Android Layout. On this banner, I have two avatars that I would like to display next to each other, and most importantly, I would like to have them displayed where the midway point of these two avatars on the y-axis is aligned with the bottom of the banner that these avatars sit on top of.
How would you do this?
Edit:
In other words, I'm asking how you could use an parameter like android:layout_below, but instead of it aligning the top of the imageview with the botton of the specified layout, to align the center.
Unfortunately, there is no direct layout parameter to align a center point with another edge. If the height of your avatars is fixed, you could add some padding that is half the height so they all line up; i.e.
<?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="wrap_content">
<ImageView
android:id="#+id/banner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="25dp"
android:src="#drawable/banner" />
<ImageView
android:id="#+id/avatar1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:src="#drawable/horse" />
<ImageView
android:id="#+id/avatar2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignBottom="#id/banner"
android:layout_toRightOf="#id/avatar1"
android:src="#drawable/horse" />
</RelativeLayout>
If the heights of those items, however, is dynamic, then you will need to create a custom ViewGroup container so you can measure the avatar heights (in onMeasure()) and apply the padding (or other offset value) at runtime.
Put them in a linear layout, and then give them a width to fill the parent. Then you can use the weight property to disperse the widths equally.
<?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="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/clock" />
</LinearLayout>
How to fix the position/layout of a ImageButton/Button/ImageView relative to the background?
I'd tried something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_img"
>
<ImageButton
android:id="#+id/btn1"
android:layout_width="52dip"
android:layout_height="52dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="87dip"
android:background="#drawable/btn1"
/>
</RelativeLayout>
When I change the display resolution, the background_img stretch to cover the new area, but the ImageButton doesn't streetch and doesn't respect the bottom margin proportionately.
It's because you hardcoded the height and with. Set them to fill_parent and it will then fit the margin.