Hi everyone i've been trying to make this work for quite a while and i feel stuck, i found a component on web wich is pretty nice, it allows me top to bottom sliding, the default sample is pretty easy the bar goes on top and the goes down:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/button_open"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/open"
android:layout_centerInParent="true"
android:visibility="gone" />
<TextView android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content"
android:text="#string/default_feed_detail" android:id="#+id/txtDetailNews" ></TextView>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:id="#+id/drawer"
my:direction="topToBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
my:handle="#+id/handle"
my:content="#+id/content">
<include
android:id="#id/content"
layout="#layout/pen_content" />
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
</RelativeLayout>
And it renders like this quite nicely:
But now i want to have a header image between the text and between then the custom slidingdrawer it just not render the text
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/button_open" android:layout_width="100dp"
android:layout_height="wrap_content" android:text="#string/open"
android:layout_centerInParent="true" android:visibility="gone" />
<ImageView android:id="#+id/header" android:src="#drawable/header"
android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:layout_below="#id/header"
android:id="#+id/drawer" my:direction="topToBottom"
android:layout_width="fill_parent" android:layout_height="wrap_content"
my:handle="#+id/handle" my:content="#+id/content">
<include android:id="#id/content" layout="#layout/pen_content" />
<ImageView android:id="#id/handle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
<TextView android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_below="#id/drawer"
android:layout_width="wrap_content" android:text="#string/default_feed_detail"
android:id="#+id/txtDetailNews"></TextView>
</RelativeLayout>
and now the text is gone.... any suggestion with Relative Layout, or If anyone has an idea or component so it can be done easly that would be great too thanks!!
Edit
I found something interesting with the hierarchyviewer using the following layout to arrange the components:
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:layout_above="#id/txtDetailNews"
android:id="#+id/drawer" my:direction="topToBottom"
android:layout_width="fill_parent" android:layout_height="wrap_content"
my:handle="#+id/handle" my:content="#+id/content">
<include android:id="#id/content" layout="#layout/pen_content" />
<ImageView android:id="#id/handle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
it seems that the components that are inside the Drawer are being render and take all the space as shown here:
First off, you really need to proof-read your questions. You would probably have had more response by now if you had fixed some very basic grammar mistakes and added a few clarifications to what you wrote.
Here are a couple things to try: move the TextView above the sliding drawer in the XML, as you did in the first layout. Leave the android:layout_below="#id/drawer" attribute- but if it does not work, try removing that.
Try that, we'll go from there.
Try: android:layout_alignWithParentIfMissing="#id/header" on the last TextView.
Well i had to do a little workaround with this since the content on the background took the space, and the Textview was giving up its space what i did was the following:
I place the TextView after the header imageView with a paddingTop of a 100dip.
android:layout_width="wrap_content" android:text="#string/default_feed_detail"
android:id="#+id/txtDetailNews" android:layout_alignWithParentIfMissing="#id/header" ></TextView>
Then on the MultiDirectionalSlidingDrawer i set the content with a android:layout_above="#id/txtDetailNews"
And that pretty much solve the problem rendered the sliding between the Content and the header, Thank you all for helping me out... Specially Nathan Fig you earn those 50 man (y)
Related
I want to make my layout like this as per below picture. this image i am able to see in iphone devices.
Here i used frame layout to achieve make overlays of top and bottom image bar on imageview but after using frame layout i can only able to see top imagebar overlay not bottom image bar? why its happens?
Forgot about the content of top and bottom iamge bar.. i am focusing to achieve this functionality.
Please make me correct if i am wrong in my code.
xml file code :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
per android documentation
Child views are drawn in a stack, with the most recently added child on top.
so you need to arrange your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
in this case the actual location of the view is not determined by the order that the views are declared in the xml. For a linear layout this would be true however not so with the FrameLayout, in a framelayout the location is determined by gravity so your views will still be placed in the correct locations and they will be loaded in order they were declared, so first is the image view, then the first include is placed on top of that, then the second include is placed on top of that (however in this case they dont intersect so it doesn't matter).
edit2: after chatting with sam we were able to figure out the problem here's our solution
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/greenImage"
android:src="#2dff3d"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView1"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
note the usage of layout_gravity as apposed to just gravity.
I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />
Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)
Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your layout.
<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"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>
I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.
I'm having problems with a layout. I have this structure:
<ScrollView>
<LinarLayout>
<Button/>
<RelativeLayout>
<ImageButton/>
<ImageButton/>
<ImageButton/>
</RelativeLayout>
</LinarLayout>
</ScrollView>
I want the three ImageButtons centered and one next to the other like this:
IMG1 IMG2 IMG3
For this purpose, I've centered the elements inside the RelativeLayout using android:gravity="center" and I've used android:layout_toRightOf="#+id/element" and android:layout_toLeftOf="#+id/element" to order the elements the way I want.
When I check the result on the GraphicalLayout option, it is showing exactly what I want (I've never had problems with this view, it always shows the elements as I write on the XML file) but then I compile and execute and it is all disordered. I've tried a lot of different ways to order the elements but it is doing what it want... This is the first time it happened to me in almost two years of development.
I've also closed Eclipse but nothing's changed.
EDIT to add information
I want the elements to be like this:
IMG1 IMG2 IMG3
In the GraphicalLayout it is all ok but in the emulator the three IMGS are overlapping.
Here's the complete code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bugbox_wall_port" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/writeNewMsg"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/spyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgspy" />
<ImageButton
android:id="#+id/playerMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/msgplyr"
android:layout_toRightOf="#+id/spyMsgs" />
<ImageButton
android:id="#+id/allyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/msgally"
android:layout_toRightOf="#+id/playerMsgs" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
I do not know how to solve it. Is driving me nuts. What's the problem with this layout? Why the elements aren't ordered? How can I solve it and order the elements as I do always?
Can someone help me?
Thank you in advance!
small idea:
how about using android:src instead of android:background ?
Maybe this is what you are looking for:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/writeNewMsg"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:padding="10dp" >
<ImageButton
android:id="#+id/spyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon"/>
<ImageButton
android:id="#+id/playerMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon"
android:layout_toRightOf="#id/spyMsgs" />
<ImageButton
android:id="#+id/allyMsgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/icon"
android:layout_toRightOf="#id/playerMsgs" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
What I'm Trying to do
At the moment I'm creating a design for my Activity, which has different kind of "boxes" in it. Every of those "boxes", has diffrent informations in it. I created the design by hand on a piece of paper, but I won't get the idea down in my .xml!!
Question
On the bottom of this post you'll find a copyed "box" which I'd like to create for my app. Please help me to realize this, because I really don't get how to do this in my XML! I'm working with Android 4.0 (ICS).
Something like this should work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/box_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Box Title" />
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/box_content_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hans Max" />
<TextView
android:id="#+id/box_content_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Maxiburger 12" />
<TextView
android:id="#+id/box_content_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8002, Muster" />
</LinearLayout>
<ImageButton
android:id="#+id/box_button"
android:layout_weight="5"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</LinearLayout>
I give you the pseudo layout:
<RelativeLayout>
<TextView
full width
id:infobox/>
<Button
layoutParentRight
below infobox/>
<TextView
layout_below infobox
toLeftOf button/>
// repeat the textView above and always below the previous one
</RelativeLayout>
With LinearLayouts:
<LinearLayout>
<TextView infobox/>
<LinearLayout>
<LinearLayout>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<Button/>
</LinearLayout>
</LinearLayout>
As you see it is much more complex and bloated. As I always get confused by horizontal/vertical orientation I leave this to you to find out :)
Just experiment and if you can't get it to work, update your answer with the layout you tried.
I 'm having problems with my android UI. My buttons dont align properly. Even though i have my button aligned to right, but still wont line up correctly?
I was wondering is there any document that would explain how to layout things correctly and how would widgets behave when they are inside a tablerow? Or in other terms how does hierarchy affect the way things are aligned??
Thanks
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
style="?screenBackground">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<TableLayout android:id="#+id/TableLayout02"
android:layout_width="match_parent" android:layout_height="match_parent"
style="?pageBackground">
<TableRow>
<ImageView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:src="#drawable/camera_icon"
android:id="#+id/img" android:layout_gravity="left"></ImageView>
<Button android:id="#+id/button1" android:text="#string/button1"
style="?button"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
You might have better luck using a RelativeLayout instead of LinearLayout.
For example, you could align your ImageView and Button like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_height="60dip"
android:layout_width="60dip"
android:layout_alignParentLeft="true"/>
<Button
android:text="Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
To get a feel for what is possible, the starter docs on RelativeLayout are here and here.