Develop Reference

Placing ImageView to the left of centered buttons

I am trying to place a ImageView object to the left of a linear layout object (that is a parent of two buttons). I basically want two buttons centered horizontally with the screen with an image place to the left of the centered buttons. I still want the buttons to remain centered horizontally, the placed image view should not be centered, just merely to the side.
Any suggestions would be really great. I may have been approaching my problem with the wrong layouts but here is what I have tried:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/gameSettingsContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.vb1115.multchoicequestion.LaunchScreen"
android:orientation="vertical"
android:gravity="center_horizontal">
<LinearLayout
android:id="#+id/buttonContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ToggleButton android:id="#+id/mathButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Math"
android:textOn="Math"
android:text="Math"/>
<ToggleButton android:id="#+id/bioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Biology"
android:textOn="Biology"
android:text="Biology"/>
</LinearLayout>
<ImageView
android:id="#+id/animatedArrow"
android:src="#mipmap/green_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/buttonContainer"/>
</RelativeLayout>

Although I don't have my Android Studio to test, I can already make a few assumptions...
1st, no need to use android:orientation="vertical" nor android:gravity="center_horizontal" for your root RelativeLayout...
2nd, to position the 2 children elements use android:layout_centerHorizontal for the LinearLayout, and keep android:layout_alignParentLeft for your ImageView...
This should begin to be a bit better... The main idea is that in a RelativeLayout it's usually more efficient to let the children decide their position... Hope this will help.

Here solution
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/gameSettingsContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:id="#+id/buttonContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ToggleButton
android:id="#+id/mathButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Math"
android:textOff="Math"
android:textOn="Math"/>
<ToggleButton
android:id="#+id/bioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Biology"
android:textOff="Biology"
android:textOn="Biology"/>
</LinearLayout>
<ImageView
android:id="#+id/animatedArrow"
android:layout_toStartOf="#+id/buttonContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/green_arrow"/>
</RelativeLayout>

Without having android studios to test:
To center the LinearLayout within the RelativeLayout use the Layout_centerHorizontal="true"
<LinearLayout
android:id="#+id/buttonContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
For each of the buttons to be distributed evenly and centered use layout_weight="1" (so each have the same weight) and gravity="center_horizontal"
<ToggleButton android:id="#+id/mathButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Math"
android:textOn="Math"
android:text="Math"
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
<ToggleButton android:id="#+id/bioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Biology"
android:textOn="Biology"
android:text="Biology"
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
Then place the ImageView to layout_toStartOf your buttonContainer
<ImageView
android:id="#+id/animatedArrow"
android:src="#mipmap/green_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/buttonContainer">

Relative Layout containing FrameLayout and few other components

firstly excuse me for terrible naming with the subject.
I have the following layout setup:
<RelativeLayout 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"
tools:context=".PersonDetails" >
<FrameLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/default_cover">
</ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</FrameLayout>
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
What i am trying to achieve is to have a banner (much like facebook cover that spans across the top of the screen). And have a thumbnail photo at the corner left of the banner.
The height of the banner should only takes up about 1/4 of the height of the screen. Since i would need the rest of the space for other components.
Immediately below the banner i would like to have a TextView (on the leftside) and a button on the rightside.
So far i can only able to put the thumbnail on top of the banner, but i don't know how to place it on the lower left (i could set it using marginTop but, i believe this is not the correct way of doing it).
Does anyone know how to achieve this? Thanks.
EDIT #1:
Here is the UI

From your description i think you want to make something like this:
I used a linearlayout with 2 layouts as content. Using the android:layout_weight attribute we can make the top layout take up 1/4th of the space, while the bottom layout has the rest to use.
Then to position the icon in the top layout we use alignParentBottom to make it stick to the bottom.
<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"
tools:context=".PersonDetails"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/default_cover"></ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="10dp">
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</LinearLayout>

Android ExpandableListAdapter View layout not displaying as desired :-(

I have an XML layout for a view representing one item as displayed by a ExpandableListAdapter. (The XML that is duplicated once for each list item, not the main activity layout). I initially tried a LinearLayout but this hid the final of the three widgets (a image button). I understand why that doesn't work but I then tried a RelativeLayout but the text view does not show.
I'll display the relative layout first along with a screenshot and also append my initial layout and screenshot at the bottom FWIW. Thanks for any help.
<?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="55dip"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/chkParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:checked="false"/>
<EditText
android:id="#+id/edtParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/chkParent"
android:textSize="17dip"
android:inputType="text"
android:hint="#string/strItem"/>
<ImageButton
android:id="#+id/btnExpand"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_toLeftOf="#id/edtParent"
android:src="#drawable/dark_expand"
android:clickable="true"
android:hint="#string/strViewSubItems"
android:contentDescription="#string/strViewSubItems"
android:background="#null"/>
</RelativeLayout>
Original linear layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="55dip"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/chkParent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"/>
<EditText
android:id="#+id/edtParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="17dip"
android:inputType="text"
android:hint="#string/strItem"/>
<ImageButton
android:id="#+id/btnExpand"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/dark_expand"
android:clickable="true"
android:hint="#string/strViewSubItems"
android:contentDescription="#string/strViewSubItems"
android:background="#null"/>
</LinearLayout>

Pretty sure your toLeftOf attributes should be toRightOf attributes. Give that a shot and see what happens.
Actually, your EditText should be set toRightOf="#id/chkParent" and toLeftOf="#id/btnExpand. Your ImageButton doesn't even need the toRightOf modifier, the alignParentRight attribute should cover it.

Difficulty with ScrollView and LinearLayout

I'm trying to make an Android layout: 3 components inside a vertical LinearLayout. The center component is a ScrollView that contains a TextView. When the TextView contains a significant amount of text (more than can fit on the screen), the ScrollView grows all the way to the bottom of the screen, shows scrollbars, and pushes the last component, a LinearLayout with a Button inside, off the screen.
If the text inside the TextView inside the ScrollView is short enough, the button at the bottom of the screen is positioned perfectly.
The layout I'm trying to achieve is:
The XML for the layout I've written is:
<?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">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:text="Title />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:textColor="#FFFFFF"
android:background="#444444"
android:padding="10dip" />
</ScrollView>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button android:id="#+id/login_button"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:text="#string/next_button"/>
</LinearLayout>
</LinearLayout>

The scrollview is the second view object and is set to wrap_content, which is more than the screen.
I recommend a RelativeLayout. Top textview first with android:alignParentTop="true", the bottom LinearLayout next with android:alignParentBottom="true" and the scrollview listed last in the xml with the value android:alignBelow="#id/whatYouCallTheHeader.
This will align the bottom bar at the bottom of the screen, and the header at the top, no matter the size. Then the scrollview will have its own place, after the header and footer have been placed.

you should go for relativeLayout rather than LinearLayout. And you can use some properties like alignBelow and all.

Try adding a layout weight into the ScrollView ie.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
This worked for me in a situation almost identical to the one you're presenting but left me wondering why, because it is counter-intuitive that increasing the layout weight of a control from 0 (the default if you don't specify a layout_weight) to 1 should make a control which is already using too much space smaller.
I suspect the reason it works is that by not specifying a layout_weight you actually allow the layout to ignore the size of the scroll view relative to other controls and conversely if do specify one you give it permission to shrink it in proportion to the weights you assign.

![Fixed Header-Footer and scrollable Body layout ][1]
This is what you are looking for . Most of the app in android had this type of layout ,
a fixed header and footer and a scrollable body . The xml for this layout is
<?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:background="#5599DD"
android:layout_height="fill_parent">
<!-- Header goes here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:textSize="20sp"
android:layout_gravity="center"
android:text="Title" />
<!-- Body goes here -->
<ScrollView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="web"
android:text="#string/lorem_ipsum"
android:textColor="#FFFFFF"
android:padding="10dip" />
</ScrollView>
<!-- footer goes here -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/login_button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentRight="true"
android:text="Button"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Android RelativeLayout

I'm very new to Android development and I'm trying to figure out how to use the RelativeLayout tag to position my Views. My goal is to have a large TextView on the left, with two ButtonViews to the right of it, stacked on top of each other. Here's the XML code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/wood_tile">
<TextView
android:id="#+id/life_counter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="00" />
<Button android:text="#string/button_up"
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/life_counter"/>
<Button android:text="#string/button_down"
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_up"/>
</RelativeLayout>
I feel that I must not be using the tag properly. Can someone explain how it works? Thanks in advance.

You have the left side TextView's width set to fill_parent, this will make it consume the entire screen. Anything placed to the right of it will be off screen. Use wrap_content or a specific width for the elements within the relative layout.
Your approach is also a bit off. If you want the two buttons aligned to the right of the screen, use this:
<RelativeLayout
android:id="#+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/life_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00" />
<Button android:text="Button Up"
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<Button android:text="Button Down"
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/button_up"/>
</RelativeLayout>