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.
Related
I'm having a problem with an Android APP that seems related to layout. Attached image you'll see that the "Alerts" button sticks out and doesn't seem the same as the other buttons. I've replaced the image with a known good one, but the problem remains.
It was suggested it was because it is tabhost layout, but all the changes that have been recommended have not worked. So far I've tried changing the attributes from android:height and width to "wrap_content", "fill_parent", and "match_parent". Match caused another strange white space to be corrected, but this button is my last apparent challenge.
Here's the layout code, can you tell me what the problem is?
<?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="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_search"
android:focusable="false"
android:freezesText="false"
android:imeOptions="actionNext"
android:longClickable="false"
android:paddingLeft="17dp"
android:text="Search"
android:textColor="#color/color_text_default"
android:textSize="12dp"
android:visibility="visible" />
<Button
android:id="#+id/btnHistory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_history"
android:paddingLeft="25dp"
android:text="History"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnFavorites"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_favorites"
android:paddingLeft="30dp"
android:text="Favorites"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
<Button
android:id="#+id/btnAlerts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/job_tab_bar_alerts"
android:paddingLeft="12dp"
android:text="Alerts"
android:textColor="#color/color_text_default"
android:textSize="12dp" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.32" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</TabWidget>
</LinearLayout>
</TabHost>
You'd think someone would have replied, in the end it was stupid simple.
The answers is:
Tabhost using tabactivity will display the background through menu items if they are re-sized. Add a color coded (html notation) color to the schema, then call that with the android:border-background construct.
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>
I am having issues with creating a menu (not menu when you click menu button -- but menu as in the welcome screen to select items). I went to ImageView and TextView float (left/right) Android and I did not solve my issue. I would like to create at least five or six options to select from on this menu class. This is my menu.xml file. Please let me know what I need to do.
The issue is that the first item appears, but the second item overlaps the first item. I been picking away with this for the last hour and cannot solve this issue.
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon" />
<TextView
android:textSize="18dp"
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site" />
<ImageView
android:src="#drawable/ic_menu_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
thannk you.
Why don't you use a LinearLayout (like a vertical one with severals little horizontal ones inside, each with a TextView and an ImageView) ?
Anyway, if you want to use RelativeLayout you should use something like android:layout_toRightOf, android:layout_toLeftOf, android:layout_above or android:layout_below in your xml to place your elements.
I advise you to take a look at http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html if you don't know those parameters.
You use a RelativeLayout but you don't place elements with reference to each other.
Example :
<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/topBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top"
android:layout_centerHorizontal="true">
</Button>
<Button android:id="#+id/leftBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_below="#+id/topBtn"
android:layout_toLeftOf="#+id/topBtn">
</Button>
</RelativeLayout>
http://developer.android.com/reference/android/widget/RelativeLayout.html
A Linear Layout would be better.
Try this and tell me if this is what you needed:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:orientation="vertical"
>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" Check Your Account"
android:textSize="18dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/message_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=" View our Site"
android:textSize="18dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_add" android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
I am attempting to create some modular UI elements as described at Android Developers - Creating Reusable UI Components, unfortunately I'm not getting the desired result.
The article states:
you can override all the layout parameters. This means that any android:layout_* attribute can be used with the tag.
My XML code looks like this (relevant parts):
<?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">
<include android:id="#+id/radio_group"
layout="#layout/radio_buttons"
android:layout_marginTop="75dp"
/>
<include android:id="#+id/player_group"
layout="#layout/player_buttons"
android:layout_alignParentBottom="true"
/>
<EditText android:id="#+id/text_field"
android:singleLine="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Login ID:"
android:layout_below="#id/player_group"
/>
Here is the first of the included layouts:
<RadioGroup
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/radio_group"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"
>
<RadioButton android:id="#+id/radio01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Song #1"
android:paddingLeft="45dp"
/>
[two more identical buttons]
<TextView android:id="#+id/choice"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="you have selected:"/>
</RadioGroup>
and the other:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:text="btn01"
android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
/>
<Button android:text="#+id/Button02"
android:id="#+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
/>
<Button android:text="Start Playing"
android:id="#+id/startPlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:onClick="doClick"
/>
</LinearLayout>
Unfortunately - this results in all the included UI elements bunched together on top of each other at the top of the screen. The EditText element aligns correctly, but none of the included elements will respond to any overrided attributes. I have tried a number of different ones with the same non-results.
Note: I also tried putting an android:layout_alignParentBottom="true" parameter into the included layouts thinking that it might need to be in there for it to be overridden, but got the same non-result.
also - the marginTop param doesn't do anything either.
So - any idea what I'm doing wrong?? This is driving me crazy!
Note: there was a question asked a little while ago about how to style included layouts, the answer was a reference to the page on Reusable UI Components. Just want to say that I have read that question and the answer and it hasn't helped.
There is a bug when using include where included layouts are not positioned correctly unless you specify values for android:layout_width and android:layout_height. Try this:
<?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">
<include android:id="#+id/radio_group"
layout="#layout/radio_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="75dp"
/>
<include android:id="#+id/player_group"
layout="#layout/player_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/radio_group"
/>
<EditText android:id="#+id/text_field"
android:singleLine="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Login ID:"
android:layout_below="#id/player_group"
/>
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)