Two LinearLayouts with same background colour appear different in the parent view - android

I have this layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#android:color/black"
android:gravity="center_horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.digitaliridium.tides.NVLibrary.NVGlobeView
android:id="#+id/globeView"
android:src="#drawable/icon"
android:background="#color/nvglobebackground"
android:scaleType="matrix"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:background="#color/paneltransparenciesbackground"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/globeViewPortName"
android:textSize="22dp"
android:textStyle="bold"
android:background="#android:color/transparent"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="26dp"/>
<TextView
android:id="#+id/globeViewLocation"
android:textSize="12dp"
android:layout_marginTop="3dp"
android:layout_marginLeft="5dp"
android:background="#android:color/transparent"
android:layout_width="fill_parent"
android:layout_height="18dp"/>
<TextView
android:id="#+id/globeViewPortType"
android:textSize="12dp"
android:background="#android:color/transparent"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="18dp"/>
</LinearLayout>
<LinearLayout
android:background="#color/paneltransparenciesbackground"
android:orientation="vertical"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:background="#color/paneltransparenciesbackground"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/indicatorMode"
android:src="#drawable/nv_selector"
android:background="#android:color/transparent"
android:layout_marginLeft="10dp"
android:layout_width="50dp"
android:layout_height="50dp"/>
<ImageButton
android:id="#+id/homePort"
android:src="#drawable/nv_home_port"
android:background="#android:color/transparent"
android:layout_toRightOf="#id/indicatorMode"
android:layout_marginLeft="20dp"
android:layout_width="50dp"
android:layout_height="50dp"/>
<ImageButton
android:id="#+id/gps"
android:src="#drawable/nv_gpsarrow_white"
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:layout_width="50dp"
android:layout_height="50dp"/>
</RelativeLayout>
<RelativeLayout
android:background="#color/paneltransparenciesbackground"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/viewPointLocation"
android:textSize="12dp"
android:background="#android:color/transparent"
android:gravity="center_vertical"
android:layout_marginLeft="5dp"
android:layout_width="wrap_content"
android:layout_height="30dp"/>
<TextView
android:id="#+id/scale"
android:textSize="12dp"
android:layout_marginLeft="20dp"
android:gravity="center_vertical"
android:layout_toRightOf="#id/viewPointLocation"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="30dp"/>
<TextView
android:id="#+id/distance"
android:textSize="12dp"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="30dp"/>
</RelativeLayout>
</LinearLayout>
<ImageButton
android:id="#+id/flipView"
android:layout_marginTop="300dp"
android:layout_gravity="bottom"
android:layout_marginBottom="100dp"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="center"
android:src="#drawable/sc_flip"
/>
</FrameLayout>
Here's a shot of the resulting screen
You can see that the semi-transparent panels (the LinearLayouts) appear to have different levels of opaqueness, even though they have the same background colour.
The difference is much more marked on the device screen than it is in the screen cap.
Can anyone spot why?

In the bottom LinearLayout it consists with the RelativeLayout's who also has the same background.
When you put two semi-transparent layers on top of each other they'll look less transparent (it's like they're covering each other)
Drop the background in the RelativeLayout's and they'll look the same.

Related

Android: keeping overlay textview size same as underlying imageview

I have an image (.png) that is sliced into 3 pieces top, middle, bottom.
(The pieces mentioned are not of the same size).
What I am trying to achieve is to have a layout where the original image is assembled from the above 3 pieces - but the middle piece should also display a textview over it.
In a sense, I have managed the most of the above, however with my current layout - when the text of the textview exceeds some length (horizontally or vertically) the image is then broken, as then there is a gap between middle and bottom part (vertical excess) or the middle part is shifted related to the top and the bottom (horizontal excess).
Actually what I want to achieve is that the textview will always remain the same size as the underlying middle imageview.
My layout code is as follows (The code will be used for android 4.0 +):
<?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:background="#88666666"
android:id="#+id/top_layout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="25dp" >
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>
Thanks.
do this for all three children of LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:weight="1dp"
for middle element do this for children of RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
Also you can ditch top RelativeLayout as it is redundant. Your final layout file should look like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="25dp"
android:background="#88666666"
android:id="#+id/top_layout">
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
/>
</FrameLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
Finally, solved it by using android:layout_align... and referencing the middle imageview.
(I also, removed the unnecessary android:layout_alignParentRight="true" from middle imageview - but that was not the main problem here)
So, the final layout became:
<?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:background="#88666666"
android:id="#+id/top_layout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="25dp" >
<ImageView
android:id="#+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotetops" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotemiddles" />
<TextView
android:id="#+id/mytext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
android:layout_alignLeft="#+id/ivMiddle"
android:layout_alignRight="#+id/ivMiddle"
android:layout_alignTop="#+id/ivMiddle"
android:layout_alignBottom="#+id/ivMiddle"
/>
</RelativeLayout>
<ImageView
android:id="#+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="#drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>

Android LinearLayout to align contents into different sides

I'm still beginner at different Android layouts. Here is simple linear layout:
<LinearLayout
android:layout_height="50dp"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:gravity="end"
android:padding="5dp">
<ImageButton
android:id="#+id/bt_template"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_template_button"
android:scaleType="fitCenter"
android:background="#ffffffff"
android:contentDescription="Choose template"/>
<ImageButton
android:id="#+id/bt_captureImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_camera_button"
android:scaleType="fitCenter"
android:background="#ffffffff"
android:contentDescription="Choose template"/>
<Button
style="#style/MyRedButton"
android:layout_margin="0dp"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:text="#string/str_new_mail_activity_button_send"
android:id="#+id/bt_send" />
</LinearLayout>
I want 2 buttons to go left and third button go right. How do I do that?
Blue buttons need to be on left side and red button on right side. How can I do that?
This is a possible option for using LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_vertical"
android:layout_height="50dp"
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="5dp">
<ImageButton
android:background="#ffffffff"
android:contentDescription="Choose template"
android:id="#+id/bt_template"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/ic_template_button" />
<ImageButton
android:background="#ffffffff"
android:contentDescription="Choose template"
android:id="#+id/bt_captureImage"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/ic_camera_button" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
style="#style/MyRedButton"
android:id="#+id/bt_send"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:text="#string/str_new_mail_activity_button_send" />
</LinearLayout>
If you must use LinearLayout, give the red button a weight of 1 (so it will hog space) and make sure it has a gravity to the right if that's what you need.
android:layout_weight="1"
android:layout_gravity="right"
Check this out:
<RelativeLayout
android:layout_height="50dp"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:gravity="end"
android:padding="5dp">
<ImageButton
android:id="#+id/bt_template"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:scaleType="fitCenter"
android:background="#ffffffff"
android:layout_alignParentLeft="true"
android:contentDescription="Choose template"/>
<ImageButton
android:id="#+id/bt_captureImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_toRightOf="#id/bt_template"
android:background="#ffffffff"
android:contentDescription="Choose template"/>
<Button
android:layout_margin="0dp"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="send"
android:layout_alignParentRight="true"
android:id="#+id/bt_send" />
</RelativeLayout>

set alpha to to a layouts child

I am using the following code to set the alpha value of a layout:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="54dp"
android:alpha="0.85"
android:background="#color/label_background"
android:gravity="center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true" >
<Button
android:id="#+id/accountButton"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="12dp"
android:background="#drawable/settings" />
</LinearLayout>
<ImageView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/account"
android:scaleType="fitXY"
android:src="#android:drawable/divider_horizontal_dim_dark" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:text="#string/pick_up"
android:textColor="#color/white"
android:textSize="22dp"
android:textStyle="bold"
custom:customFont="Roboto-Regular.ttf" />
</RelativeLayout>
The problem that i am facing is that setting an alpha value to the whole relative layout will make its children(the TextView and the Button) transparent also. However, I want the button and the text to be solid colors and not transparent. I tried setting an alpha value of 1 to the TextView and the Button but it didn't help. How can I correct this?
I was able to to do it in the end by using the following code:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:alpha="0.85"
android:background="#color/label_background" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="54dp"
android:gravity="center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true" >
<Button
android:id="#+id/accountButton"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="12dp"
android:background="#drawable/settings" />
</LinearLayout>
<ImageView
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/account"
android:scaleType="fitXY"
android:src="#android:drawable/divider_horizontal_dim_dark" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
android:text="#string/pick_up"
android:textColor="#color/white"
android:textSize="22dp"
android:textStyle="bold"
custom:customFont="Roboto-Regular.ttf" />
</RelativeLayout>
</FrameLayout>
basically, i surrounded the relativeLayout with FrameLayout and set the alpha value and the background in the FrameLayout itself.

Unable to Align the Views

This is the part of the Code of a very long Layout.So posting of whole code was of no use.
I want to align the RED circle.Both the positions are shown in the RED colored circles.
The ParentLayout of whole activity is a RelativeLayout but has nothing to do with this.
Please help me.I have tried all the things that I knew.
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/Layoutborder"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:background="#drawable/image_bg"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"/>
</LinearLayout>
</LinearLayout>
Change the 3rd LinearLayout to :
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:padding="5dp" >
Not sure if you are satisfied with that kind of layout.
If this whole thing is inside a RelativeLayout, remove the outer LinearLayout (moving margins and such to the first child LinearLayout as required), and change the second child LinearLayout - the one with 5dp padding - to have
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
If you don't want to do this and have to keep the outer LinearLayout for some reason, move
android:layout_marginTop="20dp"
from the parent LinearLayout to the first child, and set layout_width of the second child to fill_parent, and add android:gravity="right" to it.
The code you provided does not show where you have specified the properties of RED text "here". You could probably just add it as another element in your relative layout where you specify the availability and stock which would align it with the preceding text.
Edit: (after understanding your actual problem)
I would suggest wrapping in another linear layout which will enable you to position the text above the picture as shown in the code below.
<?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="100dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Availability "
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp" />
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="3dp"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="3dip" >
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/texttitle"
android:src="#drawable/button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
This was the Another way achieve the above Output.Hope it may help SomeOne.
<RelativeLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#color/white"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:background="#drawable/image_bg"
android:layout_alignParentLeft="true"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"
/>
</LinearLayout>
</RelativeLayout>

Linearlayout for different screen sizes

I have a linearLayout which is surrounded by a scrollView in order to make it for smaller screens scrollable. In the linear layout I have 3 childs which are also linearlayout.
This is working fine. But I also want to support larger screens. At the moment I get with a larger screen space left on the bottom of the screen. I want to have the buttons (navigation bar) be always at the bottom. for larger screens (height) I would like to add at the top of the screen an empty view which fills out the space that is more provided by the larger screen.
How can I achieve that? i tried a lot with weight attribute but didnt get it working.
Here the layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#8db9f6"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#8db9f6">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_marginTop="8dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="test"
android:id="#+id/test"
android:paddingLeft="10dp"
android:textStyle="bold"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<View
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/btnName"
android:scaleType="center"
android:layout_width="60dp"
android:layout_height="48dp"
android:src="#android:drawable/ic_menu_edit">
</ImageButton>
</LinearLayout>
<EditText
android:id="#+id/edittest"
android:editable="false"
android:hint="#string/test"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</EditText>
<TextView
android:text="#string/optionalText"
android:id="#+id/test1"
android:paddingLeft="10dp"
android:textSize="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<TextView
android:id="#+id/space"
android:layout_width="fill_parent"
android:layout_marginTop="4dp"
android:layout_height="3sp"
android:background="#333142">
</TextView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="TEST TESt"
android:id="#+id/test2"
android:paddingLeft="10dp"
android:layout_marginTop="5dp"
android:textStyle="bold"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<View
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"/>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="#+id/progressbar"/>
<ImageButton
android:id="#+id/btnPicture"
android:scaleType="center"
android:layout_width="60dp"
android:layout_height="48dp"
android:src="#android:drawable/ic_menu_edit">
</ImageButton>
</LinearLayout>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:background="#ffffff"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="150dip">
<ImageView
android:id="#+id/test3"
android:layout_width="400dip"
android:layout_height="150dip"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/test1"/>
<TextView
android:id="#+id/text"
android:layout_gravity="bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="8dp"
android:text="test test"/>
</FrameLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:layout_marginTop="3dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/scaleMinus"
android:textSize="14dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:text="#string/zoomOut"/>
<Button
android:id="#+id/scalePlus"
android:textSize="14dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:text="#string/zoomIn"/>
</LinearLayout>
<TextView
android:id="#+id/balken"
android:layout_width="fill_parent"
android:layout_marginTop="4dp"
android:layout_height="3sp"
android:background="#333142">
</TextView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:text="test test"
android:id="#+id/test3"
android:paddingLeft="10dp"
android:textStyle="bold"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<View
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"/>
<EditText
android:id="#+id/test4"
android:editable="false"
android:layout_width="100dp"
android:layout_height="wrap_content">
</EditText>
<TextView
android:text="test"
android:id="#+id/mtest4"
android:paddingLeft="10dp"
android:textStyle="bold"
android:textSize="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<View
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/test5"
android:scaleType="center"
android:layout_width="60dp"
android:layout_height="48dp"
android:src="#android:drawable/ic_menu_edit">
</ImageButton>
</LinearLayout>
<TextView
android:id="#+id/balken"
android:layout_width="fill_parent"
android:layout_marginTop="4dp"
android:layout_height="3sp"
android:background="#333142">
</TextView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:background="#000000"
android:paddingTop="5dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/save"
android:textSize="18dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:text="#string/save"/>
<Button
android:id="#+id/cancel"
android:textSize="18dp"
android:layout_weight="1"
android:layout_gravity="bottom"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:text="#string/abort"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
Wrap the entire layout in a Relative Layout. Use a relative layout as your root element and set the Linear Layout containing your buttons to layout_alignParentBottom="true" and the ScrollView set to layout_alignParentTop="true".
The LinearLayout containing the buttons and the ScrollView should be direct children of the RelativeLayout.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout <-- containing the layout minus the buttons
android:id="#+id/SV"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<The Rest Of The Layout>
</LinearLayout>
<LinearLayout
android:id="#+id/LLButtons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Buttons>
</LinearLayout>
</ScrollView>
If you want the buttons to be always at the bottom of the screen alignParentBottom. If you want the buttons to always be at the bottom of the scrollview alignBelow="#id/SV"
android:layout_height="wrap_content" in your inner LinearLayout is your trouble here, changing it to 'fill_parent' should help. In general, you may want to use hierarchyviewer to help troubleshoot layout issues like this.

Categories

Resources