I'm working on a UI that has a bunch of images and buttons, but since they're too long to fit on one screen, I decided to put it in a ScrollView. Problem is, once I do that, everything disappears except my first image. Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg"
android:baselineAligned="true"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/scrollView1">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:src="#drawable/header3000"
android:layout_gravity="center"
android:layout_marginTop="10dip"></ImageView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/websitetuneup"
android:layout_gravity="center_horizontal"></ImageView>
<Button
android:layout_width="wrap_content"
android:text="Read More" android:id="#+id/readmore_w1"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"></Button>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:src="#drawable/inboundmarketing"
android:layout_marginLeft="15dip"></ImageView>
<Button
android:layout_width="wrap_content"
android:text="Read More" android:id="#+id/readmore_w2"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="15dip"></Button>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:src="#drawable/socialmedia"
android:layout_marginLeft="15dip"></ImageView>
<Button
android:layout_width="wrap_content"
android:text="Read More" android:id="#+id/readmore_w3"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"></Button>
</LinearLayout>
</ScrollView>
</LinearLayout>
Here's what it looks like
Notice how the first image appears fine, but all the rest are minimized into a small portion to the right of the image.
How should I fix this? Thanks in advance for your help, and sorry for the long post
The orientation of second LinearLayout is not defined. It seems it is takes as horizontal by default. Try the veritical one.
Related
Sorry in advance I need to include a few pictures to make my problem a little easier to understand. I am using a linear layout for my custom rows and it is giving me lots of trouble trying to get the rows to look how I want. Currently it looks like this
Please forgive the quick paint picture I am about to show but it is how I would like the layout to look.
I would like to add the name textbox above the dog picture, and a time stamp textbox above each of the 1 and 2. Whenever I try to add textboxes to display this it really messes with the layout. The textbox above the dog picture always wants to go to the right or left of the dog image and push the image to the middle of the page and the buttons get spread out further. I do not have much experience with this layout I typically do relative layout where I can drag and drop pieces. Any advise or help is greatly appreciated.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="150dip"
android:layout_height="150dip"
android:id="#+id/dogimage"
android:clickable="true"
android:layout_alignParentLeft="true"
android:background="#drawable/dogpic"
android:onClick="sendProfile"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num1"
android:background="#drawable/num1"
android:clickable="true"
android:onClick="NumberOne"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
<ImageButton
android:layout_width="75dip"
android:layout_height="75dip"
android:id="#+id/dog1num2"
android:background="#drawable/num2"
android:clickable="true"
android:onClick="NumberTwo"
android:layout_marginLeft="10dp"
android:layout_marginTop="75dp"
android:scaleType="fitXY" />
</LinearLayout>
You need to wrap your imageview/textview combo in a LinearLayout. And you should set the imageButton using src, not background. Do it like this:
<?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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/dogimage"
android:layout_width="150dip"
android:layout_height="150dip"
android:clickable="true"
android:onClick="sendProfile"
android:scaleType="fitXY"
android:src="#drawable/dogpic" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num1"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num1" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timestamp 1" />
<ImageButton
android:id="#+id/dog1num2"
android:layout_width="75dip"
android:layout_height="75dip"
android:layout_marginLeft="10dp"
android:clickable="true"
android:onClick="NumberOne"
android:scaleType="fitXY"
android:src="#drawable/num2" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
So I'm having a problem that is driving me crazy. Knowing the purpose of my app isn't important/relevant so I'll just paste my code from the xml file. The layout is a RelativeLayout, but the problem I'm having is inside of this LinearLayout.
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background_orange"
android:id="#+id/rel_layout" >
<RelativeLayout
android:id="#+id/layout_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="false"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/component_1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:src="#drawable/source1"
/>
<ImageView
android:id="#+id/component_2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#id/component_1"
android:src="#drawable/source2"
android:layout_alignRight="#id/component_1"
android:layout_marginRight="-50dip"
android:layout_marginBottom="-25dip"
/>
</RelativeLayout>
<LinearLayout
android:id="#+id/problemIsHere"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal"
>
<EditText
android:id="#+id/edit_text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="What's your question?"
android:imeOptions="actionDone"
android:inputType="textCapSentences|textAutoComplete"
android:textSize="25sp"
android:layout_gravity="left"
android:textStyle="bold" />
<ImageButton
android:id="#+id/image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:layout_weight="0"
android:layout_gravity="right"
android:background="#drawable/source3"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#id/problemIsHere"
android:gravity="center"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/source4"
android:onClick="computeUserInput" />
<ImageButton
android:id="#+id/image_button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image_view"
android:layout_alignTop="#id/image_view"
android:layout_marginLeft="-2dip"
android:background="#drawable/voice_recognition_touse"
/>
</RelativeLayout>
Again, this is nested inside of the parent, RelativeLayout. In the preview, when clicking on the "Graphical Layout" tab, this looks like exactly what I want; EditText to the left of a small ImageButton, with correct proportions and margins. However, when I run this on my device, the LinearLayout is REVERSED, meaning now that the EditText is to the RIGHT of the ImageButton. The proportions and margins are still accurate though. Does anyone know what is going wrong here?
Note: I've already cleaned and refreshed my project; this was ineffective. I've also tried removing the layout_gravity attributes, and that did nothing.
Thanks
I have a layout with a image of the card on the left hand side. The right hand side has 2 buttons on top. Then 2 images below them, and one image below the 2 images.
I would like the 2 images and 1 image to get centered.
The row with 1 image gets centred all right.
PARTIAL CODE
<LinearLayout
android:id="#+id/mainLayout"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/viewfacebook"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/facebook" />
<ImageView
android:id="#+id/viewmail"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/mail" />
</LinearLayout>
I create a horizontal container for the 2 images and set it's gravity to center. This is not working. I also tried to set the gravty to center on the 2 images. But.... they always stay to the left hand side.
THE WHOLE XML CODE
<?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">
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"></LinearLayout>
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#drawable/background"
android:orientation="vertical">
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/cardpic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:src="#drawable/bio" />
</LinearLayout>
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/buthome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ok" />
<ImageView
android:id="#+id/butaffirmation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/affirmation" />
</LinearLayout>
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal" />
<ImageView
android:id="#+id/viewfacebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/facebook" />
<ImageView
android:id="#+id/viewmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/mail" />
</LinearLayout>
<ImageView
android:id="#+id/vietwitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/twitter" />
<LinearLayout
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/housetext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" *A long and happy marriage or commitment is in your future.\n*Emotional security (loyalty and trust) exists in your relationship.\n*You will have a stable home and family life.\nThe marriage card is about a person who is either going get married or who really cherishes the whole institution of marriage."
android:textColor="#ff000000"
android:textSize="18px"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/cardtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" *A long and happy marriage or commitment is in your future.\n*Emotional security (loyalty and trust) exists in your relationship.\n*You will have a stable home and family life.\nThe marriage card is about a person who is either going get married or who really cherishes the whole institution of marriage."
android:textColor="#ff000000"
android:textSize="20dp"
android:textStyle="bold" />
</ScrollView>
</LinearLayout>
It's a little hard to follow your XML, but this should get you on the right track, give this a try.
If you are using linear layouts...
Nest the images you want to center side by side in a horizontal linear layout
Assign a layout weight to each image
You might have to play around with the layout_widths and heights using match_parent (or fill depending on your target API), and also with the layout_gravity and gravity params.
<LinearLayout android:gravity="center" ... orientation="horizontal">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/viewmail"
android:src="#drawable/mail" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/vietwitter"
android:src="#drawable/twitter" />
</LinearLayout>
Edited the code within the question. I had a rough time trying to see what you were trying to do. A picture for the question might have been very straight forward (imo). Now to answer your question, understand that LinearLayouts have by default left-justification. If you have multiple LinearLayouts nested, take extra caution when deciding their widths and heights, as they take precedence over gravity.
I have built a layout that can display a picture on three different areas. It didn't matter when I used an imageview but somehow it does not work with a surfaceview. There are basically three areas like below, and the third area(or area no.3) is where I want to put a picture through surfaceview
http://imageshack.us/m/202/3189/000hjb.jpg
A picture made by SurfaceView could be displayed on the area no.1, but not on 2 and 3 like below.
http://img215.imageshack.us/img215/9891/111lcv.jpg
Below is a screenshot that I tried with an imageview, and they had no problem.
http://imageshack.us/m/199/7231/222mlr.jpg
I have no idea to figure out. What I want to do is putting a picture made by SurfaceView on area 2 and 3 whose id is tableRow_cardImage - TableRow - and assistant_cardboard - LinearLayout.
If anyone has an idea to figure out this, would you please help me?
Thanks in advance and below is my xml code of layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:id="#+id/header" android:layout_height="wrap_content" android:layout_width="match_parent">
<TextView android:id="#+id/header_life_title" android:textSize="20sp" android:text="Life: " android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
<TextView android:id="#+id/header_life_value" android:textSize="20sp" android:text="20" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
<Button android:text="Inc." android:id="#+id/header_btn_inc" android:layout_width="wrap_content" android:layout_height="35dp" android:layout_gravity="center_vertical">
<Button android:text="Dec." android:id="#+id/header_btn_dec" android:layout_width="wrap_content" android:layout_height="35dp">
<Button android:text="Put L." android:id="#+id/header_btn_putLand" android:layout_width="wrap_content" android:layout_height="35dp">
<Button android:text="Remove L." android:id="#+id/header_btn_removeLand" android:layout_width="wrap_content" android:layout_height="35sp">
<LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:id="#+id/land_space">
</LinearLayout>
</LinearLayout>
<ScrollView android:id="#+id/scrollView1" android:layout_height="wrap_content" android:layout_width="match_parent">
<LinearLayout android:id="#+id/linearLayoutInScrollview"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/cardboard">
<LinearLayout android:layout_height="40dp"
android:layout_width="wrap_content" android:id="#+id/layout_menu">
<Spinner android:id="#+id/spinner_creature"
android:layout_height="wrap_content"
android:layout_width="130dp">
<Button android:id="#+id/btn_creature"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Cast">
<Spinner android:id="#+id/spinner_noncreature"
android:layout_height="wrap_content"
android:layout_width="130dp">
<Button android:id="#+id/btn_noncreature"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Cast">
<Button android:id="#+id/btn_delete"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Del."></Button>
</LinearLayout>
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardImage">
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardData">
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardImage2">
<TableRow android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/tableRow_cardData2">
</TableLayout>
<LinearLayout android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/assistant_cardboard"
android:orientation="vertical" >
<ImageView android:src="#drawable/icon" android:layout_height="wrap_content" android:id="#+id/imageView1" android:layout_width="wrap_content"></ImageView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
While I was working on it, I think this is the problem of using SurfaceView with ScrollView. Since SurfaceView is a view that can even draw the entire screen(or over the screen), I think android doesn't want to have it in the inside of ScrollView.
You are correct, a SurfaceView is not meant to be placed inside a ScrollView. This confirms and this gives you more advice on what you can do instead.
If you have any knowledge of XML layouts in Android, please take a quick look. I have the following XML layout that displays an image, then displays an address and phone number below it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/mainbackground"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/view1">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50px"
android:padding="12dip"
android:background="#FFFFFF">
</ImageView>
<TextView android:id="#+id/addressView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20px"
android:padding="12dip"
android:textColor="#000000"
android:background="#FFFFFF">
</TextView>
<TextView android:id="#+id/phoneView"
android:textColor="#0000FF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/addressView"
android:layout_centerHorizontal="true"
android:padding="12dip"
android:background="#FFFFFF">
</TextView>
</RelativeLayout>
Currently, I am just using the android:padding and android:background tags to set a white background behind the ImageView and both TextViews. This works fine for me for the image view. For the text views, they obviously have 2 individual borders/backgrounds. However, I would like to set one white background image behind both text views instead of having two individual borders/backgrounds. See this image for more details on what I would like the final result to look like:
http://img84.imageshack.us/i/homeview.png/
I am just not sure how to "wrap" this white box around both text views. Obviously, the android:padding and android:background tags might not be the way to do this. If anyone could help, it would be greatly appreciated!
Set the image as a background for a LinearLayout that contains both TextViews and you are set.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/button_blue"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/view1">
<ImageView android:id="#+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50px"
android:padding="12dip"
android:background="#FFFFFF">
</ImageView>
<LinearLayout
android:id="commonBackgroundImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:layout_below="#id/imageView1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20px"
android:padding="12dip"
android:orientation="vertical">
<TextView android:id="#+id/addressView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="text1">
</TextView>
<TextView android:id="#+id/phoneView"
android:textColor="#0000FF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text2">
</TextView>
</LinearLayout>
</RelativeLayout>