Develop Reference

How to change buttons layout from horizontal to vertical?

I'm translating a chinese app and I want to change the bottom buttons layout from horizontal to vertical in order to fit correctly the translations. I've been playing with the orientation and gravity from the LinearLayout and CheckedTextView but the buttons stay always in horizontal.
This is the xml code,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
android:background="#drawable/homepage_ground" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:nav_stick="http://schemas.android.com/apk/res-auto">
<include layout="#layout/title_bar_transparent_white" />
<RelativeLayout android:layout_width="fill_parent" android:layout_height="0.0px" android:layout_weight="1.0">
<com.rockrobo.ui.RRNavigateStick android:id="#id/navigate_stick" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" />
<TextView android:id="#id/rc_starting" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10.0dip" android:text="#string/rc_starting_up" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" />
</RelativeLayout>
<LinearLayout android:layout_gravity="center" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="#dimen/rc_bot_margin">
<CheckedTextView android:textColor="#color/rc_button_text_color" android:gravity="center" android:id="#id/spot_clean" android:background="#drawable/rc_button_bg" android:clickable="true" android:layout_width="#dimen/rc_button_width" android:layout_height="#dimen/rc_button_height" android:layout_marginRight="#dimen/rc_bot_bar_gap" android:text="#string/rr_spot" />
<CheckedTextView android:textColor="#color/rc_button_text_color" android:gravity="center" android:id="#id/clean" android:background="#drawable/rc_button_bg" android:clickable="true" android:layout_width="#dimen/rc_button_width" android:layout_height="#dimen/rc_button_height" android:layout_marginRight="#dimen/rc_bot_bar_gap" android:text="#string/rr_clean" />
<CheckedTextView android:textColor="#color/rc_button_text_color" android:gravity="center" android:id="#id/charge" android:background="#drawable/rc_button_bg" android:clickable="true" android:layout_width="#dimen/rc_button_width" android:layout_height="#dimen/rc_button_height" android:text="#string/rr_charge" />
</LinearLayout>
Could anybody help? Thanks.

Hi try changing linear layout width to match parent and orientation to vertical

ListView hidden behind button

The contents of my list view get hidden behind the button as follows:
The xml file is:
<?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"
android:layout_gravity="top"
>
<ListView
android:id="#android:id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false"
/>
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
<Button
android:text="Send"
android:id="#+id/Button"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="addItems"
>
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_toLeftOf="#id/Button"
android:layout_height="wrap_content"
>
</EditText>
</RelativeLayout>
</RelativeLayout>
The TextView for each row is as follows:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content
android:layout_gravity="right"
android:gravity="right"
android:textSize="20sp"
/>
What should i do to align it properly (as in above the button)?
Also when the listView is with just one or two entries, and when the keyboard is opened to type, the whole view shifts? How do I fix that as well? Thanks in advance

Cleaned up and corected the code a bit. Perhaps this is what you were looking for. Let me know if it works. Cheers !
<?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"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" />
<EditText
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:layout_toLeftOf="#id/Button" />
</RelativeLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/InnerRelativeLayout" />
</RelativeLayout>

adding android:layout_above="#+id/InnerRelativeLayout" to your ListView.
RelativeLayout has child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
For put your InnerRelativeLayout layout at Top add android:layout_alignParentTop="true" to your InnerRelativeLayout and remove android:layout_alignParentBottom="true"
Update: set up your Layout like below:
<?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"
android:background="#color/Beige "
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="addItems"
android:text="Send" >
</Button>
<EditText
android:id="#+id/message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/Button"
android:hint="Enter text" >
</EditText>
</RelativeLayout>
<ListView
android:id="#+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/InnerRelativeLayout"
android:drawSelectorOnTop="false" />
</RelativeLayout>
Output:

use android:layout_above="#+id/InnerRelativeLayout" in your listview

Make the outer RelativeLayout into a LinearLayout with orientation vertical. Then, for the ListView set layout_height as 0dp and layout_weight as 1. The ListView will fill up all the remaining space in the LinearLayout without overlapping other views.
Also, stop using fill_parent, it's been deprecated and you should use match_parent instead.

Scrolling & Layout Problems with ExpandableListView

I am developing an app which needs a unscrollable header at the top, Scrollable ExpandableListView in the middle and then unscrollable footer at the bottom. see the image below
The problem is Scrollable property of ExpandableListView, when i expand parent view of the ExpandableListView, list scroll under footer, unscrollable, which is the problem. See below
here's the xml
<?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="#F2B1DBF3"
android:orientation="vertical" >
<include
android:id="#+id/callheader"
android:layout_alignParentTop="true"
layout="#layout/callerheader" />
<ExpandableListView
android:id="#+id/exSavedVoiceList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/callheader"
android:groupIndicator="#drawable/drawableanimation"
android:paddingLeft="10dp" >
</ExpandableListView>
<LinearLayout
android:id="#+id/llbottom"
android:layout_width="match_parent"
android:layout_height="50sp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#ff33b5e5"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/bSaveNewVoice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff33b5e5"
android:contentDescription="#string/add_new"
android:drawableLeft="#drawable/setting"
android:drawablePadding="40dp"
android:text="#string/add_new"
android:textColor="#FFFFFF"
android:textSize="25sp" />
</LinearLayout>
If i put android:layout_below="#+id/exSavedVoiceList" in llbottom (LinearLayout), footer moves below if parent view is expanded.
Please provide a solution with a possible explaination.

// try this
<?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="#F2B1DBF3"
android:orientation="vertical" >
<include
android:id="#+id/callheader"
layout="#layout/callerheader" />
<ExpandableListView
android:id="#+id/exSavedVoiceList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_below="#+id/callheader"
android:groupIndicator="#drawable/drawableanimation"
android:paddingLeft="10dp"/>
<LinearLayout
android:id="#+id/llbottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ff33b5e5"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/bSaveNewVoice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff33b5e5"
android:contentDescription="#string/add_new"
android:drawableLeft="#drawable/setting"
android:drawablePadding="40dp"
android:text="#string/add_new"
android:textColor="#FFFFFF"
android:textSize="25sp" />
</LinearLayout>
</LinearLayout>

Please add android:layout_above="#+id/llbottom" to your expandablelistview. and don't add android:layout_below="#+id/exSavedVoiceList" to your llbottom layout.

Android: Layout List header

I have a header for a list that contains two image buttons. I want one of those image buttons to be on the left, and the other to be on the right. This is what my xml file looks like right now but it does not work, it just puts the two image buttons on the left together. I have also tried without the additional LinearLayouts but no luck.
<?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="horizontal"
android:gravity="fill_horizontal"
android:background="#drawable/list_header_background">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="left"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/refreshBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_refresh"
android:background="#drawable/list_header_background"
/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="right"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/battleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_battle"
android:background="#drawable/list_header_background"
/>
</LinearLayout>
</LinearLayout>

As kabuko wrote, the RelativeLayout width is equal to the parent width. When we have a child view inside that RelativeLayout, we can use the android:layout_alignParentXXXXXX="true" parameter in order to align it (the child) accordingly to the parent.
<?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"
android:orientation="horizontal"
android:background="#drawable/list_header_background">
<ImageButton
android:id="#+id/refreshBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_refresh"
android:layout_alignParentLeft="true"
android:background="#drawable/list_header_background"
/>
<ImageButton
android:id="#+id/battleBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp"
android:src="#drawable/ic_battle"
android:layout_alignParentRight="true"
android:background="#drawable/list_header_background"
/>
</RelativeLayout>

You probably want to use a RelativeLayout with layout_alignParentLeft and layout_alignParentRight on the buttons.

Why can't get IgnoreGravity within RelativeLayout to work?

I have two buttons. I want one to be aligned at the top center of the application. I want to get the other button to ignore the gravity settings and go where I tell it. How do I do this?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative_layout"
android:layout_width="fill_parent"
android:gravity="center_horizontal"
android:layout_height="fill_parent" >
<Button
android:id="#+id/the_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Centered Button"
android:layout_alignTop="#id/relative_layout" />
<Button
android:id="#+id/the_button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Random Button"
android:ignoreGravity="#id/relative_layout" />
</RelativeLayout>

Do not use gravity attribute of RelativeLayout, elements within RelativeLayout can be positioned with additional attributes. Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/the_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Centered Button"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/the_button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Random Button"/>
</RelativeLayout>
See RelativeLayout tutorial and RelativeLayout.LayoutParams docs for more information about usage of RelativeLayout.