Develop Reference

ImageButton displays differently when created dynamically

I have a GridLayout-based View to which I am dynamically adding several ImageButtons. I'm trying to understand why the ImageButtons are styled correctly when I inflate them from a layout xml file, but not when I create them using the ImageButton constructor directly.
The GridLayout and ImageButtons were previously both defined in the same layout .xml file (and rendered as expected):
<ScrollView
style="#style/my_list_style"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="12dp">
<GridLayout
android:id="#+id/my_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<!-- These ImageButtons are being converted to dynamic. -->
<ImageButton
style="#style/my_button_style"
android:src="#drawable/image1" />
<ImageButton
style="#style/my_button_style"
android:src="#drawable/image2" />
</GridLayout>
</LinearLayout>
</ScrollView>
To convert the ImageButtons to dynamic, I first removed them from the layout file and used code like the following to add them at runtime:
ImageButton imageButton = new ImageButton(context, null, R.style.my_button_style);
imageButton.setImageResource(R.drawable.image1);
parent.addView(imageButton);
But the buttons failed to render properly; they are not centered, and their sizes do not appear to be correct/uniform.
I then tried creating a new layout file, containing nothing but the ImageButton and its style:
<ImageButton
style="#style/my_button_style"/>
When I inflate this layout into the GridView at runtime, everything looks as expected:
LayoutInflater inflater = LayoutInflater.from(context);
ImageButton imageButton = (ImageButton) inflater.inflate(
R.layout.my_button_layout, parent, false);
imageButton.setImageResource(R.drawable.image1);
parent.addView(imageButton);
Why does inflating the view with LayoutInflator give different results than creating the button directly from its constructor?

Because when you create ImageButton manually, you do not specify its parent, hence it doesn't know the layout params of its parent and can't be laid out as you expect.
On the other hand, when you inflate it via LayoutInflater, you are specifying the parent. Then correct layout params are being passed to children. That's why you see difference.
Have a look at detailed article by Dave Smith.

RelativeLayout takes fullscreen with layout_height="80dp"

I'm trying to create a fragment with height of 80dp, and at Design section it seems to work pretty well, but when I run the app on my device, RelativeLayout somehow takes a fullscreen. I use android:layout_alignParentBottom="true" for the SeekBar, but as far as I know it shouldn't take fullscreen if Layout's height isn't wrap_content. Here is the XML code:
<?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="80dp"
android:background="#bbbbff">
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/playButton"/>
<Button
android:layout_width="60dp"
android:layout_height="60dp"
android:text="play"
android:layout_alignParentRight="true"
android:id="#+id/playButton"/>
</RelativeLayout>
EDIT 1: I just tried to use this layout for an activity and it doesn't take fullscreen anymore, but I still have a problem with fragment. Also, I don't change Layout's height programmatically.
EDIT 2: I use fragmentTransaction.add(R.id.musicBarContainer, musicProgressBar) to add the fragment to activity, where musicProgressBar is an instance of fragment java class. The musicBarContainer XML code is
<FrameLayout
android:id="#+id/musicBarContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</FrameLayout>
In onCreateView I use View view = inflater.inflate(R.layout.music_progress_bar, null);

From the RelativeLayout doc:
Class Overview
A Layout where the positions of the children can be described in relation to each other or to the parent.
Note that you cannot have a circular dependency between the size of the RelativeLayout and the position of its children. For example, you cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a child set to ALIGN_PARENT_BOTTOM
Class documentation
Which is exactly your case. RelativeLayout can not do that.
for more detail visit this answer : RelativeLayout is taking fullscreen for wrap_content

In MusicProgressBar fragment class, instead of
View view = inflater.inflate(R.layout.music_progress_bar, null);
you should write
View view = inflater.inflate(R.layout.music_progress_bar, container, false);

Try setting the height of seekbar to 20dp and check. I think its wrap_content is overriding the parents height parameter somehow.

layout_below does not work because of custom view

I have a custom view (MyView) which extends SurfaceView in which I override the onDraw method. I create an instance of this view dynamically with a custom constructor:
MyView myView = new MyView(...);
In this constructor I call the super(Context context) method.
After that, I wrap my custom view in a RelativeLayout like this:
((RelativeLayout) findViewById(R.id.container)).addView(myView);
And this is the layout file that I am using:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:layout_below="#+id/container"/>
</RelativeLayout>
The problem is that the TextView is at the top of the screen instead of being below the RelativeLayout (with the #+id/container id). As it will be without the android:layout_below property.
It behaves like my custom view (MyView) does not set its dimensions. I tried to use the setLayoutParams() but it did not change anything.

I think the problem is that your container view is inflated and laid out before your custom view is added to it and so gets a height of 0 since it has no content. After you add it to its container, a relayout is forced at which point the container asks the child view to measure itself. Since the height of the container is wrap_content, the child needs to report a specific height at this point. My guess is that your MyView class is not doing this.
An easy thing to do in order to set the height of your MyView objects is to override and implement the onMeasure() method.

Android ImageView size unexpectedly changing at runtime

In one of my activities, I have a table layout with cells that are added at runtime via a custom class. The layout for my cells is as follows:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+cell/style_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="5dp" >
<View
android:id="#+cell/divider"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#FF000000" />
<ImageView
android:id="#+cell/image"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#cell/divider"
android:layout_margin="5dp"
android:contentDescription="#string/row_thumbnail"
android:scaleType="fitCenter"/>
</RelativeLayout>
</TableRow>
This gets inflated by the following class:
public Cell(Context context) {
super(context);
addView(((LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE))
.inflate(R.layout.gallery_row_1, null));
}
When I inflate the cell, I also set an image to be used as a display, the problem is that the size of the image view is not staying as it should, the right edge is nowhere to be found, and the image is never displayed (probably way off to the right somewhere?), and I am not sure where my problem lies.
c = new Cell(this);
c.getImageView().setImageBitmap(BitmapFactory.decodeStream(assetManager.open("categories" + File.separator + sec + File.separator + filename)));
page.addView(c);
getImageView being a function in my Cell that returns the actual ImageView element.
I know the image is being placed in the ImageView, because when layout params are changed, I can see the image, just not sized appropriately.
The desired output should be a view, a dividing view on top, and an ImageView below, that fills the parent and is 100dp tall. The image, no matter the origional size, should be scaled and shown inside.
Also, if I comment out the line where I set the image to the ImageView, the layout bounds are correct, as viewed with Show Layout Bounds enabled.
My overall question is, why is my ImageView being re-sized when I apply an image.
Any and all help is greatly appreciated.

See this post on LayoutInflater for why your layout is getting mixed up. Since it seems your cell class is an inner class of some ViewGroup (since you're calling addView()), try using the following code:
LayoutInflater inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.gallery_row_1, this);
or
LayoutInflater inflater = LayoutInflater.from(context);
View view = inflater.inflate(R.layout.gallery_row_1, this, false);
addView (view);
instead of using
inflater.inflate(R.layout.gallery_row_1, null);
The inflate() call uses the second parameter (the container) to determine what type of LayoutParams to use to interpret the XML. If you pass null, all of the layout attributes are ignored. You should instead either call it with the actual container (which will automatically add it to the container) or call it with the container, and a third parameter telling it not to attach the view yet, and then do what you want with the inflated view.

Different results when using the LayoutInflator's inflate methods

I want to know how the LayoutParams will work on LayoutInflator. And what is difference between:
LinearLayout childLayout=(LinearLayout)inflater.inflate(R.layout.childitemlayout, null); //FIRST WAY
LinearLayout childLayout=(LinearLayout)inflater.inflate(R.layout.childitemlayout, container,false); //SECOND WAY
Because, both methods gives me different result.
Actually second inflate method are gives me correct result for both child layout change, but First method will gives me different result.
Here is my code:
MainActivity.Java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout mainLayout=(LinearLayout)findViewById(R.id.mainLayout);
LayoutInflater inflater=LayoutInflater.from(getApplicationContext());
for(int i=0;i<10;i++){
LinearLayout childLayout=(LinearLayout)inflater.inflate(R.layout.childitemlayout, null); //First WAY
// LinearLayout childLayout=(LinearLayout)inflater.inflate(R.layout.childitemlayout, mainLayout,false); //SECOND WAY
mainLayout.addView(childLayout);
}
}
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
childitemlayout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="80dp"
android:layout_height="80dp"
android:orientation="vertical"
android:background="#525f67">
<TextView android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button"
android:gravity="center"
/>
</LinearLayout> <!-- Both ways gives different result -->
<!--
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#525f67">
<TextView android:id="#+id/btn"
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button"
android:gravity="center"
/>
</LinearLayout> Both method gives SAME result -->

The main difference between the two inflate() methods is the second parameter(the ViewGroup parameter) and its use in setting the proper LayoutParams for the root view of the inflated layout file. This is important because the LayoutParams keep various layout attributes of the view(like width, height, positioning rules etc) and are required so the parent of that view can properly show the view.
The first method basically says: build the hierarchy view from this layout file but don't assign LayoutParams to the root of the inflated hierarchy(maybe because the parent isn't know yet), also don't attach the inflated view to a parent.
The second inflate method says: build the hierarchy view from this layout file and also assign the proper LayoutParams(based on the second parameter given to the inflate method) to the root of the inflated hierarchy, also don't attach the inflated view to a parent.
In the first case, the root of the inflated layout file(R.layout.childitemlayout) will not have any LayoutParams set on it(the inflate method didn't assign any because the second parameter is null and it doesn't know which type of LayoutParams to generate), so your fixed width/height values are lost. Later when you'll do mainLayout.addView(childLayout); the mainLayout will check the LayoutParams of the childLayout, see that those are null and will automatically set an instance of the LayoutParams(using its generateDefaultLayoutParams() method). This method, in the particular case of a horizontal LinearLayout, will return an instance of LayoutParams where the width/height will be set to WRAP_CONTENT. So your childLayout will end up with WRAP_CONTENT as its size instead of the fixed values you set on them.
In the second case, the inflate method sees that you suggested the LinearLayout mainLayout as the ViewGroup used for generating the LayoutParams. This means that the fixed values(that you used for the width/height) retrieved from the layout file can be stored in a proper instance of the LayoutParams. When you'll do mainLayout.addView(childLayout);, mainLayout will see that childLayout has the proper LayoutParams instance(which has the values used in the layout file) and doesn't call its generateDefaultLayoutParams().