Directly Nesting Linear Layouts only shows the first child view - android

I am trying to nest two Linear Layouts as direct children of another Linear Layout. Eventually the intention is for these two layouts to be nested within a ViewFlipper, so each of the two Linear Layouts will be flipped in and out of the screen.
The Layouts work fine until I nest the two Linear Layouts within a parent element, in which case only the first widget in the first child is displayed. So I have something like this:
<LinearLayout (parent)...
<LinearLayout (child1)...
<child1's Widgets... <---only the first widget here is being shown
<LinearLayout (child2)...
<child2's widgets...
I have no idea why this could be happening. Can anybody shed any light??
Full code:
<?xml version="1.0" encoding="utf-8"?>
<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="#FFFFFF">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="22sp"
android:layout_gravity="center"
android:gravity="center"
android:text="Hello, is this a great app?"
android:textColor="#000000"
android:layout_marginBottom="10dip"
android:layout_marginTop="8dip"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnYes"
android:text="Yes"
android:textSize="20sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginBottom="7dip"
android:layout_marginLeft="4dip"
android:layout_marginRight="4dip"/>
<Button
android:id="#+id/btnNo"
android:text="No"
android:textSize="20sp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginBottom="7dip"
android:layout_marginLeft="4dip"
android:layout_marginRight="4dip"/>
</LinearLayout>
<!-- <ViewFlipper
android:layout_width="fill_parent"
android:layout_height="fill_parent">
-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout <!-- ONLY THE CONTENT FROM HERE IS BEING SHOWN -->
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:text="Lat:"
android:textSize="16sp"
android:layout_weight="1"
android:layout_marginLeft="12dip"/>
<TextView
android:id="#+id/lblLat"
android:layout_width="0px"
android:layout_height="wrap_content"
android:text=""
android:textSize="16sp"
android:layout_weight="3"
android:gravity="right"
android:layout_marginRight="12dip"/>
</LinearLayout> <!--NO MORE CONTENT Is SHOWN AFTER HERE -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:text="Lon:"
android:textSize="16sp"
android:layout_weight="1"
android:layout_marginLeft="12dip"/>
<TextView
android:id="#+id/lblLon"
android:layout_width="0px"
android:layout_height="wrap_content"
android:text=""
android:textSize="16sp"
android:layout_weight="3"
android:gravity="right"
android:layout_marginRight="12dip"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:text="Number of satellites:"
android:textSize="16sp"
android:layout_weight="3"
android:layout_marginLeft="12dip"/>
<TextView
android:id="#+id/lblSats"
android:layout_width="0px"
android:layout_height="wrap_content"
android:text=""
android:textSize="16sp"
android:layout_weight="1"
android:gravity="right"
android:layout_marginRight="12dip"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:text="Signal To Noise:"
android:textSize="16sp"
android:layout_weight="3"
android:layout_marginTop="25dip"
android:layout_marginLeft="12dip"/>
<TextView
android:id="#+id/lblSNR"
android:layout_width="0px"
android:layout_height="wrap_content"
android:text=""
android:textSize="16sp"
android:layout_weight="1"
android:gravity="right"
android:layout_marginTop="25dip"
android:layout_marginRight="12dip"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/lblAddresses"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="16sp"
android:layout_marginLeft="12dip"
android:minLines="3"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/lblAbout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Stuff About App"
android:textSize="16sp"
android:layout_marginLeft="12dip"
android:minLines="3"/>
</LinearLayout>
<!-- </ViewFlipper> -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/btnLookup"
android:text="LookUp"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dip"
android:paddingTop="1dip"
android:paddingBottom="5dip"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dip"
android:layout_marginLeft="8dip" />
<Button
android:id="#+id/btnQuit"
android:text="Quit"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="20dip"
android:paddingTop="1dip"
android:paddingBottom="5dip"
android:layout_marginBottom="8dip"
android:layout_marginRight="8dip" />
</RelativeLayout>
</LinearLayout>

Make sure to have on all your LinearLayout tags an android:orientation property.
<LinearLayout
..
android:orientation="vertical|horizontal">
...
</LinearLayout>
If you want to display the child components in vertical, you need to indicate it explicitly because by default it is set to horizontal.

Related

align buttons with texts to the left side xml android

In this code I need align the buttons a Textview to the left, I try everythnin , with relative layout, gravity etcc....
I dont now why this align still togehter to the center in horizontal line, I need to the left side!
<?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:background="#color/dark_background"
android:orientation="vertical"
android:gravity="left" >
<ScrollView android:id="#+id/ScrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:gravity="left"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="6dip"
>
<TextView
android:id="#+id/help_page_intro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/help_page_intro"
android:padding="2dip"
android:layout_weight="1"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="4dip"
android:layout_gravity="left"
>
<Button android:id="#+id/help_button1"
android:layout_weight="1"
android:layout_width="180dip"
android:layout_height="wrap_content"
style="#style/HelpButton.Dark"
android:onClick="onClickHelp"
android:text="#string/help_title_section1"
android:drawableTop="#drawable/help_image1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/help_text_section1"
android:padding="8dip"
android:layout_weight="1"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button android:id="#+id/help_button2"
android:layout_weight="1"
android:layout_width="180dip"
android:layout_height="wrap_content"
android:gravity="left"
style="#style/HelpButton.Dark"
android:onClick="onClickHelp"
android:text="#string/help_title_section2"
android:drawableTop="#drawable/help_image2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/help_text_section2"
android:padding="8dip"
android:layout_weight="1"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentLeft="true">
<Button android:id="#+id/help_button3"
android:layout_weight="1"
android:layout_width="180dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
style="#style/HelpButton.Dark"
android:onClick="onClickHelp"
android:text="#string/help_title_section3"
android:drawableTop="#drawable/help_image3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/help_text_section3"
android:padding="8dip"
android:layout_weight="1"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left" >
<Button android:id="#+id/help_button4"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_width="180dip"
android:layout_height="wrap_content"
android:gravity="left"
style="#style/HelpButton.Dark"
android:onClick="onClickHelp"
android:text="#string/help_title_section4"
android:drawableTop="#drawable/help_image4"/>
<TextView
android:layout_width="wrap_content"
android:gravity="left"
android:layout_height="wrap_content"
android:text="#string/help_text_section4"
android:padding="8dip"
android:layout_weight="1"
/>
</LinearLayout>
Sorry, not fully understanding. Did you want them lined up vertically? Then that would just be setting orientation to vertical in the linear layout. I looked at what this xml does right now. It appears to be button which is half the screen and textview with is the other half. Could you explain a little more what you want to see?
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="4dip"
>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button android:id="#+id/help_button1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="onClickHelp"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:id="#+id/help_page_intro"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:textColor="#color/black"
android:padding="2dip"
android:layout_weight="1"
/>
<View
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

How to have multiple TextView and EditText in one row each

I'm trying to get a form such a way that on each row the TextView is on the left and the EditText is on the right.
The below code works fine for one row, however,r if I have multiple rows then it doesn't draw TextView and EditText on each row but instead tries to jam everything together.
<?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"
android:orientation="horizontal"
android:padding="10dip"
android:background="#FFFFFF"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Full Name"
android:textSize="20dp"
android:layout_weight="1"
android:textColor="#000000"
/>
<EditText
android:id="#+id/name"
android:gravity="center"
android:hint="John Doe"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Age"
android:textSize="20dp"
android:layout_weight="1"
android:textColor="#000000"
/>
<EditText
android:id="#+id/age"
android:gravity="center"
android:hint="age"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
This is what it looks like
There are so many ways to achieve the Layout which you been looking for. You were on track by adding layout_weight="1" in Views. Here's the one which uses your Layout only with little bit of orientation changes.
Explaination:
LinearLayout //ParentView Orientation - Vertical
LinearLayout //childView Orientation - Horizontal
TextView & EditText // Taking equal space with help of layout_weight="1"
LinearLayout //childView Orientation - Horizontal
TextView & EditText // Taking equal space with help of layout_weight="1"
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dip"
android:background="#FFFFFF"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Full Name"
android:textSize="20dp"
android:layout_weight="1"
android:textColor="#000000"
/>
<EditText
android:id="#+id/name"
android:gravity="center"
android:hint="John Doe"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Age"
android:textSize="20dp"
android:layout_weight="1"
android:textColor="#000000"
/>
<EditText
android:id="#+id/age"
android:gravity="center"
android:hint="age"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
// try this way,hope this will help 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="wrap_content"
android:padding="5dp"
android:background="#FFFFFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.40"
android:text="Full Name"
android:textSize="20sp"
android:gravity="right"
android:textColor="#000000"/>
<EditText
android:id="#+id/name"
android:gravity="center"
android:hint="John Doe"
android:layout_width="0dp"
android:layout_weight="0.60"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:layout_marginLeft="5dp">
<TextView
android:layout_width="0dp"
android:layout_weight="0.40"
android:layout_height="wrap_content"
android:text="Age"
android:gravity="right"
android:textSize="20sp"
android:textColor="#000000"/>
<EditText
android:id="#+id/age"
android:gravity="center"
android:hint="Age"
android:layout_width="0dp"
android:layout_weight="0.60"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

How to prevent layout moving?

I have one main layout in my quiz game and in it 3 more nested layout, one below another, vertical. In the top one I have a text view for the question, the middle one with four buttons vertically arranged. Now, when I have one line question everything is fine, but as soon as question goes to two line, my buttons move down one row. How to prevent this? I want everything below my question to be fixed, static, not to move.
<?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:background="#drawable/background"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="404dp"
android:orientation="vertical"
android:weightSum="2"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1" >
<TextView
android:id="#+id/tvPitanje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="#string/tvPitanje"
android:textSize="22sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1" >
<Button
android:id="#+id/bOdgovor1"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor1"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor2"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor2"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor3"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor3"
android:textSize="26sp" />
<Button
android:id="#+id/bOdgovor4"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:background="#drawable/buttons"
android:text="#string/bOdgovor4"
android:textSize="26sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<Button
android:id="#+id/bIzlazIzKviza"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:background="#drawable/buttons"
android:text="#string/bIzlazKviz"
android:textSize="23sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/tvCountdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/tvCountdown"
android:textColor="#ff0000"
android:textSize="29sp" />
<TextView
android:id="#+id/tvSkor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="#string/tvSkor"
android:textSize="23sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/tvBrojPitanja"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="30dp"
android:text="1"
android:textSize="32sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
A little later, but here we go, there are several solutions for this problem I will point out here two of them that probably are the most user friendly:
Use a scrollview for everything, IMHO this is the most user friendly solution.
Use scrollview just for text and buttons with a defined height, and put the below text and buttons static underneath, make use of a relative layout then.
Marquee text view
the first option I will put out here, with some layout refactoring included, the second one I wont recommend to use, put pretty simple to achieve if you have example one:
<?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:background="#android:color/background_light"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tvPitanje"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="long text that will automaticly scroll and make sure all content will be displayed right in the scrollview this is the best case scenario"
android:textSize="22sp"/>
<Button
android:id="#+id/bOdgovor1"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:text="one"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor2"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="two"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor3"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="three"
android:textSize="26sp"/>
<Button
android:id="#+id/bOdgovor4"
android:layout_width="260dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:text="four"
android:textSize="26sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Button
android:id="#+id/bIzlazIzKviza"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="15dp"
android:text="left"
android:textSize="23sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tvCountdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="next"
android:textColor="#ff0000"
android:textSize="29sp"/>
<TextView
android:id="#+id/tvSkor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:text="middle"
android:textSize="23sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:id="#+id/tvBrojPitanja"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="30dp"
android:text="right"
android:textSize="32sp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Marquee solution less nice
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit ="marquee_forever"
android:scrollHorizontally="true"
android:focusable="true"
android:focusableInTouchMode="true"

Complex ListView item layout with all elements the same size for each item?

I am trying to build a complex listview item layout with all of the elements being the same dimensions for each listview item with the entire layout taking up the whole width of the screen. So far I have attempted doing this using a linearlayout and found that this is the wrong approach. I have then attempted using a relative layout however this has not worked for me so I hope that someone can point out how I can make this work.
Here is a diagram of what I am trying to build.
Here is some more details about the diagram:
Only elements 5 and 6 have the same content for every list item. The
rest of elements all will have different text however the layout
should always be the same size.
Element 4 should only be 2 lines. Elements 1, 2 and 3 should only be 1
line.
Element 2 should be aligned left and element 3 should be aligned
right.
Element 2 and 3 should each be half of the width of element 4.
Here is my attempt at this layout using a RelativeLayout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="2dp">
<TextView
android:id="#+id/txtRaceNumber"
android:layout_width="20dp"
android:layout_height="fill_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center"
android:layout_gravity="center"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/txtRaceName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_toRightOf="#id/txtRaceNumber"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/txtRaceClass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:maxLines="1"
android:ellipsize="marquee"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_toRightOf="#id/txtRaceNumber" />
<TextView
android:id="#+id/txtRaceStartTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:maxLines="1"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/txtRaceClass" />
<ImageButton
android:id="#+id/btnTracklist"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#null"
android:paddingRight="8dip"
android:focusable="false"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/txtRaceStartTime" />
<ImageView
android:src="#drawable/go"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/btnTracklist" />
</RelativeLayout>
Using this RelativeLayout all of the elements appear scrambled within the layout.
How can I get all of these elements to align as I have shown in the Diagram?
Is this what you need?
<LinearLayout
android:id="#+id/lin1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<TextView
android:id="#+id/txtRaceNumber"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"
android:text="TExt1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="#+id/lin1"
android:layout_toLeftOf="#+id/lin3">
<TextView
android:id="#+id/txtRaceName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text4"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/txtRaceClass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="text2"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/txtRaceStartTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:text="text3"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/lin3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnTracklist"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#null"
android:focusable="false"
android:paddingRight="8dip" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_launcher" />
</LinearLayout>
try this code
<?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="90dp"
android:gravity="center|left"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="left|center"
android:layout_gravity="center"
android:gravity="center"
android:text="TextView"
android:textColor="#FFFFFF"
android:textSize="15sp" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|center"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:text="TextView"
android:textColor="#FFFFFF"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight="1"
android:text="TextView"
android:textColor="#FFFFFF"
android:textSize="15sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight="1"
android:text="TextView"
android:textColor="#FFFFFF"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_marginRight="3dp"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_marginRight="3dp"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
</LinearLayout>
I have managed to get the desired layout using weightSum on the main layout.
Here is the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/twolinechecked"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:maxHeight="?android:attr/listPreferredItemHeight"
android:paddingTop="2dip"
android:paddingBottom="2dip"
android:orientation="horizontal"
android:weightSum="1"
android:descendantFocusability="blocksDescendants">
<TextView
android:id="#+id/txtRaceNumber"
android:layout_width="40dip"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center"
android:layout_gravity="center"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginLeft="6dip">
<TextView
android:id="#+id/txtRaceName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:id="#+id/linearTextInner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_vertical|center_horizontal">
<TextView
android:id="#+id/txtRaceClass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:maxLines="1"
android:ellipsize="marquee"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/txtRaceStartTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_weight="1"
android:maxLines="1"
android:layout_alignParentRight="true"
android:gravity="right" />
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="#+id/btnTracklist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:layout_marginLeft="5dip"
android:paddingRight="8dip"
android:layout_gravity="center_vertical|center_horizontal" />
<ImageView
android:src="#drawable/go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true" />
</LinearLayout>
Follow below structure I feel you can achieve what you want use weight and weightSum.
<LinearLayout orientation="horizontal">
<LinearLayout>
<TextView/>
</LinearLayout>
<LinearLayout orientation="vertical">
<TextView/>
<LinearLayout orientation="horizontal">
<TextView/>
<TextView/>
</LinearLayout>
<ImageButton/>
<ImageView/>
</LinearLayout>
EDIT
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:baselineAligned="false"
android:orientation="horizontal"
android:padding="2dp"
android:weightSum="1" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.2" >
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:orientation="vertical"
android:weightSum="1" >
<TextView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="0.7"
android:gravity="center" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="0.3"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:gravity="center" />
<TextView
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
<ImageButton
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.15" />
<ImageButton
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.15" />
</LinearLayout>

Scrollable list of buttons within SliderDrawer

No luck after a few days of researching this one. Should be simple, but I'm just not seeing it.
There is an activity page, which has a SliderDrawer. SlidingDrawer icon sits at the bottom, on click or swipe slides open drawer correctly with list of buttons. That all works fine. The problem I'm having is that to accomodate different screensizes and orientations, and the likely addition of additional buttons, I need the contents of that SlidingDrawer to be scrollable. Layout is below. I have tried wrapping the LinearLayout that holds the buttons in a ScrollView without success.
Suggestions?
<?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">
<LinearLayout
android:id="#+id/frontpagetitlewrapper"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/top"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="blah"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="20sp"
android:gravity="center"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/mid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="and"
android:textColor="#000000"
android:layout_below="#+id/top"
android:textSize="16sp"
android:textStyle="bold"
android:gravity="center"
/>
<TextView
android:id="#+id/bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="blather"
android:textColor="#000000"
android:layout_below="#+id/mid"
android:textSize="18sp"
android:textStyle="bold"
android:gravity="center"
/>
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:id="#+id/frameLayout"
android:layout_alignParentBottom="true">
<SlidingDrawer android:layout_height="wrap_content"
android:handle="#+id/handle"
android:content="#+id/content"
android:id="#+id/slide"
android:orientation="vertical"
android:layout_width="fill_parent"
>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#id/handle"
android:src="#drawable/opendrawer">
</ImageView>
<ScrollView
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#id/content"
android:orientation="vertical">
<Button android:text="a" android:id="#+id/btnA" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="20dip"></Button>
<Button android:text="b" android:id="#+id/btnB" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="20dip"></Button>
<Button android:text="c" android:id="#+id/btnC" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="20dip"></Button>
<Button android:text="d" android:id="#+id/btnD" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="20dip"></Button>
<Button android:text="e" android:id="#+id/btnE" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="20dip"></Button>
<Button android:text="f" android:id="#+id/btnF" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" android:textSize="20dip"></Button>
</LinearLayout>
</ScrollView>
</SlidingDrawer>
</FrameLayout>
</RelativeLayout>
I think your problem is that you've tagged the nested LinearLayout with instruction
android:id="#id/content"
so that's the component the SlidingDrawer is using for the content.
Try tagging the ScrollView instead.
<?xml version="1.0" encoding="utf-8"?>
<SlidingDrawer android:layout_width="wrap_content"
android:id="#+id/SlidingDrawer" android:handle="#+id/slideHandleButton"
android:content="#+id/contentLayout" android:padding="10dip"
android:layout_height="250dip">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/slideHandleButton"
android:background="#drawable/closearrow"></Button>
<LinearLayout android:layout_width="wrap_content"
android:id="#+id/contentLayout" android:orientation="vertical"
android:gravity="center|top" android:padding="10dip"
android:background="#C0C0C0" android:layout_height="wrap_content">
<Button android:id="#+id/Button01" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Content"></Button>
<Button android:id="#+id/Button02" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Content"></Button>
<Button android:id="#+id/Button03" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Content"></Button>
</LinearLayout>
</SlidingDrawer>

Categories

Resources