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.
Related
I have a problem to fill the whole screen with a scrollview.
How do I make the scrollview cover the whole screen width and screenheight? I tried with fillviewport but that that works for the screenheight.
I am not sure if its the scrollview or its parent (FrameLayout) that is the problem?
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="img1"/>
<TextView
android:id="#+id/text_img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
/>
<ImageView
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="img2"/>
<TextView
android:id="#+id/text_img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
/>
<ImageView
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="img3"/>
<TextView
android:id="#+id/text_img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
/>
</LinearLayout>
</ScrollView>
change your ScrollView and LinearLayout like this
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
Change your <ScrollView> from wrap_content to match_parent.
Example:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
Also, you should be using match_parent instead of fill_parent in API 8+.
EDIT:
After talking a bit in the comments, OP and I discovered that the FrameLayout's default background is transparent, which means you can see the old view underneath.
Using a LinearLayout or really anything instead of a FrameLayout will fix this problem.
Other answers are going in the right direction but your main problem is probably due to the fact that it's a Dialog.
First of all make sure your Dialog is borderless. You can use one of approaches proposed here (not to duplicate answers).
I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>
It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.
I am in the process of designing my first Android application and I am trying to get the hang of creating an XML layout. (I have a great deal of experience with Java)
Essentially what I wanna do:
Where the outlines describes:
Blue: A basic View (where i can set a text)
Red: A ButtonView (Used so the user can synchronize data)
Green: A nested RelativeLayout (Where i am going to add a lot of other stuff)
More specifically what i wanna do:
So my question is this: How can i set up the different layouts? I am having the must trouble with setting up the blue and red views because i want the red view to fill up around 25% of the screen width(and the blue to fill up the last 75%).
Thank you in advance.
Use layout_weight property to specify the percentage of screen space a view takes.
Like here, for e.g:
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical" .........>
<LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent"
android:orientation="horizontal">
<EditText android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="3"/>
<Button android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="1"/>
</LinearLayout>
//Other view
</LinearLayout>
Use following xml, this is specially designed for you.
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="0.75">
<TextView
android:id="#+id/headingTextView"
style="#android:style/TextAppearance.WindowTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cafe Vigeos"
android:textColor="#android:color/white"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.25">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/nested_relative_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</RelativeLayout>
</LinearLayout>
I may be being an idiot, but it seems like adding a Button to a horizontal LinearLayout breaks layout_gravity="top"
<?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">
<TextView
android:id="#+id/text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:text="TextView"
android:background="#f00" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_weight="0"
android:text="Button" />
</LinearLayout>
This looks like this (in the layout editor):
Note that the text view is in the centre, not the top! If *all I do is remove the <button>, then it looks like this:
See, now it is at the top like it should be. A workaround I will use is to have layout_gravity="start" which does result in the correct behaviour:
But anyway, what's going on? Also see this related question. That might actually be the same problem; I'm not sure. No real answers there anyway.
Aha, I found the answer! You have to set android:baselineAligned="false". Never heard of that before, and kind of annoying that it is on by default!
<?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:baselineAligned="false"
android:orientation="horizontal">
...
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)