Layout glitch: Nesting RelativeLayout inside a LinearLayout - android

Problem: I want to clarify a very basic layout issue. I have been at it for 2 days to no avail. I simply want to successfully nest a RelativeLayout inside a LinearLayout and control its positioning. For this purpose, I have created 2 layouts: 1 layout to be displayed on the left and one on the right.
I am getting the following output:
You can see the second view should be on displayed on the right but its not. I have tried layout_gravity but its not working.
Following are the layouts:
For left:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/message_view_border">
<!--The message text-->
<TextView
android:id="#+id/message_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
<!--the timestamp-->
<TextView
android:id="#+id/time_stamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/message_content"
android:textStyle="bold"/>
</RelativeLayout>
For right:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:background="#drawable/message_view_border"
android:layout_gravity="right"
android:gravity="right"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp">
<!--The message text-->
<TextView
android:id="#+id/message_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"/>
<!--the timestamp-->
<TextView
android:id="#+id/time_stamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/message_content"
android:textStyle="bold"/>
</RelativeLayout>
Here is the Activity that's working the scenario:
package com.example.testapp;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
public class Activity1 extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_1);
//Get handle to the root view's child. i.e, FrameLayout
ViewGroup viewGroup = (ViewGroup) ((ViewGroup) this
.findViewById(android.R.id.content)).getChildAt(0);
LayoutInflater inflater = LayoutInflater.from(this);
LinearLayout linearLayout = (LinearLayout) viewGroup.findViewById(R.id.container_linear_layout);
View message_receiver = inflater.inflate(R.layout.layout_chat_message_receiver, viewGroup, false);
TextView received_content = (TextView)message_receiver.findViewById(R.id.message_content);
received_content.setText("okay");
linearLayout.addView(message_receiver);
View message_sender = inflater.inflate(R.layout.layout_chat_message_sender, viewGroup, false);
TextView sent_content = (TextView)message_sender.findViewById(R.id.message_content);
sent_content.setText("okay");
linearLayout.addView(message_sender);
}
}
Project for your reference: https://github.com/mankum93/TestApp1
Note: I know that I have asked a similar question with no answer to it. I am asking this again because people questioned in the question about the RecyclerView I was using to populate a dynamic list of views. That may have been the reason that no one could identify the root cause of the problem. But since, the problem is a fundamental one which exists even without a RecyclerView, I think, it deserves another chance.
I have searched several forums, docs, and SO posts but can't resolve this problem.
EDIT 1: I can see the source of confusion here:
Here it the main activity layout file:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/container_linear_layout">
</LinearLayout>
<!--Floating view to send messages layout-->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<EditText
android:id="#+id/typed_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:id="#+id/send_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEND"
android:layout_gravity="bottom"
android:layout_weight="0"/>
</LinearLayout>
</FrameLayout>

The problem is with the way you are inflating your Views:
inflater.inflate(R.layout.layout_chat_message_sender, viewGroup, false);
The second parameter to inflate() is a root ViewGroup, which is the parent of the View you are inflating. You are passing the third parameter (attachToRoot) as false, but the LayoutInflater will still use that root ViewGroup to generate a set of LayoutParams.
In your case, you are passing the root FrameLayout of your activity as the root to the inflater, when in reality you are going to be attaching your views to the LinearLayout.
Changing those inflation lines like so will fix your problem:
inflater.inflate(R.layout.layout_chat_message_sender, linearLayout, false);

Related

How to know the View Elements after loading a layout?

I am trying to write code , where after loading the Layout , i want to know which are the view elements are related to the layout like TextView, EditText , Checkbox etc.
MyCode :
MainActivity.java
package com.example.myview;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View view = LayoutInflater.from(this).inflate(R.layout.demo_layout, null);
// How to get to know about the UI Elements related to this layout //
}
}
demo_layout.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:orientation="vertical" >
<LinearLayout
android:id="#+id/lnr"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ddccee"
android:orientation="vertical">
<TextView
android:id="#+id/txt1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:textSize="15dp"
android:textColor="#ffffff"
android:text="Test Layout"
android:layout_gravity="center"
android:gravity="center"/>
<EditText
android:id="#+id/edit1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:textSize="15dp"
android:textColor="#ffffff"
android:text="Test Layout"
android:layout_gravity="center"
android:gravity="center"/>
<TextView
android:id="#+id/txt2"
android:layout_width="match_parent"
android:layout_height="300dp"
android:textSize="15dp"
android:textColor="#ffffff"
android:text="Test Layout"
android:layout_gravity="center"
android:gravity="center"/>
</LinearLayout>
This layout has TextView , EditText , so , i want to know how to get UI elements are related to this layout programmatically.
So , please suggest me some solution.
You can use getChildCount REF to get the count of views added toViewGroup and then use getChildAt REF to get the View at given index.
You are using LinearLayout as base layout which already extends the ViewGroup Just change below line.
LinearLayout view = (LinearLayout)LayoutInflater.from(this).inflate(R.layout.demo_layout, null);
After you've inflated your demo_layout just call findViewById on your view instance like this:
View view = LayoutInflater.from(this).inflate(R.layout.demo_layout, null);
TextView txt1 = (TextView) view.findViewById(R.id.txt1);
Elements of view must be retrieved by view.findViewById().
Except in activity you use findViewById() directly to retrieve view elements of the contentView you set in setContentView().

Android: Custom FlowLayout

I want to make this kind of menu of tags in android. Fill layout dynamically and align to center.
How can I do that?
Edited using library recommended by #Dory
<FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:f="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
f:debugDraw="false"
f:weightDefault="0"
f:layoutDirection="ltr"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="6dip"
android:paddingTop="6dip"
android:paddingRight="12dip"
android:paddingBottom="12dip"
android:background="#android:color/black"
android:id="#+id/l_flow"/>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"/>
Flowlayout in one xml file Button is in another xml file. I'm inflating Button then fLayout.addView(button);
what I get is this Padding top and bottom between views is higher than expected
finally I did it with help of this library. I have used only class FlowLayout and attr.xml My main.xml looks like this:
<com.example.FlowTest.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/flow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:background="#android:color/white"/>
and my item layout looks like this:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"/>
And in my Activity's onCreate method:
LayoutInflater mInflater = LayoutInflater.from(this);
mFlowLayout = (FlowLayout) findViewById(R.id.flow);
String [] names = {"goods", "shops", "cars", "washing machine","blablabla","clothes","books"};
for(int i = 0; i<names.length;i++){
Button b = (Button)mInflater.inflate(R.layout.item_flow,mFlowLayout, false);
b.setText(names[i]);
mFlowLayout.addView(b);
}
Take a look
here, you can use this library
Edit:
There is attributes provided in the where you can set horizontal and verticalspacing of the Flow Layout. See below sample xml :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:f="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FlowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
f:horizontalSpacing="5dp"
f:verticalSpacing="5dp" />
</RelativeLayout>
Happy coding :)

inflating layout

I'd like to achieve such a layout, where user got 2 control panels. He is able to switch from first to second by pressing button and vice versa.
Already have tried to use LayoutInflater, however, without success :/
The main reason, why doing it with 2 different layouts is, that buttons will be almost on the same position, so i'd like to prevent all that mess in one layout and create 2 separate control panel layouts.
Here are my layouts:
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/control_panel_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="5">
<!-- Here comes including layouts-->
</RelativeLayout>
</LinearLayout>
control_panel_1.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/control_panel1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btn_action1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_action_selector"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_action2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_action_selector2"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btn_action1"
android:layout_marginRight="50dp"/>
<Button
android:id="#+id/btn_action3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_action_selector3"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/btn_action1"
android:layout_marginLeft="50dp" />
</RelativeLayout>
control_panel_2.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/control_panel1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btn_action3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_action_selector4"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_action4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_action_selector5"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btn_action3"
android:layout_marginTop="20dp"
android:layout_marginRight="60dp"/>
</RelativeLayout>
MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_root);
RelativeLayout controlPanelLayout = (RelativeLayout) findViewById(R.id.control_panel_layout);
//Inflate first control panel on activity start
LayoutInflater layoutInflater = (LayoutInflater)
this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View controlPanel1 = layoutInflater.inflate(R.layout.control_panel_1.xml);
controlPanelLayout.addView(controlPanel1)
}
EDIT:
As shown in the image, let's say activity starts with Screen1 and once user press Btn1, Screen2 appears...as you can see, only control panel has been switched.
however, it won't inflate that layout at start of application...
Thanks in advance for any suggestions, hints...
Inflate your control panel in onCreateView() and when handling button click (to change panel). The code should be somewhat like this:
private void inflateYourPanel(int panelLayoutID, ViewGroup placeholder) {
placeholder.removeAllViews();
View view = LayoutInflater.from(mActivity).inflate(panelLayoutID, placeholder, false);
//find your views and set values and listeners
placeholder.addView(view);
}
Edit: placeholder may be any layout (control_panel_layout) inflated when starting activity etc
Still may be you'd better look at Fragments - it may fit your purpose better and provide more scalability

How to make template xml

I want to make XML template to reuse the code. The problem is that one of the template has several linearlayouts. However, when I run the app, it only shows one linearLayout. (I can only see id: manage_services. not manage_view neither manage_shows).
Here is my code. I hope anyone can figure out the problem.
drawable_manage.xml
<?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="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/manage_services"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:drawableLeft="#drawable/menu_settings"
android:text="#string/title_manage_services"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
<View
android:id="#+id/manage_view"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/menu_divider" />
<LinearLayout
android:id="#+id/manage_shows"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="#dimen/slide_menu_header" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:drawableLeft="#drawable/menu_settings"
android:text="#string/title_manage_shows"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
MainMenuActivity.java
private void addPanels(){
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
android.support.v4.widget.DrawerLayout parent = (android.support.v4.widget.DrawerLayout) inflater.inflate(R.layout.activity_main_menu,null);
View layout_manage = inflater.inflate(R.layout.drawable_layout_manage, null);
View layout_names = inflater.inflate(R.layout.drawable_layout_names, null);
View layout_emails = inflater.inflate(R.layout.drawable_layout_email, null);
LinearLayout leftLinearLayout = (LinearLayout)parent.findViewById(R.id.left_drawer);
leftLinearLayout.addView(layout_names);
leftLinearLayout.addView(layout_emails);
leftLinearLayout.addView(layout_manage);
setContentView(parent);
}
Change your parent LinearLayout's orientation from horizontal to vertical.
android:orientation="vertical"
Are you wanting to reuse your drawable_manage.xml linearlayouts in these (i.e. #+id/manage_services, #+id/manage_shows) or do you have separate layout files?
View layout_manage = inflater.inflate(R.layout.drawable_layout_manage, null);
View layout_names = inflater.inflate(R.layout.drawable_layout_names, null);
View layout_emails = inflater.inflate(R.layout.drawable_layout_email, null);
LinearLayout leftLinearLayout = (LinearLayout)parent.findViewById(R.id.left_drawer);
Try as others suggested and change the orientation, and make sure you are trying to inflate the correct layout. Make sure you are inflating drawable_manage in the correct location and calling to the child linearlayouts by the correct ids.

Include same layout multiple times

I have a common layout (common.xml) which I want to include many times in another layout (layout_a.xml). But it only shows me just one time. Why?
common.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#android:drawable/alert_light_frame">
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:id="#+id/imageView"
android:src="#drawable/test"
android:scaleType="centerCrop" />
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/imageView"
android:id="#+id/textView"
android:text="test"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp" />
</RelativeLayout>
</merge>
layout_a.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/common" />
<include layout="#layout/common" />
</LinearLayout>
The ids when defined in XML must be unique. You are including two layouts that have views that contain the same id.
Here is how you would go about fixing it.
p.s. Unless there is more code that you are not including in your first layout file, that merge tag is useless.
As btse said, the ids in the XML must be unique.
It can be achieved in this way:
<include android:id="#+id/common1"
layout="#layout/common" />
<include android:id="#+id/common2"
layout="#layout/common" />
For information about how to access the elements inside those two included views, you can check out this blog post.
That's what I had done in my Project with Inflater.
test1is just a Layout made with a LinearLayout(Vertical) with text and a button and mainofferslayout in that case, the main layout with an image.
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_offers_display, container, false);
View inflatedLayout = inflater.inflate(R.layout.test1, (ViewGroup) view, false);
LinearLayout ll = (LinearLayout) view.findViewById(R.id.mainofferslayout);
ll.addView(inflater.inflate(R.layout.test1, (ViewGroup) view, false));
ll.addView(inflater.inflate(R.layout.test1, (ViewGroup) view, false));
ll.addView(inflater.inflate(R.layout.test1, (ViewGroup) view, false));
I fixed by setting the layout_height of the RelativeLayout to 250dp since they are overlapped.

Categories

Resources