I'm a first-day android programmer and here is my problem: in my app i have a supporting activity which uses static layout; my activity in onCreate method receives a list of data - how should i embed this data into my existing layout?
So far I've tried this code, but it doesn't shows anything, though there're no exceptions and there're few elements, hence loop works:
Activity class:
try {
super.onCreate(savedInstanceState);
setContentView(R.layout.results);
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.results, null);
// Find the ScrollView
LinearLayout sv = (LinearLayout) v.findViewById(R.id.lMain);
// getting data here
for (int i = 0; i < recipesList.getId().size(); i++) {
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
// Add text
TextView tv = new TextView(this);
tv.setText("abc");
ll.addView(tv);
sv.addView(ll);
}
results.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/lMain" >
</LinearLayout>
</ScrollView>
Your apporch is wrong. You have to do like this.
try
{
super.onCreate(savedInstanceState);
setContentView(R.layout.results);
LinearLayout sv = (LinearLayout) findViewById(R.id.lMain);
// getting data here
for (int i = 0; i < recipesList.getId().size(); i++)
{
// Add text
TextView tv = new TextView(this);
tv.setText("abc");
sv .addView(tv);
}
}
Related
I have seen some explanations on how to add two views next to each other in LinearLayout by using XML. How can this be done programatically?
I have the following two methods:
private void createListOfInstalledApplications() {
installedApplicationNames = this.getApplicationNames();
installedPackages = this.getPackageNames();
for(int i = 0; i < installedApplicationNames.size(); i++){
TextView scrollAppsView = new TextView(this);
scrollAppsView.setId(i);
scrollAppsView.setText(installedApplicationNames.get(i) + "\n ");
layout.addView(scrollAppsView);
}
}
This method adds the names of installed applications on the Android phone to the LinearLayout. On the right side of these applications, I would like to have a drop down menu where some settings can be chosen. For now the following methods adds the Spinners to the LinearLayout:
private void createDropDownMenuesForApplications() {
List<String> vibPatternNames = new ArrayList<String>();
VibrationPatternManager vibPatManager = VibrationPatternManager.getInstance();
List<VibrationPattern> vibrationPatterns = vibPatManager.getAllAvailablePatterns();
for(VibrationPattern vibrationPattern : vibrationPatterns){
vibPatternNames.add(vibrationPattern.getName());
}
for(int i = 0; i < installedApplicationNames.size(); i++){
Spinner dropDownMenu = new Spinner(this);
dropDownMenu.setId(i);
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, vibPatternNames);
dropDownMenu.setAdapter(dataAdapter);
layout.addView(dropDownMenu);
}
}
The drop-down menus now appear below the application names. However, I would like them to appear to the right. So
"ApplicationName1 drop-down-menu1"
instead of
ApplicationName1
ApplicationName2
Drop-down-menu1
Drop-down-menu2
How do I do this?
Just do
layout.setOrientation(Horizontal)
I have done similar task as required by you, please have a look at my answer:
https://stackoverflow.com/a/33339420/5479863
in JSON response image URLs were provided so, at runtime I have to add views dynamically adjacent to each other.
Look at the answer to know more...
I hope that will help you...
Happy coding :)
Try the following:
1) MActivity.class--------------
public class MActivity extends AppCompatActivity {
private LinearLayout layout_horizontal;
private LinearLayout layout_vertical;
private LayoutInflater layoutInflater;
private FrameLayout fl;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
// Frame layout generic container --- root.
// Frame layout has as a direct child layout_vertical (Linear layout with orientation vertical).
// for each item inside installedApplicationNames, re-create a linear layout with orientation horizontal (layout_horizontal),
// with a TextView and Spinner and then add it as a direct child of the linear layout with orientation vertical.
fl = (FrameLayout) findViewById(R.id.fl);
layoutInflater = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.layout_vertical , null);
fl.addView(view);
layout_vertical = (LinearLayout) view.findViewById(R.id.ll_v);
populate();
}
private void populate() {
layout_vertical.removeAllViews();
List<String> installedApplicationNames = new ArrayList<String>();
for (int k = 0; k < 30; k++) {
installedApplicationNames.add("N" + k);
}
for (int i = 0; i < installedApplicationNames.size(); i++) {
View view1 = layoutInflater.inflate(R.layout.layout_horizontal , null);
layout_horizontal = (LinearLayout) view1.findViewById(R.id.ll_h);
TextView scrollAppsView = new TextView(this);
scrollAppsView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT , ViewGroup.LayoutParams.WRAP_CONTENT));
scrollAppsView.setId(i);
scrollAppsView.setText(installedApplicationNames.get(i) + "\n ");
layout_horizontal.addView(scrollAppsView);
// TODO: use a certain method to get vibPatternNames for the current installedApplicationName
List<String> vibPatternNames = new ArrayList<String>();
for (int j = 0; j < 4; j++) {
vibPatternNames.add("S" + j);
}
Spinner dropDownMenu = new Spinner(this);
dropDownMenu.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
dropDownMenu.setId(i);
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, vibPatternNames);
dropDownMenu.setAdapter(dataAdapter);
layout_horizontal.addView(dropDownMenu);
layout_vertical.addView(layout_horizontal);
}
}
}
2) layout.xml-----------
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginTop="5dp"
android:id="#+id/fl">
</FrameLayout>
</ScrollView>
3) layout_vertical.xml-----------
<?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:id="#+id/ll_v"
android:layout_gravity="center"
android:orientation="vertical">
</LinearLayout>
4) layout_horizontal.xml---------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="#+id/ll_h"
android:layout_gravity="center"
android:layout_height="match_parent"
android:orientation="horizontal">
</LinearLayout>
I was trying to add a View multiple times by using a for loop, but I was getting an error
Caused by: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
My XML file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_display_list"
android:id="#+id/root_layout">
</LinearLayout>
My class file
ViewGroup ll = (ViewGroup) findViewById(R.id.root_layout);
TextView tv = (TextView) new TextView(this);
tv.setText("helloworld");
tv.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
//adding views in loop
for(int i=0;i<=5;i++)
{
ll.addView(tv);
}
Where am I going wrong?
You cannot add the same View multiple times to the same layout.
The following should work:
ViewGroup ll = (ViewGroup) findViewById(R.id.root_layout);
for(int i=0; i<=5; i++)
{
TextView tv = (TextView) new TextView(this);
tv.setText("helloworld");
tv.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
ll.addView(tv);
}
Also, setting either the height or the width (maybe both, depending on the orientation of your LinearLayout) of the TextView to WRAP_CONTENT might make more sense.
You should use LinearLayout, and need to create textview and params everytime, because you can't add single view multiple times -
LinearLayout ll = (LinearLayout) findViewById(R.id.root_layout);
//adding views in loop
for(int i=0;i<=5;i++)
{
TextView tv = (TextView) new TextView(this);
tv.setText("helloworld");
ll.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
}
Hope it will help :)
Try this:
for(int i=0;i<=5;i++){
ViewGroup ll = (ViewGroup) findViewById(R.id.root_layout);
TextView tv = (TextView) new TextView(this);
tv.setText("helloworld");
tv.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
ll.addView(tv);
}
Try it, may it help..
//adding views in loop
for(int i=0;i<=5;i++)
{
if(tv.getParent()!=null)
{
((ViewGroup)tv.getParent()).removeView(tv);
}
ll.addView(tv);
}
thanks..
I tried making an app using this tutorial (example 2). I created a navigation drawer activity.
My main fragment xml (added card):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity$PlaceholderFragment"
android:id="#+id/mainfragment">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/scrollView" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/abovecards">
<it.gmariotti.cardslib.library.view.CardListView
android:id="#+id/myList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
card:list_card_layout_resourceID="#layout/list_card_thumbnail_layout"
style="#style/list_card.thumbnail"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
In my main activity activity I added:
#Override
public void onActivityCreated(#Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
cardthingy();
}
public void cardthingy(){
int listImages[] = new int[]{R.mipmap.ic_launcher, R.mipmap.ic_launcher1,
R.mipmap.ic_launcher, R.mipmap.ic_launcher1, R.mipmap.ic_launcher};
ArrayList<Card> cards = new ArrayList<Card>();
for (int i = 0; i<5; i++) {
// Create a Card
Card card = new Card(this.getActivity());
// Create a CardHeader
CardHeader header = new CardHeader(this.getActivity());
// Add Header to card
header.setTitle("Test: " + i);
card.setTitle("Some text here");
card.addCardHeader(header);
CardThumbnail thumb = new CardThumbnail(this.getActivity());
thumb.setDrawableResource(listImages[i]);
card.addCardThumbnail(thumb);
cards.add(card);
}
CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(this.getActivity(), cards);
CardListView listView = (CardListView) getActivity().findViewById(R.id.myList);
if (listView != null) {
listView.setAdapter(mCardArrayAdapter);
//this I tried from googling possible solutions
FrameLayout mainy = (FrameLayout) getActivity().findViewById(R.id.container);
mainy.setLayoutParams(new DrawerLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
RelativeLayout fragy = (RelativeLayout) getActivity().findViewById(R.id.mainfragment);
fragy.setLayoutParams(new FrameLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
ScrollView feed = (ScrollView) getActivity().findViewById(R.id.scrollView);
feed.setLayoutParams(new RelativeLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
LinearLayout rLGreen = (LinearLayout) getActivity().findViewById(R.id.abovecards);
rLGreen.setLayoutParams(new FrameLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
listView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
}
}
The problem is that it is showing a scrollable screen that only fills up space of 1 card instead of the whole screen:
As you can see in my xml and java, I've tried some things to fix this, but unfortunately I'm out of ideas.
Try changing
LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT
to
LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.MATCH_PARENT
Ok. The solution was pretty simple. The problem was fixed by removing the scrollview from the xml
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/scrollView" >
</ScrollView>
The card list view automatically becomes scrollable after a certain amount of items.
And the following lines weren't necessary any more:
//this I tried from googling possible solutions
FrameLayout mainy = (FrameLayout) getActivity().findViewById(R.id.container);
mainy.setLayoutParams(new DrawerLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
RelativeLayout fragy = (RelativeLayout) getActivity().findViewById(R.id.mainfragment);
fragy.setLayoutParams(new FrameLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
ScrollView feed = (ScrollView) getActivity().findViewById(R.id.scrollView);
feed.setLayoutParams(new RelativeLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
LinearLayout rLGreen = (LinearLayout) getActivity().findViewById(R.id.abovecards);
rLGreen.setLayoutParams(new FrameLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
listView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));
I have a layout where I want to imitate a listview by adding items programmatically one below the other. So I created an .xml for the layout of these items that are something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_lista"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#+id/rellay_btn"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="1dp"
android:text="Some name"
android:textColor="#3F3F3F"
android:textSize="17sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/iv_follow"
android:text="Some text"
android:textColor="#3F3F3F"
android:textSize="13sp" />
</LinearLayout>
In the activity I would like to generate n of this layout, fill the textviews with text and also I would like to set an onClickListener on them. n is the size of an array. Please help
Note: Once the activity loads, the number of layouts will not change, nor can a layout be removed.
This is what I have now but the layout is displayed on top of the activity instead of below a Textview:
LayoutInflater inflater = LayoutInflater.from(BucketProfileActivity.this);
for (int i = 0; i < 3; i++) {
View view = inflater.inflate(R.layout.bucketprofile_tips, null);
view.setId(i);
TextView tv_username = (TextView) view.findViewById(R.id.tv_username);
tv_username.setText(String.valueOf(i));
RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
rl.addRule(RelativeLayout.BELOW, R.id.tv_nemkell);
addContentView(view, rl);
}
If your posted xml file is bucketprofile_tips.xml then you need to change here from
TextView tv_username = (TextView) view.findViewById(R.id.tv_title);
to
TextView tv_username = (TextView) view.findViewById(R.id.tv_username);
Because in bucketprofile_tips.xml tv_title id not found for your TextView. So you are getting Null Pointer Exception.
Not sure why you would want to do this but you can just use a LayoutInflater to inflate x of this view and add them to a designated ViewGroup. For example:
LayoutInflater inflater = LayoutInflater.from(context);
for (int i = 0; i < numberOfViews; i++) {
View v = inflater.inflate(R.layout.view_to_add, parentView, false);
setup(v);
parentView.addView(v);
}
Where setup() is a function you define that does the setup work such as setting the text of a TextView etc.
For instance, in your setup function might look something like this:
private void setup(View v) {
TextView tv = (TextView) v.findViewById(R.id.name);
// set the text of the text view
tv.setText("Hello!");
// set the click listener for the view...
v.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// do stuff here...
}
});
}
LinearLayout parentLayout=findViewById(R.id.parentLayout);
LayoutInflater inflater = LayoutInflater.from(BucketProfileActivity.this);
View view = inflater.inflate(R.layout.bucketprofile_tips, null);
parentLayout.addView(view);
LinearLayout textList=(LinearLayout) parentLayout.getChildAt(0);
for(int i=0; i<textList.getChildCount(); i++){
TextView tv_username=(TextView) textList.getChildAt(i);
textView.setOnClickListener(new View.OnClickListener(){
#Override
public void onClick(View view){
tv_username.setText(String.valueOf(i));
}
}
}
i have a complex xml layout which has list views..a row in the list view contains several text fields which are spaced evenly. i am using textview to store the text and then finally add all the items to the row...its working perfectly fine.
but now i have case where in i am not sure, how many text fields i might get from a webservice. therefore i need to create the textview dynamically on run time, populate them and then insert into the list..
is there anyway to declare,add and populate new textview fields on runtime?
or is there is anyway to implement the spacing between the two fields?
result of first call
__________________________
|_____|_____|_____|______|
result of second call
________________________________
|_____|_____|_____|______|______|
I tried implementing the solution that was provided below (Kenny), but for some reason I am unable to add views into the list.. below is my code
public class HeaderAdapter extends ArrayAdapter<Header> {
final Header[] listSymbols;
private TextView textView;
private LinearLayout row;
public HeaderAdapter(Context context, int symResourceID,
Header[] objects) {
super(context, symResourceID, objects);
listSymbols = objects;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View row = inflater.inflate(R.layout.header_view, parent, false);
Header headerRec = listSymbols[position];
for(int i = 0 ; i < listSymbols.length;i++){
textView = new TextView(getContext());
textView.setLayoutParams(new LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, //Width of the view
ViewGroup.LayoutParams.WRAP_CONTENT));//Height of the view
textView.setId(i);
row.add??
}
}
The main activity that calls this
setContentView(R.layout.main);
headerList.add(new Header("Symbol","Quantity","Price","Price Yesterday","52 Week High","52 Week Low","Change","Days Gain","Days Gain %","Returns"));
Header[] tmpHeaderList = headerList.toArray(new Header[headerList.size()]);
ArrayAdapter<Header> headerAdapter = new HeaderAdapter(this,R.layout.twoway_header_view,tmpHeaderList);
headerListView.setAdapter(headerAdapter);
xml layout file..the main file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<HorizontalScrollView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:scrollbars="none"
android:id="#+id/headerHv">
<ListView android:id="#+id/header_listView1"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#color/white" android:cacheColorHint="#00000000"
android:smoothScrollbar="true" android:scrollbars="none" />
</HorizontalScrollView>
</LinearLayout>
the file in which the template for the row is defined
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView android:id="#+id/headerList" android:layout_width="80dp"
android:layout_height="wrap_content" android:textColor="#000000"
android:typeface="sans" android:textStyle="normal" />
</LinearLayout>
Here is the way i dynamically generate custom buttons from a list, you could do the same thing with textViews:
//Setup Buttons
layout = (LinearLayout)findViewById(R.id.layoutBars);
int count = lBars.size();
for(int i = 0; i< count;i++){
final Bar b = lBars.get(i);
BarButton button = new BarButton(DDTBars.this, R.drawable.barsmall , b.getName().toUpperCase());
button.setLayoutParams(new LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
button.setId(i);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Run activity passing name of the bar to retrieve data
Intent i = new Intent(DDTBars.this, DDTBar.class);
i.putExtra("name", b.getName());
startActivity(i);
}
});
layout.addView(button);
}
So you could try:
//Setup TextViews
layout = (LinearLayout)findViewById(R.id.mylayout);
int count = myTextList.size();
for(int i = 0; i< count;i++){
TextView txtView = new TextView(this);
txtView.setLayoutParams(new LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, //Width of the view
ViewGroup.LayoutParams.WRAP_CONTENT));//Height of the view
txtView.setId(i);
layout.addView(txtView);
}
You could do it in code. Declare TextView 's in a loop and use RelativeLayout to position them wrt each other.