Develop Reference

How to align the center of a box with the left edge of another box?

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 !

Android image display full height - loaded asynchronously

Hey I begin my adventure with Android and I can't solve one problem.
I am loading pictures from web server using Universal Image Loader. I put them into Relative Layouts which is located in ListView. The effect that I want to achieve, is that pictures are displayed on the entire screen with full width and height with a small box at the bottom.
In the IDE preview, everything looks ok:
But on my phone loaded images look like that. I want them to be displayed with full height. It is necessary to use programming functions to achive it?
Loading images:
imageLoader.displayImage(
wallpapers.get(position).getSrcUrl()//the drawable
, currentWallpaperViewHolder.imageViewWallpaper//the image view
, imageLoaderOptions);//the display options
return itemView;
List view:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="#+id/WallpapersListView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Image view:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/wallpaper_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/test"
/>
<TextView
android:id="#+id/wallpaper_date_for_use"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textStyle="bold"
android:text="Date of use" />
</RelativeLayout>

It's probably because you have a RelativeLayout as your root view. Try wrapping the outside RelativeLayout in a LinearLayout.

You can do this,
Get the device height.
And then set imageView height programatically as the device height.

9patch creates extra transparent borders: How to remove?

I have an XML file in my Android application. The first two linear layouts look like the image below.
Layout 1 - Semi Circle
Layout 2 - Rectangle
Note : There is NO gap between the semi circle and rectangle. This gap is the problem that I'm addressing now.
Actually Layout 1(horizontal) has three sub layouts (vertical) and the middle sub layout contains an image view which is the semi cirlce.
When I dont use a 9 patch image, there is no gap and it blends perfectly with the Layout 2. But I am required to use a 9 patch image because of the possibility of incorrect stretching of the semi circle.
But when I do use a 9patch image, there is this weird partition created between the two layouts.
it must be a 9patch problem. but how can it be solved?
I just require a method to use a 9patch image of this semi circle without this gap because it may look odd.
Note : the 9patch dots are ONLY on the right and left empty side, not anywhere at the top and bottom.
This is the excerpt from the XMl file :
<LinearLayout
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="2" >
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.98"
android:gravity="center_horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/semicircle" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="2" >
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0"
android:background="#drawable/rectangle" >
</RelativeLayout>

RelativeLayout positioning not working properly

Hi,
I am trying to design a layout that has no dependency on screen size. Actually I am designing a sample layout in which there is a large size add in the center of screen. There is a text in the center of upper remaining area and lower remaining part. The xml is:
<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" >
<ImageView
android:id="#+id/ads_layout_large"
android:layout_width="300dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:background="#android:color/background_light" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
</RelativeLayout>
The problem is, it is working on upper part, the text is exactly in the center of the remaining area, but the lower TextView has covered half of the screen, can you please help me find the mistake? Or any other way to design the same?

I think here is your problem :
android:layout_height="fill_parent"
setting your TextView height to fill_parent cause your textview extend to reach it's parent size , use wrap_content or static value like "30dp" instead

Dynamically expanding empty space?

Is there a way to separate upper content from lower content on the screen? So that no matter what's in the upper area the lower area remains against the bottom of the screen. I've tried gravity=bottom and things like that. I've tried inserting a layout of some kind in between top and bottom hoping it would stay expanded (thus pushing the two apart). Thanks for any help you can offer.

Answer: RelativeLayout
Example:
<?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">
<TextView
android:text="TOP"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
<TextView
android:text="BOTTOM"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
</RelativeLayout>