I'm new with Android (used to develop with Visual Studio...) and so far I have a doubt with the layouts:
What I want to do is a layout with a bar at the top (just to put some button or extra information) and a scroll view that fills the rest of the screen.
This is the way I am doing it so far:
<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=".Home" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white" >
<!-- I can put any button or text I want in here -->
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
android:background="#drawable/wallpaper" >
</ScrollView>
This is working as I expected, but my question is if I'm doing it the correct way or should I do it in a better way (most efficient).
Thanks in advance
Absolute positioning isn't recommended. For example, if you need to increase the height from 50dp to 100dp, you will have to change this value in several different places.
I know at least 2 ways to improve your layout.
1) Use features of RelativeLayout (android:layout_below="#id/linearLayout1" or its counterpart layout_above)
<RelativeLayout ...>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white">
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/linearLayout1"
android:fillViewport="true"
android:background="#drawable/wallpaper" >
</ScrollView>
</RelativeLayout>
2) Replace by LinearLayout (and use android:layout_weight="1.0")
<LinearLayout ...>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white">
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1.0"
android:fillViewport="true"
android:background="#drawable/wallpaper" >
</ScrollView>
</LinearLayout>
The line android:layout_height="0dip" may look strange. Actually you can use match_parent, but Eclipse IDE highlights such line and recommends to use 0dip if you have specified android:layout_weight.
Also I added android:fillViewport="true" to your scrollview. It indicates that the content inside the scrollview will expand to the full height if it is necessary, you can read about this property here
Related
I have three listviews in horizontalScrollView. I want to make each of them to occupy the full screen, by including them into a linearlayout which is set to (layout_width: match_parent, layout_height: match_parent). However, it doesn't work. As you see from the screenshot, the three listviews just tightly linked with one another.
Any suggestions so that the three listviews each occupies the full screen? THx a lot.
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/page_bg_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_login_myFriends_requestList"
android:background="#ffffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_login_myFriends_pendingList"
android:background="#ffffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tab_login_myFriends_confirmedList"
android:background="#ffffffff" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
Use this,
http://developer.android.com/reference/android/widget/ScrollView.html#attr_android:fillViewport
Set that to true. Also your listviews should probably have a weight attribute associated with them.
But I can't really figure out what you're trying to do. Maybe provide the xml and I'll guide you further.
I think what you're looking for is this,
http://developer.android.com/training/animation/screen-slide.html
I have a list, but it will occupy all the screen of the tablet. Is there a way to make it only occupy half , or 1/4 of the tablet screen?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
</LinearLayout>
Add another blank view or the view that you want to place in another half. Set its layout weight to 0.5: android:layout_weight=".5".
Set android:layout_weight=".5" for ListView.
Note that setting layout_weight to .5, if there is a single view in a container would have no effect.
Good Luck!
You can use the following in your XML for vertical split of screen:
Here we are using weightsum and weight attributes.
You can adjust the weight property to get the desired results in terms of half or quarter etc.
<LinearLayout 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"
android:orientation="vertical"
android:weightSum="100" >
<RelativeLayout
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50"
android:background="#android:color/black" >
<!-- Your RelativeLayout Items -->
</RelativeLayout>
</LinearLayout>
In order to get the same in horizontal manner, the below would be useful:
<LinearLayout 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"
android:background="#android:color/darker_gray"
android:orientation="horizontal"
android:weightSum="100" >
<RelativeLayout
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="50"
android:background="#android:color/black" >
<!-- Your RelativeLayout Items -->
</RelativeLayout>
</LinearLayout>
EDIT:
To display as widgets, You can refer tutorials here http://www.vogella.com/tutorials/AndroidWidgets/article.html and here http://www.tutorialspoint.com/android/android_widgets.htm
So I have this XML code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayoutOuter"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3.0"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1.0"
>
<Gallery
android:id="#+id/galleryMain"
android:layout_width="match_parent"
android:layout_height="90dp">
</Gallery>
<LinearLayout
android:id="#+id/linearLayoutInner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#layout/gallery_image_background"
/>
</LinearLayout>
<TextView
android:id="#+id/galleryTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2.0"
>
</TextView>
</LinearLayout>
Currently it sizes correctly, but I don't think that can be right.
The LinearLayout that gets 1.0 out of 3.0 possible weight takes about 2/3 space.
The TextView that gets 2.0 out of 3.0 possible wight takes about 1/3 space.
Is above really how it is meant to work? It sizes like I want, but... Not sure I understand the logic behind it.
Is above really how it is meant to work?
Given the way you wrote it, yes, but that's why we usually don't write it that way. :-)
The easier-to-understand approach to weights and android:weightSum is to have the heights set to 0dp, not match_parent. Then, each child gets a proportion of the available space based on the weights.
So, to get your 2/3 and 1/3 split this way, you would have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayoutOuter"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3.0"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="2.0"
>
<Gallery
android:id="#+id/galleryMain"
android:layout_width="match_parent"
android:layout_height="90dp">
</Gallery>
<LinearLayout
android:id="#+id/linearLayoutInner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#layout/gallery_image_background"
/>
</LinearLayout>
<TextView
android:id="#+id/galleryTextView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
>
</TextView>
</LinearLayout>
Note that:
You could go with integers here
You do not need android:weightSum in this case, as the sum of your weights already is that value. You would use android:weightSum in cases where the sum of your weights is less than the real total, indicating that some portion of the space should remain as whitespace and treated as such (by default, appearing after the children of the LinearLayout).
My mind is a bit boggled... in the following XML, I would expect my LinearLayout/TextView to be the same size as my ScrollView. As you can see from my included image, this is not the case.
What is going on here? Why is my LinearLayout not the same size as the ScrollView?
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#008B8B" >
<LinearLayout
android:id="#+id/contentLayout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DC143C" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello" />
</LinearLayout>
</ScrollView>
use
android:fillViewport="true"
in your ScrollView
I've given following structure of a layout for a tablet app:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="false" >
<LinearLayout
android:id="#+id/placeholderForLeftFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false" >
<RelativeLayout
android:id="#+id/placeholderFragmentHomeScreen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="32" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/dummy"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="69"
android:background="#0000" >
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/mainLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:clipChildren="false" >
<RelativeLayout
android:id="#+id/invisbleRelativeLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="32"
android:background="#0000" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/placeholderFragmentHotelResultList"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="42"
android:background="#F0FFFF" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/placeholderFragmentHotelDetailScreen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="26" >
</RelativeLayout>
</LinearLayout>
The first LinearLayout does only contain a fragment on the left side and is not moveable. The 2nd LinearLayout has at first position an invisible element, which I decrease when I swipe the two other R.Layouts left and increase when I sipe back.
The RelativeLayout in the middle keeps his width all the time and I can swipe the 2nd and 3rd over the first LinearLayout. Actually the 2nd and 3rd R.Layout should have the same width, but the third one should be only visible at the border of the screen to 26%.
What I now want to do is, that the 3rd R.Layout has the same width how the 2nd one from the beginning (right after the start of the app) and his postion is half to off-screen. What I tried to do is, to create a layout which has the width from the sum of all three R.Layouts and put the layouts in it, but it didn't work - I see only the elements from the first LinearLayout.
When I use weight attribute how in the code above, the 3rd R.Lay is streched and that's exactly that behavior what I try to avoid. And when I setMargin_right to a negative value, nothing happens.
I appreciate any thoughts and ideas.
Thank you!
I found following solution which works fine for me.
<LinearLayout
android:id="#+id/mainLinearLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:baselineAligned="false"
android:clipChildren="false"
android:weightSum="100" >
<RelativeLayout
android:id="#+id/invisbleRelativeLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="32"
android:background="#0000" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/placeholder1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="43"
android:background="#F0FFFF" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/placeholder2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="43"
android:background="#F0FFFF" >
</RelativeLayout>
</LinearLayout>
Please note, that the sum of the weights from the three layouts is bigger than the 100 in the top LinearLayout.