I have a horizontal LinearLayout nested in a vertical LinearLayout nested in a RelativeLayout. It has 5 imageviews which fill the width and I'm using weight to space evenly. I randomly fill between 1 and 5 of the imageviews at runtime. They remain spaced evenly but instead of hugging the left side of the parent, which I read in the docs is the default, they hug the right. I've tried gravity:left and scaleType="fitStart". I've tried nesting this layout in another relative layout and using alignParentLeft. Using a RelativeLayout instead of the LinearLayout will align the images to the left but doesn't space them evenly so isn't an option.
Below are the relevant pieces of my XML file
<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"
tools:context=".Game1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="7">
<LinearLayout
android:id="#+id/animal_images_row1"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="0dip"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
>
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block1"
android:contentDescription="#string/ph"
android:scaleType="centerInside"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block2"
android:contentDescription="#string/ph"
android:scaleType="centerInside" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block3"
android:contentDescription="#string/ph"
android:scaleType="centerInside"/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block4"
android:contentDescription="#string/ph"
android:scaleType="centerInside" />
<ImageView
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/block5"
android:contentDescription="#string/ph"
android:scaleType="centerInside" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I removed the rest of the xml file for brevity. Thanks in advance for the help!
EDIT: Add screen shots.
Thanks for the comments! Every little insight helps =) I couldn't figure out why they were sticking to the right and nothing I would do could force them to the left and it turns out that in my code I had
imgview.bringToFront();
as a temporary fix while I was figuring the layout out and after removing that line they stuck to the left properly.
Related
Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)
as you can see the image on the right is shifted upwards, how do i stop this?
Here's the layout file im using:
<?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" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
</LinearLayout>
I am going to be using more rows of images hence the extra LinearLayout
Use layout_weight to divide your layout equally. Try the following code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
</LinearLayout>
</LinearLayout>
Also, never use sp for specifying layout dimensions. Use dp instead.
You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them.
so,try this. It will work.
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
</LinearLayout>
To fix Vertical alignment :
Use android:layout_height="match_parent" in your ImageView
by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"
Now Question arises why the height will be same for both ImageViews ?
Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !
and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !
To Fix Horizontal alignment :
use android:layout_weight="equal weight value for btoh"
change your code to
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
I have a relative layout, and inside it i place 3 items, 2 imageviews and one scrollview.
My layout is like this...
<?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:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:baselineAligned="true"
android:background="#drawable/background">
<RelativeLayout
android:id="#+id/logosLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="16dp"
android:gravity="center">
<!-- An image will be placed here -->
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:background="#33ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/up" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_margin="8dp"
android:fadingEdgeLength="32dp"
android:scrollbars="none" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/hotelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#drawable/button_background"
android:contentDescription="#string/hotelBtnDesc"
android:gravity="center"
android:src="#drawable/icon1" />
<TextView
android:id="#+id/hotelBtnDescTxtVw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:text="#string/hotelBtnDesc"
android:textColor="#ffffff"
android:textSize="14sp" />
<!-- more scrollview items -->
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/down" />
</RelativeLayout>
</LinearLayout>
The above code produces the view shown here:
You may note that the arrows are not aligned in the center, but are slightly moved to the right. Why is that, and how can I fix it ? Note that i have already used android:layout_centerHorizontal="true" to my imageviews.
Thank you in advance
Its problem with your
android:layout_margin="8dp"
remove it from both scrollview and imageView
and pass it to RelativeLayout direct.
or add
android:layout_marginTop="8dip"
android:layout_marginBottom="8dip"
in your RelativeLayout.
and pass
android:layout_centerHorizontal="true"
to your scrollview
they are aligned to the center if you put the marginRight into consideration, try adding android:layout_margin="8dp" to the arrows.
u need to set image view that is under the Relative layout set this image view width fill parent.
Try removing android:layout_weight="1" from your RelativeLayout and see if it works.
In your LinearLayout, the attribute android:orientation="horizontal" causing your display to be aligned horizontaly. Therefore your RelativeLayout is in center but since its shared with another layout thats why you cant note the difference. If you completely remove the first RelativeLayout (the one with id logosLayout) then i hope you'll see the second layout in center.
So, first you need to define the hierarchy of layout you require and then adjust your views accordingly.
It seems problem with your android:layout_margin="8dp" for your scrollview only and pass it to RelativeLayout direct but instead of using margin use padding = "8dp".
I am showing data from DB in an Activity. I want a Table and buttons on bottom. For data thought TableLayout would be best option for it. I added TableLayout to HorizontalView & to ScrollView making it scroll vertically & Horizontally. Am adding all rows dynamically - including header. This part is working fine.
I want is when the contents is less than the screen width, it should yet occupy the whole screen width. For eg. If a table fits well in Portrait mode then ofcourse for Landscape mode their will be blank space left on the right. I don't want that space to eb empty, instead to occupy by all columns. If the row width is greater than the screen width then no issues at all - as horiontal scrollbar appears.
I tried few variations, but nothing helped out. Any idea what settings to make to utlize all space (if at all avbl) & show it.
And yes, 1 more issue of horizontal scrollbar, it appears just on the last row. I want it to
appear below last row - so the border of last row is visible. My XML :
<?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:orientation="vertical">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:scrollbars="horizontal|vertical">
<HorizontalScrollView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="10dp" android:layout_marginBottom="10dp" >
<TableLayout android:id="#+id/browseTable" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_marginBottom="20dp"
android:background="#FF0000" android:stretchColumns="1,2,3">
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:gravity="center"
android:layout_marginTop="15dp">
<Button android:id="#+id/browseAddBtn" android:text="Add" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseViewBtn" android:text="Edit" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginRight="10dp" />
<Button android:id="#+id/browseReturnBtn" android:text="Return" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
OUTPUT :
I found one thing while solving your problem, about TableLayout when used inside a HorizontalScrollView. The android:stretchColumns is not working when we use Table Layout inside Horizontal Scroll View. So that you are getting blank space when screen is rotated or columns have less width data.
I hope you understand this. I am trying to solve this problem by replacing Horizontal Scroll View with some other. I will post answer if i get solution. Bye.
EDIT
Hi Tvd finally I got the solution for your problem. make below changes to your XML layout file.
In <HorizontalScrollView>
use
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
Use stretchColumns = "*" in TableLayout if you want all columns to be stretched.
Bye. :-)
I did some changes. some of your problem will solve by below layout 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:orientation="vertical" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="horizontal|vertical" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<TableLayout
android:id="#+id/browseTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#FF0000" >
</TableLayout>
</HorizontalScrollView>
</ScrollView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#android:style/ButtonBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/browseAddBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Add" />
<Button
android:id="#+id/browseViewBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="Edit" />
<Button
android:id="#+id/browseReturnBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Return" />
</LinearLayout>
I'm trying to make an Android layout: 3 components inside a vertical LinearLayout. The center component is a ScrollView that contains a TextView. When the TextView contains a significant amount of text (more than can fit on the screen), the ScrollView grows all the way to the bottom of the screen, shows scrollbars, and pushes the last component, a LinearLayout with a Button inside, off the screen.
If the text inside the TextView inside the ScrollView is short enough, the button at the bottom of the screen is positioned perfectly.
The layout I'm trying to achieve is:
The XML for the layout I've written is:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:text="Title />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:textColor="#FFFFFF"
android:background="#444444"
android:padding="10dip" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button android:id="#+id/login_button"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:text="#string/next_button"/>
</LinearLayout>
</LinearLayout>
The scrollview is the second view object and is set to wrap_content, which is more than the screen.
I recommend a RelativeLayout. Top textview first with android:alignParentTop="true", the bottom LinearLayout next with android:alignParentBottom="true" and the scrollview listed last in the xml with the value android:alignBelow="#id/whatYouCallTheHeader.
This will align the bottom bar at the bottom of the screen, and the header at the top, no matter the size. Then the scrollview will have its own place, after the header and footer have been placed.
you should go for relativeLayout rather than LinearLayout. And you can use some properties like alignBelow and all.
Try adding a layout weight into the ScrollView ie.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
This worked for me in a situation almost identical to the one you're presenting but left me wondering why, because it is counter-intuitive that increasing the layout weight of a control from 0 (the default if you don't specify a layout_weight) to 1 should make a control which is already using too much space smaller.
I suspect the reason it works is that by not specifying a layout_weight you actually allow the layout to ignore the size of the scroll view relative to other controls and conversely if do specify one you give it permission to shrink it in proportion to the weights you assign.
![Fixed Header-Footer and scrollable Body layout ][1]
This is what you are looking for . Most of the app in android had this type of layout ,
a fixed header and footer and a scrollable body . The xml for this layout is
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:background="#5599DD"
android:layout_height="fill_parent">
<!-- Header goes here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:textSize="20sp"
android:layout_gravity="center"
android:text="Title" />
<!-- Body goes here -->
<ScrollView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:text="#string/lorem_ipsum"
android:textColor="#FFFFFF"
android:padding="10dip" />
</ScrollView>
<!-- footer goes here -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/login_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentRight="true"
android:text="Button"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I'm just beginning Android and have gotten myself stuck. I've made a simple app/view. The idea is draw a line-maze in the top, with motion buttons on the bottom. My app only draws an x with a couple lines in the frame, but that works. The problem is that my buttons are being drawn too far down, and are clipped in height.
I assume the problem is all in my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<none.maze.MazeView
android:id="#+id/maze"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:text="#string/maze_layout_text_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_weight="1"
/>
<Button
android:id="#+id/forward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:layout_weight="1"
/>
<Button
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>
I think you shouldn't use layout_height="fill_parent" and layout_weight at the same time. Try to set layout_height="0dip" and layout_weight="1" for the FrameLayout and layout_height="wrap_content" for the lower LinearLayout. The lower LinearLayout mustn't have the layout_weight attribute.
Use Hierarchy Viewer to debug your layout. Its pretty cool.
Your entire layout is just way too bloated and ineffective. You use way too many ViewGroups. I recommend reading about RelativeLayouts and especially the entire Layout Tricks series.