We Keep Coding

Position layouts inside list items

I have a list and I want on the left part of a list item to show an image and on the right of the image
a series of widgets aligned vertically, one of which is an include:#layout
Having a relative layout I can add widgets using layout to right of the pic but:
1) I can not align the linear layout to the right of pic as there seems to be no such attribute
2) Without nesting the widgets in a linear layout and placing them only just to the right of the pick and one of top of the other I can not place the include:#layout where I want as it does not have a layout_bellow etc attribute.
How can I create such layouts?
Update:
++++++++ ++++++++++++++++++++
+IMAGE + TEXTVIEW +
+ + LAYOUT FILE +
+ + TEXTVIEW+
+++++++++++++++++++ TEXTVIEW+
UPDATE:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:id="#+id/thumb"
android:layout_alignParentLeft="true"
/>
<TextView
android:id="#+id/friend_name”
android:layout_toRightOf="#id/thumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:gravity="top"
/>
<ViewStub
android:id="#+id/stub_friend_status”
android:inflatedId="#+id/friend_status”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/thumb"
android:layout_below="#id/friend_name"
android:layout="#layout/friend_status”/>
<TextView
android:id="#+id/latest_date”
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/stub_friend_status"
android:layout_toRightOf="#id/thumb"
/>
<ViewStub
android:id="#+id/stub_general_info”
android:inflatedId="#+id/general”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/latest_date"
android:layout_alignParentBottom="true"
android:layout="#layout/general_info”/>
</RelativeLayout>

Here is layout, you can make left/right part equally, left part put image and right part you can put layout vertically:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
//left part
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
>
<FrameLayout
android:id="#+id/image_frame"
android:layout_width="img_width"
android:layout_height="img_height"
android:gravity="center"
>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/your_img"/>
</FrameLayout>
</LinearLayout>
//right part
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:gravity="center_vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_1"
... ...
android:layout_gravity="left"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_2"
... ...
android:layout_gravity="left"
/>
... ...
</LinearLayout>
</LinearLayout>
If you want left part smaller than right, then you can change the layout_weight of left/right as 1/2 or 2/3 ...
Hope this help!

Splitting Android Layout Vertically Adding Gravity To Both Sides To Center Objects

I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>

First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.

Here's some code which should be self-explanotory:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:

How to achieve evenly spaced layout

My current layout looks the following:
MY XML layout looks like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/tvLetter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="3"
android:text=""
android:gravity="center"
android:textSize="#dimen/letter_size"
android:textColor="#FFFFFF"
android:background="#drawable/bd" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="1" >
<Button
android:id="#+id/colorButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:background ="#drawable/colors"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/soundButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:background="#drawable/sound" />
<Button
android:id="#+id/eraserButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/eraser" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="2" >
<ImageView
android:id="#+id/ivIcon"
android:layout_width="#dimen/letter_icon"
android:layout_height="#dimen/letter_icon"
android:scaleType="fitXY"
android:layout_alignParentLeft="true"
android:background="#drawable/zebra" />
<LinearLayout
android:id="#+id/actionHolder"
android:layout_toRightOf="#+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/wordSound"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:background="#drawable/sound" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
My #dimen/letter_icon is being used for different sizes based on the screen size. I am trying to make it compatible with both phone and tablet (different size screen). How do I achieve the following in my layout:
Let's say the ZEBRA text is inside a textview and the sound is in a button.
I am thinking the bottom ImageView has to be inside another layout, linearleayout maybe? and take up 3/4 of the space of the screen width.

Put your ZEBRA and SPEAKER buttons in vertical LinearLayout. Set buttons' height to match_parent and layout_weight to 1 and you should have what you want
and if you want to distribute width among your buttons' container and ImageView, set them width to match_parent and play with layout_weight there.

Putting a menu bar on the bottom of the screen while using ExpandableListView

I figured out how to get the menu bar on top of the screen. It stays in position while I move around the main menu I created using expandableListView. However, I would like the menu bar to be on the bottom of the screen instead of the top. I played around with relativeView and got the bar on the bottom, however, the main menu disappears.
Here is my main xml file
<?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:orientation="vertical" >
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonbefore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="back" />
<Button
android:id="#+id/buttonnext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="Next" />
</LinearLayout>
<ExpandableListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/main_no_items" />
Then I used this for java to get it to appear in my program.
LinearLayout bottomMenu = (LinearLayout)findViewById(R.id.buttons);
I tried playing around with the gravity and it did nothing. I can add more code from my program if you think it will help.

I'm assuming your buttons LinearLayout is the 'menu bar' you're referring to?
You can actually accomplish what you're looking for using either a RelativeLayout or a LinearLayout.
LinearLayout:
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<ExpandableListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/main_no_items" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonbefore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="back" />
<Button
android:id="#+id/buttonnext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
</LinearLayout>
The buttons are bottom-aligned by setting the gravity, while the list is told to take up all other available space by giving it a weight of '1' and setting a height of '0dp'. That will cause it to stretch as much as possible without pushing the buttons off-screen.
RelativeLayout:
<?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="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/buttons"
android:orientation="vertical" >
<ExpandableListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<TextView
android:id="#android:id/empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="#string/main_no_items" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonbefore"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="back" />
<Button
android:id="#+id/buttonnext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
</RelativeLayout>
The buttons are bottom-aligned by setting the alignment on the parent. The list is told to fill all height, but stay 'above' the buttons.
On a general note: in order for this to work, I'm pretty sure that the list and empty views need to be combined together in their own layout.

The way to align the buttons to the bottom is to change your top level LinearLayout into a RelativeLayout. Then you can add the attribute android:layout_alignParentBottom="true" to your LinearLayout #+id/buttons, which holds your two buttons.

How can I set width of element in percent?

My question is very easy. I have layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/mobile_background"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_height="fill_parent"
>
<Button
android:text="GET MESSAGES"
android:
android:id="#+id/buttonMessages"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:text="REGISTRATION"
android:id="#+id/buttonRegistration"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:text="SETTINGS"
android:id="#+id/buttonSettings"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
But I need to set non-fixed size for button - I need to set size 30% of screen width. How can I do it?

Try nesting your buttons in horizontal LinearLayouts with another view to the side for padding. Assign both your button and view android:layout_width="0dp", then give your button android:layout_weight="3" and the view android:layout_weight="7". This will give your buttons 30% and the empty view 70%.
<?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: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:orientation="horizontal" >
<Button
android:id="#+id/buttonMessages"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="GET MESSAGES" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonRegistration"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="REGISTRATION" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7" />
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonSettings"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="SETTINGS" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7" />
</LinearLayout>
</LinearLayout>

With three buttons it's hard to set 30-70 :) I'll show you how to do it with two, you'll get it.
If you use fill_parent for width, then the space will be distributed in reciprocal proportions. So you should set a weight of 7 for the smaller button, and 3 for the larger one. With more buttons it's trickier, but you can do the math: 1/x + 1/y + 1/z = 1 and you'll have equations for the proportions, in a case of 30%, 20%, 50%:
1/x / 3 = 1/y / 2 = 1/z / 5 Or you can just try and set values that look good :)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/mobile_background"
android:layout_width="fill_parent"
android:gravity="center"/>
<Button
android:text="Narrow button"
android:
android:id="#+id/buttonMessages"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="7"/>
<Button
android:text="Wide button"
android:id="#+id/buttonRegistration"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"/>
</LinearLayout>

This can't be done in the XML. You would have to specify the size in the code. I would do that in the onCreate() of the activity:
obj.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT,0.25));
This means "use 100% of the parent's height but 25% of the parent's width".
source