How to put an image below textview in layout? - java

How can I put the image view below two of the text views, tv_pw and tv_un. So that in the layout the two text views are on top of the image, while the image serves as a background for that two text views. How could I do that?
Here is my xml file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="510dip"
android:layout_marginTop="10dip"
android:background="#DDDDDD">"
<EditText
android:id="#+id/et_pw"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/et_un"
android:layout_below="#+id/et_un"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="textPassword" />
<TextView
android:id="#+id/tv_pw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/et_pw"
android:layout_alignBottom="#+id/et_pw"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/et_pw"
android:text="Password:"
android:textColor="#444444"
android:textSize="10pt" />
<Button
android:id="#+id/btn_login"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_below="#+id/et_pw"
android:layout_centerHorizontal="true"
android:text="Login" />
<TextView
android:id="#+id/tv_un"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/tv_pw"
android:layout_marginTop="98dp"
android:text="User Name:"
android:textColor="#444444"
android:textSize="10pt" />
<EditText
android:id="#+id/et_un"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tv_un"
android:layout_centerHorizontal="true"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_login"
android:layout_centerHorizontal="true"
android:text="" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="32dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:src="#drawable/bkground" />


There's a lot more in your XML but, focusing on what you are asking, you can use the margin attribute to overlap the textviews.
Try something like this
<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/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myImage">
</ImageView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:layout_marginTop="-50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world2" />
</LinearLayout>
</RelativeLayout>
In this example I wrapped the two textviews inside a linear-layout (vertical) and set the linear-layout below the imageview and a margin of -50dp so it goes up and overlap.
HIH


Another way would be to use drawableBottom="#drawable/ic_launcher" inside your textview


If you don't care about having control on how the image scales, you can set the background of a LinearLayout that's wrapped around the TextViews.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_background_image_here"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_view_1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_view_2" />
</LinearLayout>


Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="510dp"
android:layout_marginTop="10dp"
android:orientation="vertical"
android:gravity="center"
android:background="#DDDDDD">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="98dp">
<LinearLayout
android:layout_width="110dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bkground">
<TextView
android:id="#+id/tv_un"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="User Name:"
android:textColor="#444444"
android:textSize="10pt" />
<TextView
android:id="#+id/tv_pw"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:text="Password:"
android:textColor="#444444"
android:textSize="10pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="20dp">
<EditText
android:id="#+id/et_un"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="text" />
<EditText
android:id="#+id/et_pw"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="textPassword" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn_login"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Login" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>


Wrap the two TextViews in linear layout with vertical orientation and assign background for linear layout.


use android:weight on the the two text views and boom


<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Related

TextView overlaps with another textview

I want the text to be displayed to the right of the name,but if the name is too large, the text on the right doesn't fit on the screen. I used the following solution, but it causes the first textview to stretch beyond the size of the text in it.
What I have:
screenshot
What I want:
concept
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="true"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_weight="1"
android:fontFamily="#font/montserrat"
android:singleLine="true"
android:text="1"
android:textColor="#color/colorText"
android:textSize="20sp" />
<TextView
android:id="#+id/readed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_marginStart="10dp"
android:background="#drawable/back_new"
android:fontFamily="#font/montserrat"
android:gravity="center"
android:keepScreenOn="true"
android:paddingHorizontal="5dp"
android:paddingVertical="3dp"
android:singleLine="true"
android:text="554"
android:textColor="#color/colorWhite"
android:textSize="18sp" />
</LinearLayout>

just remove android:weighSum="1" and android:layout_weight attribute in two textViews
enter code here<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="true"
android:orientation="horizontal">
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:fontFamily="#font/montserrat"
android:singleLine="true"
android:text="3"
android:textColor="#color/colorText"
android:textSize="20sp" />
<TextView
android:id="#+id/readed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_marginStart="10dp"
android:background="#drawable/back_new"
android:fontFamily="#font/montserrat"
android:gravity="center"
android:keepScreenOn="true"
android:paddingHorizontal="5dp"
android:paddingVertical="3dp"
android:singleLine="true"
android:text="554"
android:textColor="#color/colorWhite"
android:textSize="18sp" />
</LinearLayout>

How to stretch Imagview in xml layout and show other button to left of it

I'm using Relativelayout within cardview layout to show the user details. But I want to show the two button at the end with equal width on and everything in the left side of Image which will stretch from Top to bottom.
But I'm not able to do so.
here is my xml code
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginBottom="2dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
>
<ImageView
android:id="#+id/contact_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#fff"
android:src="#drawable/binil"
android:padding="1dp" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/top"
android:padding="5dp">
<TextView
android:id="#+id/contact_name"
android:layout_width="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Sagar Rawal"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_mobile"
android:text="9868336847"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_name"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_address"
android:layout_below="#+id/contact_name"
android:layout_width="wrap_content"
android:text="Jumla"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:textStyle="bold"
android:layout_toRightOf="#+id/contact_mobile" />
<TextView
android:id="#+id/contact_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="searchbbc1881#gmail.com"
android:layout_below="#+id/contact_mobile"
android:layout_alignParentLeft="true"
android:textStyle="bold" />
<ImageButton
android:layout_below="#+id/contact_email"
android:id="#+id/call"
android:background="#drawable/shape_button"
android:layout_width="wrap_content"
android:src="#drawable/ic_call_black_24dp"
android:layout_height="wrap_content" />
<ImageButton
android:layout_toRightOf="#id/call"
android:layout_below="#+id/contact_email"
android:background="#drawable/shape_button"
android:layout_width="wrap_content"
android:src="#drawable/ic_email_black_24dp"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v7.widget.CardView>
My output is
But I want something similar to this
Where two buttons will equally stretch to left side of Image.
Please help

Try using LinearLayout weightSum like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100">
<TextView
android:layout_width="0dp"
android:layout_weight="50"
android:layout_height="wrap_content"
android:text="text1!" />
<TextView
android:layout_width="0dp"
android:layout_weight="50"
android:layout_height="wrap_content"
android:text="text2!" />
</LinearLayout>
Update:
Replace your code with this, it will solve your issue
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:padding="5dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="1">
<RelativeLayout
android:id="#+id/top"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".7"
android:padding="5dp">
<TextView
android:id="#+id/contact_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Sagar Rawal"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_mobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/contact_name"
android:text="9868336847"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_name"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/contact_mobile"
android:text="Jumla"
android:textStyle="bold" />
<TextView
android:id="#+id/contact_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/contact_mobile"
android:text="searchbbc1881#gmail.com"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:weightSum="1">
<ImageButton
android:id="#+id/call"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:layout_weight=".5"
android:background="#drawable/shape_button"
android:src="#drawable/ic_email_black_24dp"
/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="#+id/contact_email"
android:layout_toRightOf="#id/call"
android:layout_weight=".5"
android:background="#drawable/shape_button"
android:src="#drawable/ic_email_black_24dp"
/>
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/contact_profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".3"
android:background="#fff"
android:padding="1dp"
android:src="#drawable/ic_launcher_background" />
</LinearLayout>
</android.support.v7.widget.CardView>

Try to reorganize it this way:

How to fit my Layout to any Screen in Android

I'm building my own application game for Android, it's a Tic Tac Toe game.
my activities contains mostly ImageViews , all the images placed in the dir res\drawable-mdpi ONLY.
the rest of the drawable folders are empty.
my problem is that when i run the app on a 5.4 inch MDPI screen it works fine and it looks like this:
but when i run the app on another screen of different size for example this 4.65 inch XHDPI screen, it looks like this:
in the above activity i used LinearLayout and RelativeLayout, what should i do to fit my layout to any screen ?
thanks
thanks for editting the pictures
this is the code of the xml file of activity_board.xml:
<?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"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/board"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:text="#string/playersName"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:text="#string/playersPoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:text="#string/machinePoints"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp" >
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="310dp"
android:layout_marginTop="10dp"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="55dp" >
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="155dp"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="315dp"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="6dp" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="105dp"
android:text="#string/gameNumber"
android:textSize="25sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="390dp"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>

Are you using RelativeLayout?
You should
1. use RelativeLayout as the base container
2. put the "Player" and "System" score inside the same horizontal LinearLayout so that they won't overlap
3. Put the "End game" button as an element which align parent bottom
The screenshots you attached shows that it's a problem caused by the soft status bar. RelativeLayout would help and you should try to prevent hard-coding the dimensions in numbers but making the auto-adjust in RelativeLayout using margins, "layout_toLeftOf", "layout_toRightOf" and etc.

Create a drawable folder, just the word "drawable", in res and put your game images in there. That will make the game images the same across every device density.
Without looking at your XML, I would agree that you're probably using hardcoded dp values instead of sizing the layout with math, ie, weights, match_parent, alignParentRight, etc.
I have adjusted your XML to be easier. I did not plug it into a previewer or anything.
<?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"
android:background="#drawable/board_page_bg"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginLeft="ADJUST ME"
android:layout_marginRight="ADJUST ME"
android:background="#drawable/board"
android:orientation="vertical" >
<!-- Scoreboard -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp" >
<TextView
android:id="#+id/players_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:layout_alignParentLeft="true"
android:text="#string/playersName"
android:textSize="30sp" />
<TextView
android:id="#+id/players_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#id/players_name"
android:text="#string/playersPoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="172dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/machines_name"
android:text="#string/machinePoints"
android:textSize="25sp" />
<TextView
android:id="#+id/machines_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="50dp"
android:onClick="openChat"
android:layout_alignParentRight="true"
android:clickable="true"
android:text="#string/machineName"
android:textSize="30sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_1_empty" />
<ImageView
android:id="#+id/block2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_2_empty" />
<ImageView
android:id="#+id/block3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_3_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_4_empty" />
<ImageView
android:id="#+id/block5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_5_empty" />
<ImageView
android:id="#+id/block6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_6_empty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/block7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_7_empty" />
<ImageView
android:id="#+id/block8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_8_empty" />
<ImageView
android:id="#+id/block9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="touch"
android:src="#drawable/block_9_empty" />
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="ADJUST ME" >
<TextView
android:id="#+id/game_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="#string/gameNumber"
android:textSize="25sp" />
<TextView
android:id="#+id/count_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/countDown"
android:textSize="25sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/end_game"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/EndGame"
android:onClick="endGame"
android:src="#drawable/endgame_btn_1" />
</LinearLayout>
</LinearLayout>

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".

How can i make a layout like as give below in the picture?

I am actually trying to create a layout like this but it seems to scatter all over the place.
Any help or idea to optimize it will be greatly appreciated.
xml
<RelativeLayout
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<ImageView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/menu_normal"
android:onClick="onClickContentButton" />
<ImageView
android:id="#+id/new_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="actionPerformed"
android:src="#drawable/invite_friends_normal" />
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Profile"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/header"
android:background="#049080"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="My profile"
android:textColor="#FFFFFF"
android:textSize="15sp" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView1"
android:orientation="vertical"
android:weightSum="2" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/darker_gray"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/com_facebook_profile_picture_blank_square" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/bang_selected" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_toRightOf="#+id/imageView1"
android:text="John smith"
android:textColor="#2D2D2D"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_below="#+id/textView2"
android:text="latitude:"
android:textColor="#2d2d2d"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/textView2"
android:text="longitude:"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Graphical layout

I would make the main layout be a relative layout.
The "My Profile" button would be the first object in the layout
The segment underneath that can be another relative layout in which you would specify the association of all the elements.
And the bottom map portion would be the map view
Within the second portion, use a mix of vertical and horizontal linear layouts to get the look you desire

Categories

Resources