Develop Reference

It's there any way to change the position of image according to screen size?

I doing a project where I have to display arrow on a map which is a picture. The base map will will stretch or compressed when different screen is used. However the position of arrow still remain the same. Is that any way to make the arrow follow the map ?
Image 1 is when i use a smaller screen while image 2 is when i use a larger scrren
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.example.window8.rescape.Escape"
android:id="#+id/main"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/background"
android:background="#drawable/basebase" />
<ImageView
android:layout_width="50dp"
android:layout_height="60dp"
android:id="#+id/pointer"
android:layout_gravity="bottom"
android:background="#drawable/pointer"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="198dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:background="#drawable/arrow4"
android:layout_marginLeft="68px" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView"
android:background="#drawable/arrow2"
android:layout_marginLeft="80px" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
</RelativeLayout>

For the LinearLayout that contains the arrows add 2 LinearLayouts. one before the 1st arrows and another one between the arrows. Also, add weight sum to the parent LinearLayout as follow:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_weightSum="100">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="fill_parent"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:background="#drawable/arrow4"
android:layout_marginLeft="68px" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="fill_parent"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView"
android:background="#drawable/arrow2"
android:layout_marginLeft="80px" />
</LinearLayout>
Now, you need to play with the weight values for the 2 linear layouts until you find the desired ones.

Put your arrows inside a FrameLayout and add a layout_gravity attributes to them:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:background="#drawable/arrow4"
android:layout_marginLeft="68px"
android:layout_gravity="top|left" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView"
android:background="#drawable/arrow2"
android:layout_marginRight="68px"
android:layout_gravity="top|right" />
</FrameLayout>

Android linear layout difficulties

I have a portrait xml layout file which contains a text-box which rests onto of an ImageView. This was done using a vertical linear layout. The trouble is, I have created a landscape xml layout file, but I don't know how to insert a text box above the ImageView in this particular layout file. For some reason i'm having trouble.
To summarize, I want to replicate the style I had in my portrait xml (with regards to the text-box and ImageView relationship). Pictures below should clarify exactly what I mean. Icons are covered in gray on purpose, but you get the general idea.
My Landscape xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- This relative layout will center EVERYTHING within it. Do not touch this functionality. -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/relative_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<com.edmodo.cropper.CropImageView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/CropImageView"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center" >
</com.edmodo.cropper.CropImageView>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".12"
android:gravity="center" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:ignore="UselessParent" >
<ImageView
android:id="#+id/button1of3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/button1_description"
android:src="#drawable/ic_action_rotate"
android:visibility="invisible"
tools:ignore="Suspicious0dp" />
<ImageView
android:id="#+id/button2of3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/button3_description"
android:padding="2dp"
android:src="#drawable/ic_action_camera" />
<ImageView
android:id="#+id/button3of3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/button4_description"
android:src="#drawable/ic_action_feed" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Just wrap your CropImageView inside a layout, for example, a LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/relative_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/test"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight=".12"
android:text="Test" />
<com.edmodo.cropper.CropImageView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/CropImageView"
android:layout_height="0dip"
android:layout_width="fill_parent"
android:layout_weight=".88"
android:gravity="center" >
</com.edmodo.cropper.CropImageView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".12"
android:gravity="center" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:ignore="UselessParent" >
<ImageView
android:id="#+id/button1of3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/button1_description"
android:src="#drawable/ic_action_rotate"
android:visibility="invisible"
tools:ignore="Suspicious0dp" />
<ImageView
android:id="#+id/button2of3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/button3_description"
android:padding="2dp"
android:src="#drawable/ic_action_camera" />
<ImageView
android:id="#+id/button3of3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:contentDescription="#string/button4_description"
android:src="#drawable/ic_action_feed" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

How to make ScrollView 30% of the Screen and 70% for ImageView

The image in ScrollView looks good in small screens but not in large screens.
I want to make it automatically fit the screen, 30% ScrollView and 70% ImageView.
Thank you so much for your help :)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/IVdisplay"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/a" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/IVimage1"
android:layout_width="85dp"
android:layout_height="75dp"
android:padding="5dp"
android:scaleType="fitXY"
android:src="#drawable/a" />
</LinearLayout>
</ScrollView>

change your parent layout to LinearLayout, it automatically align with respect to given weights try this :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen"
android:weightSum="100" >
<ImageView
android:id="#+id/IVdisplay"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:background="#drawable/a" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentLeft="true"
android:layout_weight="30" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/IVimage1"
android:layout_width="85dp"
android:layout_height="75dp"
android:padding="5dp"
android:scaleType="fitXY"
android:src="#drawable/a" />
</LinearLayout>
</ScrollView>

How to center a view using RelativeLayout?

I wanted to know how to center a View between two other views (or between a view and the parent edge) using RelativeLayout.
For example, if I have the following...
How do I vertically center the Button between the ImageView and the bottom of the screen using RelativeLayout?
I'm looking for a solution where...
the Button is not stretched in any way
there are no nested layouts
And I'm trying to do this in the XML layout (not programmatically).

You can use following:
<RelativeLayout
android:layout_below="#id/theImageView"
android:align_parentBottom="true"
android:layout_width="match_parent"
android:layout_height="200dp" >
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="onClickButton"
android:textSize="20sp"
android:text="Go"/>
</RelativeLayout>

There's unfortunately no easy way to do this. You can either nest layouts, or do it at runtime. The simplest way is to nest layouts:
<LinearLayout
android:width="match_parent"
android:height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_top_image"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/my_button_label"/>
</RelativeLayout>
</LinearLayout>
This puts the image at the top. Below that, the layout_height=0 and layout_weight=1 attributes on the RelativeLayout cause it to take up all the remaining space. You can then center the button in the RelativeLayout. You can play with padding on the button to get it to the size you want.

Use below XMl code for that, it will solve your problem.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/mLlayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/mImgView1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="2" >
<Button
android:id="#+id/Btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Dipak" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

use this android:layout_centerInParent="true" in XML file..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1.0" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.8"
android:background="#00ff00" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.2" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
</LinearLayout>

#Gus you can create center view between two other view... this is not exact you must try with
this way....
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#00ccFF"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:layout_width="59dp"
android:layout_height="59dp"
android:layout_alignRight="#+id/linearLayout1"
android:layout_alignTop="#+id/linearLayout1"
android:layout_marginRight="-21dp"
android:layout_marginTop="-21dp"
android:background="#FFccFF"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>

I think what you just need is to allign the imageview as you would normally done and align the button using layout_below , no need for hardcoding nor using nested views use android:gravity="center" on the button you're done
<RelativeLayout
android:layout_below="#id/theImageView"
android:align_parentBottom="true"
android:layout_width="match_parent"
android:layout_height="200dp" >
<ImageView
android:id="#+id/imgview"
android:layout_width="match_parentmat"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imgview"
android:gravity="center"
android:onClick="onClickButton"
android:textSize="20sp"
android:text="Go"/>
</RelativeLayout>

<?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:id="#+id/imageView1"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:src="#drawable/wood" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginLeft="101dp"
android:layout_marginTop="53dp"
android:text="Image Button" />
</RelativeLayout>

How to make a linearlayout filling remaining space in a relativelayout?

I've got a relativelayout with three linearlayouts as children. The last one has a fixed height and has android:layout_alignParentBottom set to "true". While the middle one is properly positioned below the first one, it goes as far as the bottom of the screen, so that its lower part is overlapped by the third one.
What's wrong?
Thanks
<?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" >
<LinearLayout
android:id="#+id/category"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/back_btn"
android:layout_width="29dp"
android:layout_height="34dp"
android:layout_gravity="center_vertical"
android:src="#drawable/red_arrow_left" />
<TextView
android:id="#+id/cat_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/category"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:cacheColorHint="#android:color/white" />
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:cacheColorHint="#android:color/white"
android:padding="10dp"
android:text="#string/no_item" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/nav_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
//stuff
</LinearLayout>
</RelativeLayout>

You could try using layout weights to control the relative sizes of the child layouts. There is an article on my blog which gives some information on the use of layout weights.
As an example, try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/category"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/back_btn"
android:layout_width="29dp"
android:layout_height="34dp"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/cat_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/category"
android:layout_marginTop="10dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:cacheColorHint="#android:color/white" />
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:cacheColorHint="#android:color/white"
android:padding="10dp"
android:text="no_item" />
</LinearLayout>
<LinearLayout
android:id="#+id/nav_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:orientation="horizontal" >
//stuff
</LinearLayout>
</LinearLayout>
The RelativeLayout has been replaced by a LinearLayout, all of the relative positioning tags have been removed, and a layout_weight attribute has been added to the centre LinearLayout which will cause it to stretch to fill the available space.

Nooo... the solution is much simpler! You forgot to say that you wanted the second linear layout to be above the third one :) Yes, the second linear layout must have BOTH android:layout_below="#+id/category" and android:layout_above="#+id/nav_bar". I tested it and it works.
But of course, you can use weights to achieve the same results, it is just going to be harder...
Here is your XML with the change I mentioned (tested it in eclipse):
<?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" >
<LinearLayout
android:id="#+id/category"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/back_btn"
android:layout_width="29dp"
android:layout_height="34dp"
android:layout_gravity="center_vertical"
android:src="#drawable/red_arrow_left" />
<TextView
android:id="#+id/cat_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/nav_bar"
android:layout_below="#+id/category"
android:layout_marginTop="10dp"
android:orientation="horizontal" >
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:cacheColorHint="#android:color/white" />
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
android:cacheColorHint="#android:color/white"
android:padding="10dp"
android:text="#string/no_item" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/nav_bar"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
//stuff
</LinearLayout>
</RelativeLayout>

You should add an id to your second LinearLayout
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/category"
android:layout_marginTop="10dp"
android:id="#+id/YOUR_ID">
and in the third layout add android:layout_below="#id/YOUR_ID"
<LinearLayout
android:id="#+id/nav_bar"
android:layout_below="#id/YOUR_ID"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true">