Develop Reference

Unable create layout with image and text for listvieitem

<?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="90dip"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/rowcontact_txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:text="Usama Sadiq"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rowcontact_imgLocationIcon"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_below="#+id/rowcontact_txtName"
android:layout_marginLeft="10dip" />
<TextView
android:id="#+id/rowcontact_txtLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rowcontact_txtName"
android:layout_toRightOf="#+id/rowcontact_imgLocationIcon"
android:text="Dubai"
android:textColor="#898788"
android:textSize="11.5dp" />
<ImageView
android:id="#+id/rowcontact_imgIcon"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignBottom="#+id/rowcontact_txtLocation"
android:layout_marginLeft="94dp"
android:layout_toRightOf="#+id/rowcontact_txtName" />
</RelativeLayout>
</RelativeLayout>
i am trying to create layout for list-view item but i am not able to fix position of image and text with three different Position please tell me solution how to fix it. i have to create listviow item i am able to display list-view but like given screen
i have all icon an all but am unable to fix potion of text-view and image view like given screen

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="2"
android:layout_margin="5dp"
>
<TextView
android:id="#+id/rowcontact_txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Usama Sadiq"
android:textColor="#3a3838"
android:textSize="15dp"
android:textStyle="bold" />
<TextView
android:id="#+id/rowcontact_txtLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rowcontact_txtName"
android:layout_toRightOf="#+id/rowcontact_imgLocationIcon"
android:text="Dubai"
android:textColor="#898788"
android:textSize="11.5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

ImageView on top of another imageview in Android

I am having a navigation drawer (sliding menu) with header set in my app. I am trying out the following for the headerView.xml
I am setting a background image to the relativeLayout from a particular URL. Instead I would like to have ImageView like below:
By doing this I can use picasso library even for background image that I receive from an URL. This way the image loading is faster I don't need to save the background to any sd card etc.
Here is what I have right now:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LayoutforbgImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:baselineAligned="false"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/LinearLayoutforImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
tools:ignore="RtlSymmetry,RtlHardcoded" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/profilepic" />
</LinearLayout>
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/LinearLayoutforImage"
android:gravity="left"
android:paddingLeft="5dp"
android:paddingTop="16dp"
android:text="My Name My Name"
android:textColor="#FFFFFF"
android:textStyle="bold"
tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textforprofile"
android:layout_toRightOf="#+id/LinearLayoutforImage"
android:gravity="left"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:text="myname#abc.com"
android:textColor="#FFFFFF"
android:textStyle="bold"
tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />
</RelativeLayout>
I am setting background image to layout for: LayoutforbgImage
using:
headerLayout = (RelativeLayout) header.findViewById(R.id.LayoutforbgImage );
BitmapDrawable background = new BitmapDrawable(decodeBase64(coverimage));
headerLayout.setBackgroundDrawable(background);
headerprofileimage = (ImageView) header.findViewById(R.id.imageforprofile);
Picasso.with(this).load(profileImage).placeholder(R.drawable.profilepic).error(R.drawable.profilepic).into(headerprofileimage);
How do I create the ImageView for background image so that it fits perfectly in the layout specified like above?

Try this layout i hope it will help you
<?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:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/top_header_bg" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginRight="20dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>

hi try the following code it will help you i didn't make any changes. i simply add an ImageView to your layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LayoutforbgImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:baselineAligned="false"
android:orientation="horizontal" >
<ImageView
android:id="#+id/your_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#drawable/top_bar" />
<LinearLayout
android:id="#+id/LinearLayoutforImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="10dp"
tools:ignore="RtlSymmetry,RtlHardcoded" >
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#drawable/images12" />
</LinearLayout>
<TextView
android:id="#+id/textforprofile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/LinearLayoutforImage"
android:gravity="left"
android:paddingLeft="5dp"
android:paddingTop="16dp"
android:text="My Name My Name"
android:textColor="#FFFFFF"
android:textStyle="bold"
tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textforprofile"
android:layout_toRightOf="#+id/LinearLayoutforImage"
android:gravity="left"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:text="myname#abc.com"
android:textColor="#FFFFFF"
android:textStyle="bold"
tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />
</RelativeLayout>

Try this way hope it will solve your problem
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/topBarRelative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:src="#drawable/right_top_bg" />
<ImageView
android:id="#+id/imageforprofile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="9dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="9dp"
android:layout_toRightOf="#+id/imageforprofile"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textforprofile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:text="My Name My Name"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="#+id/textforprofileemail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="myname#abc.com"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="#+id/topBarRelative"
android:layout_margin="8dp"
android:background="#drawable/content_bg"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
Screen shot from Eclipse

why is my relativeLayout doesn't appear below its sibling linearLayout?

I have the following 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="#color/blue_bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<com.my.view.text.MyTextView
android:id="#+id/whyResgisterHeaderText"
style="#style/textOnBg"
android:layout_marginTop="25dp"
android:text="WHY REGISTER?"
android:textStyle="bold" />
<com.my.view.text.MyTextView
android:id="#+id/whyResgisterBodyText"
style="#style/textOnBg"
android:text="Help us keep your account safe"
android:textStyle="normal" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:src="#drawable/signup_illu_why" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/gotItButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:background="#drawable/btn_selector"
android:padding="0dp" />
<com.my.view.text.MyTextView
android:id="#+id/gotItText"
style="#style/textOnBg"
android:layout_marginTop="25dp"
android:text="Got it"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#70a5b3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.my.view.text.MyTextView
style="#style/textOnBg"
android:layout_toLeftOf="#+id/skipIcon"
android:text="Skip"
android:textStyle="normal" />
<ImageView
android:id="#id/skipIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/signup_skip_icon" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I want my screen to look like:
but it looks like:
1) why cannot I see the fotter relativeLayout (with the "skip")
2) how can I center the gotItText textView? why isn't it center with current properties?

Because your root layout is a RelativeLayout.
You should declare an ID for the first LinearLayout, and then use layout_below property on the second one. Remember, their positions are relatives so if you don't specify the location of the second Linear, it will be paint over the first one.
If you want to get one linear below the other automatically use a LinearLayout as main root.

Edited you code, replaced the custom EditTexts, and removed the styles, set new heights to the layout and it seems to be working as you want.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/whyResgisterHeaderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="WHY REGISTER?"
android:textStyle="bold" />
<TextView
android:id="#+id/whyResgisterBodyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Help us keep your account safe"
android:textStyle="normal" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/gotItButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="5dp"
android:padding="0dp" />
<TextView
android:id="#+id/gotItText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:text="Got it"
android:textColor="#00bcfe"
android:textSize="16dp"
android:textStyle="italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#70a5b3" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/skipIcon"
android:text="Skip"
android:textStyle="normal" />
<ImageView
android:id="#id/skipIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

Horizontal Scroll View inside LinearLayout - Android

I have a custom list. I am trying to scroll horizontally only specific part. For Instance, in the below image iam trying to scroll horizontally just the orange box.
Here is my XML Layout: In the XML layout the Orange box starts "android:id="#+id/projected"
<?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="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="63dp"
android:layout_marginLeft="0dp"
android:background="#drawable/bkg_img_fullcell"
android:orientation="horizontal" >
<!-- Left Column -->
<LinearLayout
android:id="#+id/widget_lineupview_playerdata_container"
android:layout_width="wrap_content"
android:layout_height="#dimen/widget_lineup_table_row_height"
android:layout_toRightOf="#+id/sideView"
android:gravity="center_vertical"
android:layout_toLeftOf="#+id/projected"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4" >
<!-- rel 1 -->
<LinearLayout
android:id="#+id/playername1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:layout_toRightOf="#+id/sideView">
<com.cbssports.nflapp.ffb.MyTextViewBold
android:id="#+id/widget_lineupview_playerdata_playername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:inputType="text|textNoSuggestions"
android:layout_marginLeft="5dp"
android:maxLines="1"
android:text=""
android:textColor="#08233e"
android:textSize="15dp" />
</LinearLayout>
<!-- rel 2 -->
<LinearLayout
android:id="#+id/widget_lineupview_playerdata_playerStatsIconContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toRightOf="#+id/playername1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/widget_lineupview_playerdata_statusIconSuspended"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:src="#drawable/btn_s"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_toRightOf="#+id/sideView" >
<TextView
android:id="#+id/widget_lineupview_playerdata_playerPositionTeam"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:inputType="text|textNoSuggestions"
android:maxLines="1"
android:text=""
android:textColor="#333333"
android:textSize="12dp" />
<ImageView
android:id="#+id/widget_lineupview_playerdata_startingPitcherStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:src="#drawable/btn_baseballgraphic"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/sideView"
android:layout_width="#dimen/widget_lineup_table_status_column_width"
android:layout_height="#dimen/widget_lineup_table_row_height"
android:layout_alignParentLeft="true"
android:background="#drawable/bkg_img_rosterpos"
android:gravity="center" >
<!-- <Button -->
<com.cbssports.nflapp.ffb.VerticalTextView
android:id="#+id/widget_lineupview_playerdata_playerStatusButton"
android:layout_width="21dp"
android:layout_height="60dp"
android:layout_margin="0dp"
android:padding="0dp"
android:textColor="#004a8e"
android:textSize="11dp"
android:textStyle="bold"
android:gravity="bottom|center" />
</LinearLayout>
***<LinearLayout
android:id="#+id/projected"
android:layout_width="wrap_content"
android:layout_height="#dimen/widget_lineup_table_row_height"
android:background="#drawable/bkg_img_whiteoverlay"
android:layout_toLeftOf="#+id/percentStarted">
<TextView
android:id="#+id/widget_lineupview_player_h2h_stats_started_custom"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textStyle="bold"
android:textSize="16dp"
android:textColor="#333333" />
</LinearLayout>
<LinearLayout
android:id="#+id/percentStarted"
android:layout_width="wrap_content"
android:layout_height="#dimen/widget_lineup_table_row_height"
android:background="#drawable/bkg_img_whiteoverlay"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp">
<TextView
android:id="#+id/widget_lineupview_player_projected_custom"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textStyle="bold"
android:textSize="16dp"
android:textColor="#333333" />
</LinearLayout>***
</RelativeLayout>

Thank You g00dy, i can able to solve it by adding one LinearLayout inside horizontalScrollView it.
Here is my solution.
<HorizontalScrollView
android:id="#+id/horizontalScroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/horizontalScroll_linear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentRight="true" >
<LinearLayout
android:id="#+id/projected"
android:layout_width="wrap_content"
android:layout_height="#dimen/widget_lineup_table_row_height"
android:background="#drawable/bkg_img_whiteoverlay"
android:layout_toLeftOf="#+id/percentStarted">
<TextView
android:id="#+id/widget_lineupview_player_h2h_stats_started_custom"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textStyle="bold"
android:textSize="16dp"
android:textColor="#333333" />
</LinearLayout>
<LinearLayout
android:id="#+id/percentStarted"
android:layout_width="wrap_content"
android:layout_height="#dimen/widget_lineup_table_row_height"
android:background="#drawable/bkg_img_whiteoverlay"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp">
<TextView
android:id="#+id/widget_lineupview_player_projected_custom"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textStyle="bold"
android:textSize="16dp"
android:textColor="#333333" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>

You can also set the LinearLayout fillViewport to true and foregroundGravity to true (not sure if this last is necessary), and set the child LinearLayout gravity to right:
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="#dimen/IconM"
android:id="#+id/account_food_scroll"
android:layout_alignParentEnd="false"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/client_add_button_layout"
android:foregroundGravity="right"
android:layout_marginLeft="#dimen/PadM"
android:fillViewport="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="#dimen/IconM"
android:id="#+id/account_food_layout"
android:gravity="right">
</LinearLayout>
</HorizontalScrollView>

Layout does not match preview

I have designed an action sheet that appears when a user press a button. It is a separate xml file that I am including in another layout file. In the layout preview, it looks exactly as I want it. However, when it runs on my phone, the layout is messed up.
Here is how it should look:
And here is how it does look:
Does anyone have any idea why this might be happening?
Here is the layout code for the action sheet. The section that isn't displaying right is in the last linear layout
<?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="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/sheet_header" >
<ImageButton
android:id="#+id/left_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toLeftOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_left" />
<ImageButton
android:id="#+id/center_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:background="#android:color/transparent"
android:src="#drawable/alignment_center" />
<ImageButton
android:id="#+id/right_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toRightOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_right" />
<ImageButton
android:id="#+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/center_justified"
android:layout_marginRight="10dp"
android:src="#drawable/sheet_done_btn"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/sheet_background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp" >
<TextView
android:id="#+id/font_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="Font"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/size_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="Size"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/color_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:gravity="center"
android:text="Color"
android:textColor="#806014"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
And here is how it is included:
<FrameLayout
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_text_frame">
<include layout="#layout/edit_text"/>
</FrameLayout>
Edit: In addition to a fix for this specific problem does anyone know why the preview doesnt match the way it actually shows up on the phone?
Thanks for the help!

<?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="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/sheet_header" >
<ImageButton
android:id="#+id/left_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toLeftOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_left" />
<ImageButton
android:id="#+id/center_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:background="#android:color/transparent"
android:src="#drawable/alignment_center" />
<ImageButton
android:id="#+id/right_justified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:layout_toRightOf="#+id/center_justified"
android:background="#android:color/transparent"
android:src="#drawable/alignment_right" />
<ImageButton
android:id="#+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/center_justified"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/center_justified"
android:layout_marginRight="10dp"
android:src="#drawable/sheet_done_btn"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#drawable/sheet_background"
android:orientation="vertical" >
<TextView
android:id="#+id/font_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Font"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/size_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Size"
android:textColor="#806014"
android:textSize="20sp" />
<TextView
android:id="#+id/color_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Color"
android:textColor="#806014"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>

You could place the font, size, color TextViews into a Table Layout.