Develop Reference

How to align buttons in Android Studio

I have just started learning to programme for Android in Java and as my first program, I decided to write a simple TicTacToe game. Since I am new to Android Studio I don't know how the alignment works here.
I am perfectly satisfied with the alignment of buttons in content_main.xml but for some reason when I run the code in the emulator they get shifted to the left.
Just in case if it might come in handy I attach the xml code to this post
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.anar.testnewest.MainActivity"
tools:showIn="#layout/activity_main">
<RelativeLayout
android:layout_width="368dp"
android:layout_height="442dp"
android:layout_centerInParent="true"
android:textAlignment="center"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="34dp">
<Button
android:id="#+id/btn1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="99dp"
android:onClick="btn1" />
<Button
android:id="#+id/btn2"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn1"
android:layout_alignBottom="#+id/btn1"
android:layout_toLeftOf="#+id/btn3"
android:layout_toStartOf="#+id/btn3"
android:onClick="btn2" />
<Button
android:id="#+id/btn3"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn2"
android:layout_alignBottom="#+id/btn2"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn3" />
<Button
android:id="#+id/btn4"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/btn1"
android:layout_marginTop="26dp"
android:onClick="btn4" />
<Button
android:id="#+id/btn5"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn4"
android:layout_alignBottom="#+id/btn4"
android:layout_centerHorizontal="true"
android:onClick="btn5" />
<Button
android:id="#+id/btn6"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn5"
android:layout_alignEnd="#+id/btn3"
android:layout_alignRight="#+id/btn3"
android:onClick="btn6" />
<Button
android:id="#+id/btn7"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn4"
android:layout_alignRight="#+id/btn4"
android:layout_below="#+id/btn4"
android:layout_marginTop="22dp"
android:onClick="btn7" />
<Button
android:id="#+id/btn8"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn7"
android:layout_alignBottom="#+id/btn7"
android:layout_alignLeft="#+id/btn5"
android:layout_alignStart="#+id/btn5"
android:onClick="btn8" />
<Button
android:id="#+id/btn9"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn8"
android:layout_alignBottom="#+id/btn8"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn9" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="70dp"
android:text="TicTacToe"
android:textColor="#color/colorAccent"
android:textSize="40sp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Thanks in advance for your time and help guys :)

If you want to the right layout .
Just add app:layout_constraintLeft_toLeftOf="parent" and app:layout_constraintTop_toTopOf="parent" to your RelativeLayout .
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="368dp"
android:layout_height="442dp"
android:layout_centerInParent="true"
android:textAlignment="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/btn1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="99dp"
android:onClick="btn1"/>
<Button
android:id="#+id/btn2"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn1"
android:layout_alignBottom="#+id/btn1"
android:layout_toLeftOf="#+id/btn3"
android:layout_toStartOf="#+id/btn3"
android:onClick="btn2"/>
<Button
android:id="#+id/btn3"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn2"
android:layout_alignBottom="#+id/btn2"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn3"/>
<Button
android:id="#+id/btn4"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/btn1"
android:layout_marginTop="26dp"
android:onClick="btn4"/>
<Button
android:id="#+id/btn5"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn4"
android:layout_alignBottom="#+id/btn4"
android:layout_centerHorizontal="true"
android:onClick="btn5"/>
<Button
android:id="#+id/btn6"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn5"
android:layout_alignEnd="#+id/btn3"
android:layout_alignRight="#+id/btn3"
android:onClick="btn6"/>
<Button
android:id="#+id/btn7"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn4"
android:layout_alignRight="#+id/btn4"
android:layout_below="#+id/btn4"
android:layout_marginTop="22dp"
android:onClick="btn7"/>
<Button
android:id="#+id/btn8"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn7"
android:layout_alignBottom="#+id/btn7"
android:layout_alignLeft="#+id/btn5"
android:layout_alignStart="#+id/btn5"
android:onClick="btn8"/>
<Button
android:id="#+id/btn9"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btn8"
android:layout_alignBottom="#+id/btn8"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:onClick="btn9"/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="70dp"
android:text="TicTacToe"
android:textColor="#color/colorAccent"
android:textSize="40sp"/>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Output

Just add these properties to RelativeLayout,
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
It is better to have Start and End than Left and Right properties. B'cos it also supports RTL layouts.

java.lang.IllegalStateException: Circular dependencies cannot exist in RelativeLayout

Helo All,
I am stuck in an error regarding circular dependencies for Relative Layout. Could anyone help me where I went wrong?
I am using multiple activity xmls but the error is occuring when 1st activity is being executed.
Here is my Relative layout code :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#5fb0c9"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<TextView
android:id="#+id/login_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="22dp"
android:gravity="center_horizontal"
android:text="Account Login"
android:textColor="#fff"
android:textSize="26sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/login_title"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="70dp"
android:background="#fff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="20dp"
android:id="#+id/relativeLayout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:weightSum="1">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText_username"
android:layout_gravity="center_horizontal"
android:layout_weight="0.14"
android:hint="USER NAME"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText_location"
android:layout_weight="0.17"
android:hint="LOCATION"/>
<Button
android:id="#+id/user_confirm"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="22dp"
android:background="#d67601"
android:text="CONFIRM"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
<ImageButton
android:id="#+id/user_profile_photo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/user_profile_image_background"
android:elevation="6dp"
android:src="#drawable/pro"
android:layout_below="#+id/login_title"
android:layout_centerHorizontal="true" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/images"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<Button
android:id ="#+id/node_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NODE SCAN"
android:onClick="Scan"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_marginTop="105dp"
android:layout_below="#+id/contents"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true" />
<Button
android:id ="#+id/post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="POST"
android:onClick="post"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_alignTop="#+id/next"
android:layout_alignParentEnd="true" />
<Button
android:id ="#+id/next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NEXT"
android:onClick="next"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="73dp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/contents"
android:layout_gravity="center_horizontal"
android:layout_weight="0.14"
android:hint=""
android:background="#fcfbfb"
android:layout_alignParentStart="true"
android:layout_above="#+id/post"
android:layout_below="#+id/node_scan" />
<Button
android:id ="#+id/quit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QUIT"
android:onClick="quit"
android:background="#drawable/button_bg_rounded_corners"
android:padding="15dp"
android:shadowColor="#ffffff"
android:textColor="#ffffff"
android:layout_alignTop="#+id/post"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Thanks in Advance,
Alby

android:layout_below="#+id/login_title"
Here should be "#id/..." (whithout a plus sign), because it is a reference to an existing ID.
https://developer.android.com/guide/topics/ui/declaring-layout.html#id

The error was fixed after removing the below from Edit Text field: android:layout_above="#+id/post" android:layout_below="#+id/node_scan"

Android Admob - Didn't find class "com.google.ads.AdView"

this is my XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/very_dark_gray"
android:padding="#dimen/padding_menu_bar_items" >
<ImageView
android:id="#+id/ivRefresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="ivRefresh_click"
android:padding="#dimen/padding_menu_bar_items"
android:src="#drawable/refresh_android96" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/fav"
android:textColor="#color/light_gray"
android:textSize="#dimen/click_text_size" />
<ImageView
android:id="#+id/ivOpenShareLinks"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ivRefresh"
android:layout_alignParentRight="true"
android:onClick="openShareLinks"
android:padding="#dimen/padding_menu_bar_items"
android:src="#drawable/box_up96" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlMainArea"
android:layout_width="match_parent"
android:layout_height="270dp"
android:layout_weight="1"
android:background="#android:drawable/sym_def_app_icon"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/llCurrentSong"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="26dp"
android:background="#drawable/layout_bg"
android:orientation="vertical"
android:padding="#dimen/padding_menu_bar_items" >
<TextView
android:id="#+id/tvHrefStartStop"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="5.07"
android:clickable="true"
android:onClick="playPause"
android:padding="#dimen/padding_menu_bar_items"
android:text="#string/start_stop"
android:textColor="#color/click_items"
android:textSize="#dimen/click_text_size" />
<TextView
android:id="#+id/tvSongName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="5.07"
android:padding="#dimen/padding_menu_bar_items"
android:textColor="#color/white"
android:textSize="#dimen/click_text_size" />
<ProgressBar
android:id="#+id/pbNowSong"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_weight="5.07" />
<TextView
android:id="#+id/tvArtist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="5.07"
android:padding="#dimen/padding_menu_bar_items"
android:textColor="#color/white" />
</LinearLayout>
<RelativeLayout
android:id="#+id/rlTopArea"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_above="#+id/llCurrentSong"
android:layout_alignParentRight="true"
android:layout_marginBottom="16dip"
android:background="#drawable/layout_bg" >
<TextView
android:id="#+id/tvBackToMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/ivBtnTopLIsten"
android:padding="#dimen/padding_menu_bar_items"
android:text="#string/listens"
android:textColor="#color/click_items" />
<ImageView
android:id="#+id/ivBtnTopLIsten"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="clickedTopSongsIcon"
android:padding="#dimen/padding_menu_bar_items"
android:src="#android:drawable/ic_menu_sort_by_size" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlEmail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/email"
android:onClick="clickContactUs"
android:orientation="vertical" >
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#drawable/lower_image" >
<TableLayout
android:id="#+id/TableLayoutShare"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#drawable/layout_bg_white_no_radius_conrenrs"
android:padding="#dimen/padding_menu_bar_items" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ivTwitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/tw_icon" />
<ImageView
android:id="#+id/ivFacebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/fb_icon" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/twitter"
android:textColor="#color/black" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/facebook"
android:textColor="#color/black" />
</TableRow>
</TableLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="#dimen/padding_menu_bar_items"
android:background="#drawable/layout_bg_black_opacity_radius_corners" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayoutTodayPlaylist"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/relativeLayout1"
android:background="#drawable/layout_bg_black_opacity_only_half_radius_corners"
android:onClick="openListenToday" >
<TextView
android:id="#+id/tvListenThisWeak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:layout_toLeftOf="#+id/ivLines1"
android:onClick="openListenToday"
android:padding="#dimen/padding_menu_bar_items"
android:text="#string/was_today"
android:textColor="#color/click_items" />
<ImageView
android:id="#+id/ivLines1"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="clickedTopSongsIcon"
android:padding="#dimen/padding_menu_bar_items"
android:src="#drawable/lines" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/relativeLayout1"
android:layout_alignParentRight="true"
android:background="#drawable/layout_bg_black_opacity_only_half_radius_corners"
android:onClick="openListenThisWeek" >
<TextView
android:id="#+id/tvListenToday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:layout_toLeftOf="#+id/ivLines1"
android:onClick="openListenThisWeek"
android:padding="#dimen/padding_menu_bar_items"
android:text="#string/was_this_weak"
android:textColor="#color/click_items" />
<ImageView
android:id="#+id/ivLines1"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="clickedTopSongsIcon"
android:padding="#dimen/padding_menu_bar_items"
android:src="#drawable/lines" />
</RelativeLayout>
</RelativeLayout>
<com.google.ads.AdView
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adUnitId="MY_AD_UNIT_ID"
ads:adSize="BANNER"
ads:testDevices="TEST_EMULATOR, TEST_DEVICE_ID"
ads:loadAdOnCreate="true"/>
</LinearLayout>
I added the google.service jar in this way:
moved the folder: google-play-services_lib
to the main app folder.
then, I entered eclipsed, and imported my app > right click on the app name > Properties > Android > on the Libery Clicked 'Add' > added the Google play service:
http://i.stack.imgur.com/9dHrM.png
got the library in my project:
http://i.stack.imgur.com/1gEq6.jpg
when I'm trying to run my app, this error appear::
(26935): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.manishma/com.manishma.MainActivity}: android.view.InflateException: Binary XML file line #287: Error inflating class com.google.ads.AdView
the unitID is checked (changed the code for the example).
what I'm doing wrong?

You are mixing the 2 ways possible right now to display Admob ads. The first one is based on the Android SDK, the second one is based on Google Play services.
The difference between the 2 implementations are explained in details in the developers documentation
In my opinion Google Play services is still too buggy to be used, but soon this will be the only option left.
In your case you mix both because you are using the XML declarations from the Android SDK but at the same time you are integrating the Google Play Services library. You cannot use both, you need to choose one and follow the developer guide I gave above.
Update
1) If you want to use Google Play services, change your XML with this:
<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adUnitId="MY_AD_UNIT_ID"
ads:adSize="BANNER"/>
2) If you want to use the Android SDK, you have to add the GoogleAdMobAdsSdk jar in your libs folder and remove the Google Play services library.
Those are not the only things to do, manifest files must for example also be updated (see documentation).

Android - text overlapping in landscape but not portrait

So i have a small issue. When I am in portrait mode and click on an item, the conformation page comes up and its fine. but when you turn it landscape, some text is overwritten but the button. See picture:
Overlapping
However if I click on the item in landscape, its not overlapping. Can anyone see where im going wrong.
Below is the landscape code:
<?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:id="#+id/fragment_one_click_reservation_details_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/fragment_one_click_message_layouts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include layout="#layout/fragment_one_click_message_layout" />
<ImageView
android:id="#+id/fragment_one_click_horizontal_line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="#color/thin_line" />
<LinearLayout
android:id="#+id/fragment_one_click_reservation_detalis_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/fragment_one_click_reservation_number_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/fragment_one_click_reservation_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_one_click_reservation_message_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_number_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/fragment_one_click_reservation_message_text"
android:layout_toRightOf="#id/fragment_one_click_reservation_message_text"
android:textColor="#color/one_click_reservation_number_text"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/fragment_one_click_reservation_store_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fragment_one_click_reservation_number_text"
android:text="#string/fragment_one_click_reservation_store_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_store_name_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/fragment_one_click_reservation_store_text"
android:layout_toRightOf="#id/fragment_one_click_reservation_store_text"
android:text="TEST TEST TEST TES"
android:layout_toLeftOf="#+id/fragment_one_click_cancel_reservation_button_tablet_land"
android:textStyle="bold" />
<TextView
android:id="#+id/fragment_one_click_reservation_until_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fragment_one_click_reservation_store_text"
android:layout_marginTop="15dp"
android:text="#string/fragment_one_click_reservation_until_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_until_time_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#id/fragment_one_click_reservation_until_text"
android:layout_toRightOf="#id/fragment_one_click_reservation_until_text"
android:textStyle="bold" />
<Button
android:id="#+id/fragment_one_click_cancel_reservation_button_tablet_land"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:background="#drawable/one_click_cancel_red_button"
android:text="#string/one_click_button_cancel_reservation" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/fragment_one_click_store_details_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/fragment_one_click_store_details_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/grey"
android:padding="10dp"
android:text="#string/one_click_store_details" />
</RelativeLayout>
<LinearLayout
android:id="#+id/fragment_one_click_reservation_until_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="#+id/fragment_one_click_reservation_details_sent_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_one_click_reservation_details_sent_text" />
<LinearLayout
android:id="#+id/fragment_one_click_reservation_mobile_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/fragment_one_click_reservation_mobile_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/fragment_one_click_reservation_mobile_message_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_mobile_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/fragment_one_click_reservation_email_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/fragment_one_click_reservation_email_message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/fragment_one_click_reservation_email_message_text" />
<TextView
android:id="#+id/fragment_one_click_reservation_email_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textStyle="bold" />
</LinearLayout>
<Button
android:id="#+id/fragment_one_click_cancel_reservation_button_tablet_port"
android:layout_width="200dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:background="#drawable/one_click_cancel_red_button"
android:text="#string/one_click_button_cancel_reservation" />
<RelativeLayout
android:id="#+id/fragment_one_click_reservation_my_account_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<TextView
android:id="#+id/fragment_one_click_reservation_my_account_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="3"
android:text="#string/fragment_one_click_reservation_my_account_text_tablet" />
<Button
android:id="#+id/fragment_one_click_account_button"
style="#style/alternatesmallbutton"
android:layout_width="140dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_marginTop="4dp"
android:text="#string/one_click_my_account" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/progress_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal" >
<ProgressBar
android:id="#+id/fragment_pdp_add_to_trolley_progress_collection"
style="#style/progress_spinner"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:visibility="visible" />
</LinearLayout>
<ImageView
android:id="#+id/fragment_one_click_horizontal_line"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="#color/thin_line" />
</LinearLayout>

Set the WIDTH of the button to WRAP CONTENT and set PADDING for the button to make the button looks larger and set the button to the right of the ID of "Reserved At info text".

FrameLayout: View Arrrangement and Null Pointer Exception

The main highlight of my activity is the image in the center, that can be zoom in up to the whole screen. Right now, The positions are okay but in some point of zooming in the image two of the textview are being covered by the image, the rest of the view remains at the top of the image.
So my main problem is to put the two textview at the top of the image. I tried transferring the positions of each of the view in xml but for some reason I got null pointer exception.
xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center" >
<TextView
android:id="#+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:layout_marginTop="20dp"
android:textColor="#FF4F00"
android:textSize="20sp"
android:alpha=".5"
android:text="Name" />
<TextView
android:id="#+id/txtPid"
android:layout_below="#+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textColor="#FF4F00"
android:textSize="20sp"
android:layout_marginTop="20dp"
android:alpha=".5"
android:text="Category Or PID" />
<ImageView
android:id="#+id/iv_photo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:scaleType="center" />
<TextView
android:id="#+id/txtItemNo"
android:layout_below="#+id/txtSellingPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="19dp"
android:textColor="#FF4F00"
android:textSize="20sp"
android:alpha=".5"
android:text="Item No" />
<TextView
android:id="#+id/txtSellingPrice"
android:layout_below="#+id/txtPid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp"
android:textColor="#FF4F00"
android:textSize="20sp"
android:alpha=".5"
android:text="Selling Price" />
</RelativeLayout>
</FrameLayout>

Change the relative layout item ordering so that the imageview is the first item. Items are layout and drawn in the order of they appearance.

Try out as below:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_gravity="center" >
<RelativeLayout
android:id="#+id/rl"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:orientation="vertical" >
<TextView
android:id="#+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="20dp"
android:alpha=".5"
android:text="Name"
android:textColor="#FF4F00"
android:textSize="20sp" />
<TextView
android:id="#+id/txtPid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txtName"
android:layout_marginTop="20dp"
android:alpha=".5"
android:text="Category Or PID"
android:textColor="#FF4F00"
android:textSize="20sp" />
<TextView
android:id="#+id/txtItemNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txtSellingPrice"
android:layout_marginTop="19dp"
android:alpha=".5"
android:text="Item No"
android:textColor="#FF4F00"
android:textSize="20sp" />
<TextView
android:id="#+id/txtSellingPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/txtPid"
android:layout_marginTop="20dp"
android:alpha=".5"
android:text="Selling Price"
android:textColor="#FF4F00"
android:textSize="20sp" />
</LinearLayout>
<ImageView
android:id="#+id/iv_photo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/layout"
android:background="#drawable/selctor"
android:scaleType="center" />
</RelativeLayout>
</FrameLayout>
OutPut: