Develop Reference

Android XML Layout Layering

Is there a generally accepted way of doing this? My home screen initially looked like the below image, using the below code, to prompt the user to start a game.
Original home screen
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.snake.SnakeView
android:id="#+id/snake"
android:layout_width="match_parent"
android:layout_height="match_parent"
tileSize="24" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text"
android:text="#string/snake_layout_text_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
This worked with no errors, but I needed to add items for user input (EditText) and show last 5 scores (Button) and wanted this prompt below it rather than putting the player through multiple screens. From what I've read, I should be able to embed a FrameLayout inside a RelativeLayout with no conflicts, but it only works to the Show Scores button and the game prompt is missing. When I check it in design view, I am also now getting an error that the bottom half (which is now showing) is failing to instantiate the class that would allow the game to play. I am simply beside myself on how to correct this and would like to understand what I have done wrong so as to not allow this to happen again on future projects. Below is the modified code that causes the errors.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Username"
android:id="#+id/textViewName"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editTextName"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="?android:attr/buttonStyleSmall"
android:text="Add"
android:id="#+id/btnAdd"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Last 5 Games"
android:id="#+id/btnLastFive"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.snake.SnakeView
android:id="#+id/snake"
android:layout_width="match_parent"
android:layout_height="match_parent"
tileSize="24" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
Proposed layout

You should add the namespace of the custom view com.example.android.snake.SnakeView on your root layout, and add the namespace prefix before the declaration of your custom Views attributes.
So assuming the namespace is "app", tileSize becomes for example app:tileSize
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
......
<com.example.android.snake.SnakeView
android:id="#+id/snake"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tileSize="24" />
.....
</LinearLayout>
It also seems that you have removed the text content "Snake Press up to play" from your TextView #+id/text, otherwise you won't be able to see it.

How to position this in a coordinator layout?

I'm struggling with making a coordinator layout work. Can someone help me with this?
I just want a simple layout of :
NameLabel, AgeLabel
(Below) Profile pic
(Below)
TextLabel
(Below)
ImageView
instead I get this: and my ageLabel and nameLabel are god knows where.
<android.support.design.widget.CoordinatorLayout
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:id="#+id/activity_home"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".HomeActivity">
<include
layout="#layout/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/home_fb_pic_thumbnail"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="top|center"
/>
<TextView
android:id="#+id/nameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="name" />
<TextView
android:id="#+id/ageTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="age" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="248dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="bottom"
android:onClick="startRecording"
app:srcCompat="#drawable/intro_camera_2" />
<TextView
android:id="#+id/introductionTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:text="Introduce Yourself! Video Introductions Last 24 Hours"
android:textAppearance="#android:style/TextAppearance.Material.Medium" />

Those two text views will appear in the design tab if you can notice. But the problem is you haven't specified any constraints as to their placement like you have done for your other views. Place constraints to position them on screen where you want it to for example set left, right,top and bottom margins or align it below some images you already have.Hope that helps.

Android layout objects placement

I have this simple activity in my android app but I don't know how to place my button so it appears at the same position on various screen sizes.
I want the button to always be placed at the bottom of the screen. The screenshot shown is from a phone screen. When displayed on a larger screen the button is higher up.
How can I fix this?
Thanks
See this screenshot

You can use RelativeLayout with this parameter (android:layout_alignParentBottom="true")
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Click Me!"/>
</RelativeLayout>

You should use a RelativeLayout
If you have a RelativeLayout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.
If your button at the bottom doesn't show then probably the layout above it takes all the space. In this case you can put the button first in your layout file and position the rest of the layout above the views with android:layout_above.

Have a look a RelativeLayout. Use this ViewGroup and add a Button inside it with alignParentBottom
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentBottom="true"
android:text="HORAIRE"
android:layout_margins="<your_margin_in_dp>" />
</RelativeLayout>

Make footerButton.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="HORAIRE"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
And add it in all your layout file like below line:
Android Activity_Layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Footer aligned to bottom -->
<include layout="#layout/footer" />
<!-- Content above footer -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content goes here"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
Hope it will solve your problem

This is what I ended up doing. Thanks to everyone who posted, it helped me get in the right direction!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="xxxx.MainActivity"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dernières nouvelles Twitter"
android:id="#+id/textView"
android:textStyle="bold"
android:textSize="17dp"
android:paddingLeft="8dp"
android:paddingTop="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp"
android:layout_alignParentTop="true"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/listView_tweets"
android:layout_above="#+id/buttonDisplay"
android:choiceMode="none"
android:paddingTop="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horaire"
android:layout_margin="5dp"
android:id="#+id/buttonDisplay"
android:onClick="buttonGotoDisplay"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

Button positioning using Layouts in Android

After many hours I can't fix button on the bottom of activity. Either is invisible or at the top. I tried also without relative layout, I tried adding another linear layout, but I still don't know how set this button.
<?xml version="1.0" encoding="utf-8"?>
<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=".News" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/news" />
<WebView
android:id="#+id/webView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/newsbutton"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Chiudi" />
</LinearLayout>
</RelativeLayout>

<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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/news" />
<WebView
android:id="#+id/webView1"
android:layout_below="#id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/newsbutton"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:text="Chiudi" />
</RelativeLayout>

First, you have a warning in Legacy Android Layout Editor, that either RelativeLayout or LinearLayout is useless. That should be a hint for you. Pay attention to warnings, they're helpful in most of the times.
Indeed, you can get rid of LinearLayout.
So, the solution is:
Remove LinearLayout.
Add android:layout_below="#+id/imageView1" to the WebView.
Add android:layout_alignParentBottom="true" to the Button.
Add android:contentDescription to ImageView.
Use #string instead of hardcoded strings.
Optional steps are not bolded, they will remove warnings.
Whole working code, tested under Android 4.1.2:
<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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="TODO: DESCRIPTION"
android:src="#drawable/ic_launcher" />
<WebView
android:id="#+id/webView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1" />
<Button
android:id="#+id/newsbutton"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:text="Chiudi" />
</RelativeLayout>

copy paste the following in your button component ;)
android:layout_marginBottom="147dp"
android:layout_marginTop="50dp"
android:layout_marginleft="50dp"
android:layout_marginRight="47dp"
play only with the numbers and Im sure ull get the hang of it :)

Just add android:layout_below="#id/webView1" in your button.
If you would use LinearLayout, you could set the Widget that should fill the empty space like this: layout_height="0dp" and layout_weight="1". This should do the job too.

Android CalendarView slowing down layout

This is driving me crazy. I have a fragment in my Android app which is laid out using a RelativeLayout. Problem is that for some reason it takes ages to render, about 5 seconds just to load about 4 elements on screen.
One of the elements is a CalendarView and when I remove it it goes back to proper speeds (ie: instant). I'd imagine the problem is got to do with the way I'm asking Android to lay it out, must not make much sense or is inefficient or something.
Here's the XML file:
<?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:padding="20dp">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="TODAY"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/time" />
<TextView
android:id="#id/time"
android:gravity="right"
android:textStyle="bold"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="11:32"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/date_info"
android:layout_margin="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday, 15th August 2012"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_below="#id/title"
android:layout_alignParentLeft="true" />
<CalendarView
android:id="#+id/calendar_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/white_back_black_border"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
</RelativeLayout>
I've tried loads of different layout options but removing the Calendar seems to be the only thing that makes a difference.
Any insights would be greatly appreciated. Thanks

I've had this problem too, both with relative layouts and linear layouts. It doesn't seem to be layout-related.
Here is an example to see the error, just with a simple layout, no code at all:
<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="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".FechaHoraActivity" >
<TimePicker
android:id="#+id/timePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp" />
<CalendarView
android:id="#+id/calendarView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
And now just change the linear layout height to:
android:layout_height="match_parent"
With this change the problem is gone, at least in my Samsung Galaxy Tab 2
So it seems it is more "space" related, but I'm still not sure why this problem appears. And I haven't found any other interesting results on google searching "calendarview slow"...
EDIT Let's see if we can find an answer with a small bounty

I take some hours to find the answer, but not figure out why. Here is something strange, may it can help you to find the answer.
the cpu consumption when CalendarView slow
The getView in WeekAdapter has a param parent that was never used.
public View getView(int position, View convertView, ViewGroup parent) {
WeekView weekView = null;
if (convertView != null) {
weekView = (WeekView) convertView;
} else {
weekView = new WeekView(mContext);
android.widget.AbsListView.LayoutParams params =
new android.widget.AbsListView.LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
weekView.setLayoutParams(params);
weekView.setClickable(true);
weekView.setOnTouchListener(this);
}
int selectedWeekDay = (mSelectedWeek == position) ? mSelectedDate.get(
Calendar.DAY_OF_WEEK) : -1;
weekView.init(position, selectedWeekDay, mFocusedMonth);
return weekView;
}
Looking forward the answer.

It seems like CalendarView directly inside a RelativeLayout really doesn't work that well. The following solution with the trick of using a FrameLayout is loading much faster in the emulator:
<?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:padding="20dp" >
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/time"
android:text="TODAY"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#id/time"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:text="11:32"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/date_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/title"
android:layout_margin="20dp"
android:text="Wednesday, 15th August 2012"
android:textAppearance="?android:attr/textAppearanceMedium" />
<FrameLayout
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<CalendarView
android:id="#+id/calendar_view"
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#drawable/white_back_black_border" />
</FrameLayout>
</RelativeLayout>

Found that CalendarView widget needs height to be set to match_parent, then you can put it to any layout. For example in relative with height 200. This works fine on 4.0.3 emulator and on Samsung Galaxy Tab with 4.2.2.
<?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:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true" >
<CalendarView
android:id="#+id/cv_dialog_filter_date"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/relativeLayout2"
android:layout_centerHorizontal="true"
android:text="05.12.2013" />
</RelativeLayout>

Putting the CalendarView in a FrameLayout will solve the problem..
here is a XML code example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cc00b1cc">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="102dp"
android:layout_alignParentBottom="true">
<CalendarView
android:layout_width="425dp"
android:layout_height="374dp"
android:id="#+id/calendarView"
android:layout_gravity="left|top" />
</FrameLayout>
</RelativeLayout>

The above answers were right but, still hasn't solved one mystery.
That is, When i want to include calendarview inside layout with other layout. It's just disappears or i can see only Week letters. I tried the above match parent and everything and still i couldn't solve it.
If anyone struggling like me Here's the answer.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<CalendarView
android:id="#+id/calendarService"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/linearLayout"></CalendarView>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
///Your views
/>