Stacking two different views with different sizes on a layout - android

I've searched for an answer for this all over but the solutions offered did not solve my problem.
I have a layout where I display some views (a few buttons and a background). To this i've added a custom control i've made extending linear layout. This control is displayed above the layout quite nicely.
What I wish to do is add an additional ImageView which is larger than this control but it will be in front of it.
edited: Sorry, I hope this will clear things up.
I have one large layout (Relative) for my activity, I would like to stack on this layout two additional views\layout so the final version will be the picture attached:
This is my layout - which stacks the imageview right on the menubar, and not over the others. Trying to put the FrameLayout elsewhere still didn't give me the wanted result.
<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="#drawable/background">
<RelativeLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="450dip">
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_marginLeft="26dip"
/>
</RelativeLayout>
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dip"
android:layout_height="200dip"
/>
</FrameLayout>
</LinearLayout>

Not sure it this will work or not cause I'm typing this up at work. But moral of the story here is get used to using RelativeLayout. You have much more control over your layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<com.myproject.controls.MenubarMain
android:id="#+id/mbMenuBarMain"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</com.myproject.controls.MenubarMain>
<com.myproject.controls.SearchControl
android:id="#+id/scSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
</com.myproject.controls.SearchControl>
<ExpandableListView android:id="#+id/lstItems"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scSearch"
android:layout_above="#id/mbMenuBarMain"
android:layout_paddingLeft="26dp"/>
<ImageView android:src="#drawable/myicon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#id/mbMenuBarMain"
android:layout_alignRight="#id/mbMenuBarMain"/>
</RelativeLayout>

Related

How to set listviews in horizontalScrollView to fill up the screen?

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

Can't display my button at the bottom of a list of layouts

I have spent hours on this problem, I hope somebody can help me.
Sorry in advance if the question is stupid, I am fairly new to android development and also, I am using an app builder which has generated already a lot of code. I am basically trying to tweak this code with what I want...
The question is just about xml layouts, I don't think it involves code. I want to display a simple button at the bottom of this screen.
So I have this screen which builds a group of buttons in a grid. I also display an ad banner at the top. The parameters of these buttons are specified through the web app builder on a web interface. No problem with these buttons. They are displayed correctly in this screen layout below:
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:id="#+id/containerView"
android:background="#android:color/transparent"
android:padding="0dip"
android:layout_margin="0dip"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.google.ads.AdView android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adUnitId="123"
ads:adSize="SMART_BANNER"
ads:testDevices="123"
ads:loadAdOnCreate="true">
</com.google.ads.AdView>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/verticalScrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</TableLayout>
</ScrollView>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerViewHorizontal"
android:background="#android:color/transparent"
android:padding="0dip"
android:layout_margin="0dip"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerViewHorizontalBottom"
android:background="#android:color/transparent"
android:padding="0dip"
android:layout_margin="0dip"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/horizontalScrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerHorizontalButtons"
android:background="#android:color/transparent"
android:padding="0dip"
android:layout_margin="0dip"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</RelativeLayout>
Now what I am trying to do, is to add at the bottom of this group of buttons, a button that does not belong to the list generated through the web app builder, but manually created:
<Button
android:id="#+id/bmenu2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
I have already taken care of the code for this button, it works well, but I don't manage to display it at the bottom of my screen.
I guess it has to do with the general layout of the screen. I have to admit I am completely lost in the series of layout nested in one another, I don't understand what is exactly doing what.
If that helps, I have managed to display my button at the top of the screen, even just below my ad banner. But not at the bottom.
Also if that helps, I guess one of the layout takes up the whole heightspace (the scrollview?), living 0 height for the button I want to add...
Thanks a lot for your time and if you can help me!
Juyt implement a Linear layout instead of a relative one for the list and the button.
Then give the list a height of 0dp and a weight of 1
The button will have whatever attributes:
<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" >
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</ListView>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

android XML scrollview and linear layout problem

I have the following code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:src="#drawable/ducks_r2_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView android:src="#drawable/ducks_r3_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r4_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r5_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r6_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
</LinearLayout>
</ScrollView>
I have used layout_width="fill_parent" everywhere. But this is the screenshot of how it shows up on the emulator.
I dont want the space on either side of the images.
Why is it showing up like this? How can I rectify it?Thank you
I guess this is happening because the image is not streching.
You may try to ask the image to strech itself:
android:scaleType="fitXY"
or use it as background.
please check this thread:
android: stretch image in imageview to fit screen
A ScrollView will only inflate to as many items are in it.
You should be able to solve this by using a LinearLayout (or another more predictable layout) as the parent for your ScrollView with android:layout_height="match_parent" and setting the ScrollView to android:layout_height="wrap_content" and the same for layout_width on both.

how to get layouts/ views to show below viewflipper

I am trying to get a layout/ view to display below a viewflipper. Could anyone please tell me how to do so?
It works if layouts are shown above viewflipper, but not below it. E.g. the "Button" below refuses to show up if below viewflipper, but the "ImageButton" shows up above viewflipper.
Here's my xml code - it's v. basic.
Thanks for any help!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:clickable="true" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:orientation="vertical">
<RelativeLayout android:id="#+id/relativeLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content">
<ImageButton android:id="#+id/homeButton"
android:layout_alignParentLeft="true" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:clickable="true"
android:src="#drawable/home"></ImageButton>
</RelativeLayout>
<ViewFlipper android:id="#+id/flipper"
android:layout_width="fill_parent" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/white">
<include android:id="#+id/main2" layout="#layout/main2" />
<include android:id="#+id/main3" layout="#layout/main3" />
<include android:id="#+id/main4" layout="#layout/main4" />
</ViewFlipper>
<LinearLayout android:id="#+id/linearLayout"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:layout_height="wrap_content"
android:layout_width="wrap_content" android:id="#+id/button1"
android:text="Button"></Button>
</LinearLayout>
</LinearLayout>
Try to make the viewflipper have layout_height="0dip" and layout_weight="100".
It must be happening because the ViewFlipper gets as big as required to fit the 3 inner layouts and thus no space is left for the last button. If you place the button before, that one gets some space allocated and the viewflipper gets the remaining space.

How to keep this layout uniform across screen sizes

I would like to make the following layout, see picture below, where the place of the EditText views stay correct positioned w.r.t. the arrows.
The layout below I've made with a RelativeLayout making use of margins, but this doesn't work when someone installs this app on a 540x960 resolution phone like the HTC sensations.
Thanks in advance for your help!
Valid XHTML http://www.tricky.dds.nl/gui.png.
Use a combination of LinearLayout and RelativeLayout. With LinearLayout you can create spaces on the screen that will be exactly alike on all devices. Let your top level container be a LinearLayout. For instance, to create the second row in the image you reffered to, do something like this:
<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:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</TextView>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>

Categories

Resources