Develop Reference

Output Design of a layout is not exact what is set while developing the Layout

I am trying to design a layout ( basically a splash screen ) which shows the App logo in almost middle of the screen and the company tagline under the logo on the start of the App. While working in Android Studio the design of layout looks like this. I positioned it 200dp downwards from the top.
As you can see, logo is right in the middle of the screen.
But when i run the app on my emulator the screen appears like this.The logo is not at the exact position where i wanted it.
I want my logo at the same relative position, no matter how big the screen size is.
Assume if logo is positioned at 200dp at 1000dp long screen. i want it at 400dp position on a 2000dp screen size.
Simulator : 5.0.0 API-21 768 X 1280
What are the possible solutions ??
Following image contains both outputs.
Follow this Link for the image
Here is the 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="match_parent"
android:layout_height="match_parent"
android:background="#f84343"
android:weightSum="1">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_marginTop="200dp"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/AppIcon"
android:layout_centerInParent="true"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>

You don't need to use a <RelativeLayout> to achieve that. Below is the code using a <LinearLayout>. The key here is android:gravity="center" in the <LinearLayout> element:
<?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:background="#f84343"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:textSize="20dp"/>
</LinearLayout>
[EDIT]
OP - But if i go on using more widgets to the screen i might need to
position them relative to each other. how to overcome that with
Relative layout
Well, technically you can still add more widgets in their required order. But, if you really want to use a <RelativeLayout>, you can use something like:
<?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:background="#f84343"
android:gravity="center_vertical">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_below="#id/AppIcon"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:layout_centerHorizontal="true"
android:textSize="20dp"/>
</RelativeLayout>

It looks like you've mixed up some RelativeLayout/LinearLayout attributes.
If you want to use RelativeLayout remove and modify some attributes.
Something like this instead
<?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:background="#f84343">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:layout_below="#id/AppIcon"
android:id="#+id/textView"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>

Simplify it all down into a TextView if you ask me
<?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:background="#f84343" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/simpler_better_faster"
android:drawableTop="#drawable/arrow_right_fill_dark" />
</RelativeLayout>
This gets rid of the ImageView all together, the change being the drawableTop attribute that provides a drawable, centered above the text.

How to scale an imageview to the right size? (my png images are to small)

A colleague of mine created for me a few pngs to enter inside a main menu. The pngs are suppose to be scaled to the right size like this:
I entered all the pngs in order to fit the hdpi xhdpi etc.,but when I put the "One player game" and "two player game" the images shrink and do not fit the size of the "Exit" button:
I tried all the variations of "android:scaleType" following this question. Also I tried padding (through a diff question that I can't find now). These resolutions did not help me.
I will be happy if you will be able to show me how to scale up these texts that are inside the png.
Here is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<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="#color/colorBackground"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:layoutDirection="ltr"
tools:context="com.inbaltako.tictactoe.MenuActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:paddingTop="50dp"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/relativeLayout">
</RelativeLayout>
<ImageButton
android:id="#+id/exitBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/exit_btn"
android:background="#color/colorPrimary"
android:padding="16dp"
android:onClick="btnClicked"
android:layout_marginTop="2dp"
android:layout_below="#+id/two_player_game"
android:layout_toStartOf="#+id/relativeLayout" />
<ImageButton
android:id="#+id/one_player_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/one_player_game"
android:background="#color/colorPrimary"
android:onClick="btnClicked"
android:padding="16dp"
android:layout_below="#+id/relativeLayout"
android:layout_alignStart="#+id/two_player_game" />
<ImageButton
android:id="#+id/two_player_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/two_players_game"
android:background="#color/colorPrimary"
android:onClick="btnClicked"
android:padding="16dp"
android:layout_below="#+id/relativeLayout"
android:layout_alignStart="#+id/exitBtn"
android:layout_marginTop="39dp" />
</RelativeLayout>

It's hard to know if you put your drawables I the right places.
But if it's just text, why aren't you using TextView? Should be much easier.
Dealing with images just for text isn't the right thing to do.

Eliminate space in Android Layout

I am trying to make a very simple Layout like this:
An image occupying the width of the screen, and a button occupying the width of the screen coming right next to it without any space.
Here is the code I have, it is next to trivial
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</LinearLayout>
The problem is, the button does not show up, it shows the image with some space
The emulator is running with screen size 1080 x 1920, and the image has size 720 x 990, if we scale that up, it should be 1080 x 1485, leaving a lot of space for the button, but the image occupied in the middle of the screen somehow that I do not understand.
This is how a screen capture on the emulator look like:
Next, I tried to swap the order of the button and the image (just for the sake of experimenting), I see something like this:
I get this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
</LinearLayout>
Now I figured what happened, it appears that we have lot of spaces between the button and the image and therefore the button have no space. But where does those spaces come from? I wanted them to stick together.
The full source code of this experiment can be found in
https://github.com/cshung/MiscLab/tree/master/Question

The problem occurs here because the LinearLayout container has a height with wrap_content and the system extends the ImageView at its max and then display the TextView below it (thus below the screen height).
To get the right layout, you have to use layout_weight in the child views as follows:
<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
...>
<!-- take 90% of container -->
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
... />
<!-- take 10% of container -->
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
... />
</LinearLayout>
Then, in order to have "no space" for the image, you have to play with the attribute scaleType (see this example) as the following:
Either force the image to fit the widht/height:
<ImageView
...
android:scaleType="fitXY"/>
Or show the center and fill the w/h:
<ImageView
...
android:scaleType="centerCrop"/>

Your drawable/bg is being scaled to fit in id/imageView. The space you're getting is just the window's background not being covered by the image. Change ScaleType of your ImageView to FIT_XY, CENTER_CROP or other and watch a result. See: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Your easiest option will probably be to use a RelativeLayout instead of a LinearLayout. I think this is the direction Android has been going lately. Everything seems to be RelativeLayout based. For instance, when you make a new layout in Android Studio, I believe it defaults to RelativeLayout. It used to be LinearLayout in the eclipse extension a while back.
Relative Layout
Using a relative layout instead you should have the following:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_below="#id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</RelativeLayout >
Note that I simply changed LinearLayout to RelativeLayout, removed the setOrientation and then added the following line to your button.
android:layout_below="#id/imageView"

First of all your image is too big so it basically takes up all of the screen space in the first place and pushes the button down the viewable region.There is no need to modify the padding or margin as it is in the LinearLayout and it places all child views one after the other.
Set a desired height to the image view and also a scale type to get what you are expecting.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="300dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
Screen shot

android Imageview hides elements below when changing orientation

I'm facing a problem when changing the screen orientation. When the phones in portrait mode everything's working fine but when i change the orientation to landscape mode the imageview hides the button bellow.
Here's my layouts xml:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:longClickable="false">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Inbox"
android:id="#+id/btn_inbox"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_below="#+id/btn_inbox"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/img_main" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Scan QR"
android:id="#+id/btn_qrscan"
android:layout_below="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:enabled="false" />

Sure, because the image could has a size that fits the screen in portrait. If you want to view all, you need to:
Reduce the size of the imageview
Play with the property "weight" of the components in the view
Add a Scrollview if you want to use a scroll

Its because, the height of the screen in Portrait mode is more, when compared to height of the screen in Landscape mode. The elements won't adjust their places, as per screen height automatically. You should handle the placement of views on all orientations/devices/tablets.
The width is more when the device is in landscape mode. So, try changing the position of views to make use of the width when height is less.

Please try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:longClickable="false"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="#+id/btn_inbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Your Inbox" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/background" />
<Button
android:id="#+id/btn_qrscan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Scan QR" />
</LinearLayout>

I Solved the problem using these line in AndroidManifest.xml.
android:configChanges="orientation|screenSize"

Android: Custom Expandeble List and TextView issue

I faced with one issue when I tried to create my custom Expandable List View.
I can't make text ("9.2") on the center of the cell.
incorrect image
But on the prevew mode it looks fine.
correct image
Here my xml file:
<?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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#android:color/background_dark">
<LinearLayout
android:id="#+id/titles"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/space_between_elements"
android:orientation="vertical"
android:layout_toRightOf="#+id/image"
android:layout_toLeftOf="#+id/rate">
<TextView
android:id="#+id/bigTitle"
style="#style/PrimaryFont"
android:text="A big title"/>
<TextView
android:id="#+id/littleTitle"
style="#style/SecondaryFont"
android:layout_marginTop="#dimen/space_between_elements"
android:text="A little title" />
</LinearLayout>
<TextView
android:id="#+id/rate"
style="#style/RatingFont"
android:text="9.2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignBottom="#+id/titles" />
<ImageView
android:id="#+id/image"
android:layout_width="#dimen/touchable_ui_components"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/abc_ic_cab_done_holo_dark"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignBottom="#id/titles" />
</RelativeLayout>
I think the main issue due to +id/image becasue without +id/titles it also looks incorrectly.

Try this for the TextView with id rate.
android:layout_centerVertical="true"
Remove
android:layout_alignParentTop="true"
Be careful with the padding, it might move the drawable region not be in the center. (see http://developer.android.com/reference/android/view/View.html ->Size, padding and margins)
Also these two:
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
have similar effects, use only one. I prefer Right
(see http://developer.android.com/reference/android/widget/RelativeLayout.html#ALIGN_PARENT_END)