In Android development, I have a LinearLayout as follows:
<?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="horizontal">
<ListView
android:id="#android:id/list"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:paddingRight="0dp"/>
<TextView
android:id="#+id/text_inprogress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Congress API"/>
<LinearLayout
android:id="#+id/side_index"
android:layout_width="50dp"
android:layout_height="fill_parent"
android:background="#c3c3c3"
android:gravity="center_horizontal"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
And index item
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/side_list_item"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:padding="3dp"
android:textSize="12sp" />
I have a side index on the right side. It's A to Z. However the actual UI only shows A to V because no enough space. Padding of each item is 3. How can I make the side index to fit the screen?
If I change the padding to 1dp in index item text view, it will become too small. All I want is automatically fit the screen side. How can I make it happen?
how about making the linearlayout able to scroll vertically ? If the answer is affirmative, then go ahead and add a scrollview outside the linearlayout ~
Related
I have an issue with my app where the button layout is not evenly spaced when used on different devices.
As shown, the first screenshot shows the layout evenally spaced out on an older, smaller screened android smartphone.
The second screenshot from a Nexus 4, shows the large white space under the bottom button that is uneven.
I thought I had set my layout to be even but it seems it isnt.
UPDATE:
How to set a scroll view with the two linear layouts in it.
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="84dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgLink"
android:layout_width="78dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/appointmentmanimenuicon" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="75dp"
android:gravity="center"
android:text="Appointments"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30sp" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnaddAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointmentmenu"
android:src="#drawable/appointmentmenu"
android:text="Add Appointment"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnviewAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointviewicon"
android:src="#drawable/appointviewicon"
android:text="View Appointments"
android:layout_weight="1" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Your nested linear layout with the buttons has a fixed height of 400dp. On the small device this leaves a smaller amount of space at the bottom then it does on the larger nexus4.
If you change your linear layout with the buttons to use a height value of fill_parent it should place the buttons evenly in the space remaining in the parent layout underneath the header ( contacts).
Your second LinearLayout has a fixed height of 400dp. The bottom edge of that layout will always be at 484dp (taking into account the first LinearLayout), and will leave extra space after it on any screen larger than 484dp tall.
I'm not entirely clear on what your desired layout is, but believe what you want is to center the second LinearLayout within the parent LinearLayout.
To do so, add android:layout_gravity="center_vertical" like so:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:layout_gravity="center_vertical" >
You should also consider removing the ScrollView, as that content should never need to scroll.
I'm making a layout (XML file) in Android that has two child views (one on the right side of the screen and one on the left). I want the view on the right to take up a pre-determined space (in dp) and have the view on the left take up all the remaining space up to a limit, at which point it will stop expanding and the two layouts will just move further apart as the screen gets larger.
The odd thing is this would be very easy if I wanted the view on the right side to be the one that expands, and the view on the left to be the one that takes up a preset space. If you set each view to the width you want (in a horizontal linear layout) Android will automatically shrink the one on the left in the event that both views don't fit.
I would like to do this in one layout file; this layout is already designed for displays between sw512dp-land and sw765dp-land.
The code below would work if I could find a way to make Android shrink the layout on the left (when layouts both cannot fit at the size specified). But by default the system will shrink the layout on the right first.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/left"
android:layout_width="150dip"
android:layout_height="fill_parent"
android:background="#color/red" >
</RelativeLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
This code (from #Lokesh) would work if I didn't need the layout on the left to stop expanding at a certain point.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
It would also be nice to know if anyone thinks this isn't possible so I can resort to doing it pragmatically or changing my approach to the layout.
Thanks!
This works for me. I've set the right layout to 100dip, change as per your needs.
<?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
EDIT 1: I used the background color just to distinctly show the layouts. Not necessary at all. :)
EDIT 2: If you want a way to expand the left layout upto only a limit then try this -
<?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right">
<LinearLayout
android:id="#+id/inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#color/yellow">
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This will expand only to a limit"
android:maxWidth="300dip"
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#color/red" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
Here you need to place your widgets in inner layout and this is what it looks like in different screens.
3.1in HVGA
5.2in QVGA
Colors used : red(#FFFF00), yellow(#FFFFFF00), green(#FF00FF00).
I have a vertical LinearLayout which has a list view and one ImageView at the bottom and one at top and the list view filled up the space left behind.
It looks like this:
<LinearLayout layout_height="match_parent" layout_width="#dimen/width"
orientation="vertical">
<ImageView layout_height="#dimen/width" layout_width="#dimen/width" id="#+id/top">
<ListView android:layout_height="0px"
android:background="#00ffff"
android:layout_width="#dimen/width"
android:layout_weight="1" />
<ImageView layout_height="#dimen/width" layout_width="#dimen/width" id="#+id/bottom" layout_gravity="bottom|center_horizontal">
It works fine whenever I have the list view visible.
But whenever I set the ListView to visibility gone, the 'bottom' ImageView will popup to be just underneath the top Image View.
My question is why the bottom ImageView does not stay at the bottom despite I said ' android:layout_gravity="bottom|center_horizontal"' I have looked at hierarchyViewer, the height of the parent does match the screen's height. So the bottom Image view should honor the android:layout_gravity="bottom|center_horizontal" and stay at the bottom, right?
As alternative to my comments, you can replace your LinearLayout with a RelativeLayout. Agarwal already suggested this, but his code is a bit of a mess and at the time of this writing not correct in terms of what you want it to do.
Give below code a try. When you set the ListView to gone, the top and bottom images will stay positioned identical to when it's visible. Do note that I replaced the #dimens/width references, so you might want to put those back in.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:id="#+id/top" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_above="#+id/bottom"
android:layout_below="#+id/top" android:background="#00ffff" />
<ImageView android:id="#+id/bottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
The best solution is to use ralaticelayout for this::::
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0000FF">
<ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/top" />
<ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/bottom" android:layout_alignParentBottom="true"/>
<ListView android:layout_height="fill_parent"
android:background="#00ffff"
android:layout_width="fill_parent"
android:layout_below:#id/top android:layout_above:#id/bottom />
</RelativeLayout>
I have a LinearLayout that has 3 layouts at the top. (So the grey bar at the top is split into 3 pieces) Each will have a button in them. I only have 2 with buttons in them at the moment.
This is what it should look like (imagine another button at the top right) The top bar with the buttons in it is 60dp high:
And I want to have a LinearLayout under it. But when I add one and set it at
android:layout_marginTop="60dp"
Thinking it would just set itself under the top grey bar, it moves the middle layout over. The third layout is all the way off the screen.
Like so:
But I want it to look like this (sorry for my lack of MS Paint skills):
So how do I set it so the LinearLayout on the bottom doesn't interfere with the Layouts above it?
XML:
<?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:background="#drawable/background"
android:baselineAligned="true"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="120dp"
android:layout_height="60dp"
android:background="#drawable/topbar"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/camerabuttonmew"
android:background="#null"
android:layout_margin="5dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="120dp"
android:layout_height="60dp"
android:background="#drawable/topbar"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#null"
android:src="#drawable/homebuttonnew"
android:layout_margin="5dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/topbar" >
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="60dp" >
</LinearLayout>
Have you considered using a Relative Layout and with the images at the top and the LinearLayout under it. A helpful tutorial, http://www.higherpass.com/Android/Tutorials/Exploring-Android-Linearlayout-And-Relativelayout/
Create a vertical linear layout with two sub layouts, another horizontal linear layout for the buttons in the top row, and whatever layout you want for the area under the buttons. Right now your outer layout is a horizontal linear layout so every time you add subviews/layouts it pushes everything over.
<LinearLayout
android:id="#+id/outer_container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
...
</LinearLayout>
<FrameLayout
android:id="#+id/everything_else"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
...
</FrameLayout>
</LinearLayout>
The everything else layout doesn't need to be a frame layout, i'm just using it as a placeholder.
I want to implement this: A ScrollView that contains many elements (ImageViews, TextViews, EditTexts etc) and then after the ScrollView some buttons (which are custom ImageViews) that appear always exactly at the bottom of the screen.
If I use the android:fillViewport="true" attribute, then if the elements of the ScrollView are too big to fit in the screen size the buttons get invisible . If I use the android:Weight=1 attribute then the ScrollView gets only 50% of the Screen when the screen is big and it can fit (I want the buttons to take a small percentage, about 10%). If I set the android:Weight to bigger values then the buttons appear very small.
Please help! Maybe it is something simple that I overlooked but I’ve been banging my head for hours!
Just created and tested it. Looks like 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="match_parent">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button2"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons">
<!--Scrollable content here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="test text"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo Welt"
/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go next page"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
This worked for me. Give the scroll view a weight of 1. Put all the other widgets following the scroll view in a layout. The scroll view will grow enough to not block the rest.
Widgets in scroll view and rest at bottom
scrollview cannot fit the screen because you put it on a linear layout, so linear layout fit in the screen,
just try to make scrollview as root elemen on xml layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Here you can put some XML stuff and BOOM! your screen fit to scrollview -->
</LinearLayout>
</ScrollView>
If you do not want to use RelativeLayout, it is better to use LinearLayout. This method is better in my opinion.
Just set the layout_weight to one