Develop Reference

Different values of width returned in fragment

I'm trying to determine the screen's width and height to use them in a fragment.
My fragment's layout has the id background.
If inside onViewCreated I use:
background = (RelativeLayout) view.findViewById(R.id.background);
background.post(new Runnable() {
#Override
public void run() {
int width = background.getMeasuredWidth();
int height = background.getMeasuredHeight();
Log.d("askj", width + "+" + height);
}
});
I get 1440+2276
but if I use:
WindowManager windowManager = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics displayMetrics = new DisplayMetrics();
windowManager.getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
int height = displayMetrics.heightPixels;
Log.d("askj", width + "+" + height);
or other related methods I get:
1440+2560
I'm using those parameters to set a background and I can clearly see that the whole screen size is not taken if I use the second approach. I don't really want to use that Runnable() so is there any way in which I can solve this ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/background"
tools:context="com.example.home.background.HomeScreen">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/img"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textStyle="bold"
android:layout_centerInParent="true"
android:textSize="22sp"
/>
</RelativeLayout>

You can measure the background View before your activity has added it to its view hierarchy by yourself using measure method.
background = (RelativeLayout) view.findViewById(R.id.background);
background.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
int backgroundHeight = background.getMeasuredHeight();
int backgroundWidth = background.getMeasuredWidth();
In my case I measured an inflated View but it had the width and height set to match_paent.
View view = inflater.inflate(R.layout.table_field_text, null, false);
view.measure(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
int viewHeight = view.getMeasuredHeight();

Use ViewTreeObserver like Below:
background = (RelativeLayout) view.findViewById(R.id.background);
final ViewTreeObserver vto = background.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#SuppressWarnings("deprecation")
#Override
public void onGlobalLayout() {
//get View Width and height here
int width = background.getWidth();
int height = background.getHeight();
//Call anyfunction which uses width and height here
function(width,height);
//Then remove layoutChange Listener
ViewTreeObserver vto = background.getViewTreeObserver();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
vto.removeOnGlobalLayoutListener(this);
} else {
vto.removeGlobalOnLayoutListener(this);
}
}
});

Set <fragment> height according to wrap it's content

I have an activity which contains text and a fragment:
<?xml version="1.0" encoding="utf-8"?>
<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="bla.HomeActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="A Text"
android:id="#+id/home_text_view"/>
<fragment
android:name="bla.CalendarAgendaFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/cf"
tools:layout="#layout/fragment_calendar_agenda" />
</LinearLayout>
</ScrollView>
</LinearLayout>
The fragment only contains a ListView which is filled dynamically:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/calendar_agenda_listview"
android:layout_gravity="center_horizontal" />
</LinearLayout>
The onCreateView method of the fragment looks like this:
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_calendar_agenda, container, false);
agenda_dates = new ArrayList<CalendarDate>();
agenda_dates.add(new CalendarDate("10.10.2015", "Kuchen backen"));
agenda_dates.add(new CalendarDate("10.10.2015", "Fenster putzen"));
list = (ListView) v.findViewById(R.id.calendar_agenda_listview);
adapter = new AgendaAdapter(getActivity(), R.layout.calendar_agenda_listview_item, agenda_dates);
list.setAdapter(adapter);
return v;
}
The code works and both CalendarDates are added to the fragment.
The problem is that the fragment is only about 40dp high and so only the first ListView item is shown. I can only see the second item by inline scrolling inside of the list view. How can I set the fragment's hight according to it's content?

You can set the height programatically, as seen here
Function:
public static boolean setListViewHeightBasedOnItems(ListView listView) {
ListAdapter listAdapter = listView.getAdapter();
if (listAdapter != null) {
int numberOfItems = listAdapter.getCount();
// Get total height of all items.
int totalItemsHeight = 0;
for (int itemPos = 0; itemPos < numberOfItems, itemPos++) {
View item = listAdapter.getView(itemPos, null, listView);
item.measure(0, 0);
totalItemsHeight += item.getMeasuredHeight();
}
// Get total height of all item dividers.
int totalDividersHeight = listView.getDividerHeight() *
(numberOfItems - 1);
// Set list height.
ViewGroup.LayoutParams params = listView.getLayoutParams();
params.height = totalItemsHeight + totalDividersHeight;
listView.setLayoutParams(params);
listView.requestLayout();
return true;
} else {
return false;
}
}

The problem is that the ListView doesn't work correctly with wrap_content.
See this question about it:
Android: wrap_content is not working with ListView
You should change the size of your ListView programmatically, as Rafael suggested.

How to scale 3 images to fit screen width

These is the result that I am after:
Basically I want to scale the 3 images so that they have the same height and all together fill the screen width. The original images will all have same height.
Can this be done using layout, without width calculations from code?

Just use Layout Weights.
In the main layout, or the layout which contains the ImageViews, put
android:weightSum="10"
and then in the individual ImageViews, put layout_weights as shown below, or upto your requirements.
This basically means the width of the images will be 25%, 55% and 20% respectively.

You can use a linear layout with weight attribute specified as shown below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:src="#drawable/bg_canvas"
android:layout_height="300dp"
android:layout_weight="0.33"/>
<ImageView
android:layout_width="0dp"
android:src="#drawable/bg_canvas"
android:layout_height="300dp"
android:layout_weight="0.33"/>
<ImageView
android:layout_width="0dp"
android:layout_height="300dp"
android:src="#drawable/bg_canvas"
android:layout_weight="0.33"/>
</LinearLayout>
Comment below if you need any further info

try this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
.../>
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
.../>
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
.../>
</LinearLayout>
the "magic" is in the weight component. you define a total weight of 3 in the layout and your image views should take a third of it, so the value is 1.

For my case the images needed to be updated at runtime, so none of the answers were exact fit.
I ended up extending LinearLayout and writing a small routine that unifies all images heights and make sure that all images together fill the LinearLayout width. In case someone is trying to achieve the same, my code looks like this:
public class MyImgLayout extends LinearLayout
{
public MyImgLayout(Context context)
{
super(context);
}
public void setup(ArrayList<String> images)
{
this.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 0);
this.setLayoutParams(layoutParams); //set 0 height until we calculate it in onMeasure
for (String image : images) {
ImageView ivArticle = new ImageView(getContext());
setImageFromName(image, ivArticle); //this where you set the image
this.addView(ivArticle);
}
}
private void scaleImages()
{
if(getMeasuredHeight() == 0 && getMeasuredWidth() > 0) {
if (isHorizontal) {
double childRatioSum = 0;
int images = 0;
for (int i = 0; i < getChildCount(); i++) {
ImageView iv = (ImageView) getChildAt(i);
double width = iv.getDrawable().getIntrinsicWidth();
double height = iv.getDrawable().getIntrinsicHeight();
if (height > 0) {
childRatioSum += width / height;
images++;
}
}
if (childRatioSum > 0 && images == getChildCount()) {
//all images are downloaded, calculate the container height
//(add a few pixels to makes sure we fill the whole width)
double containerHeight = (int) (getMeasuredWidth() / childRatioSum) + images * 0.5;
for (int i = 0; i < getChildCount(); i++) {
ImageView iv = (ImageView) getChildAt(i);
double width = iv.getDrawable().getIntrinsicWidth();
double height = iv.getDrawable().getIntrinsicHeight();
iv.setLayoutParams(new LinearLayout.LayoutParams((int) (width * (containerHeight / height)), (int) containerHeight));
iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
}
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) this.getLayoutParams();
params.width = LayoutParams.MATCH_PARENT;
params.height = (int) containerHeight;
this.setLayoutParams(params);
requestLayout();
}
}
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
scaleImages();
}
}

Is it possible to have a listView of items in the header of an expandableListView

Basically I need to have some content that is dynamically available through an adapter to populate the header of my expandableListView, this must be possible but it's been a really hard time finding any resources on this issue.
Here is a representation of what I'm looking to do.

Yes, but you'll need to override onGlobalLayout(), and set a height for the listView in the header e.g.
final ExpandableListView lExpView = (ExpandableListView) view.findViewById(R.id.expandable_list);
View viewHdr = getActivity().getLayoutInflater().inflate(R.layout.pager_header, lExpView, false);
final ListView lView = (ListView) viewHdr.findViewById(R.id.item_hdr_list);
...
lView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#SuppressLint("NewApi")
#SuppressWarnings("deprecation")
#Override
public void onGlobalLayout() {
if (lView.getVisibility() == View.VISIBLE) adjustTotalHeightOfListView(lView, lExpView);
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN)
lExpView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
else
lExpView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});
Where adjustTotalHeightOfListView() is a method of your own devising that can calculate and set the height of your listView, while contained in the header of the expandable list view. If the individual items in the listView can be more than one Text line in height (wider than the expandable list views width and you have WRAP_CONTENT set) this get's a bit complex, as the actual width of the containing ExpandableListView won't be available till it's rendered, but we need at least a guess before to allow this to happen. So you'll want some code that looks a bit like (not tested):
if (listView == null) return;
ListAdapter mAdapter = listView.getAdapter();
if (mAdapter == null) return;
int totalHeight = listView.getPaddingBottom() + listView.getPaddingTop();
int viewWidth = ( parent == null || parent.getWidth() <= 0 )
? listView.getWidth()
: parent.getWidth();
....
for (int i = 0; i < mAdapter.getCount(); i++) {
View mView = mAdapter.getView(i, null, listView);
mView.measure(
View.MeasureSpec.makeMeasureSpec(viewWidth, (viewWidth > 0)
? View.MeasureSpec.AT_MOST
: View.MeasureSpec.UNSPECIFIED
),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
);
totalHeight += mView.getMeasuredHeight() + listView.getDividerHeight();
}
....
ViewGroup.LayoutParams params = listView.getLayoutParams();
params.height = totalHeight;
listView.setLayoutParams(params);
listView.requestLayout();
Note: The ? View.MeasureSpec.AT_MOST : View.MeasureSpec.UNSPECIFIED hack in the measure() statement, essentially it's there to cope with a call being made before the parent view has been expanded / had a width set. If a width has been set don't exceed it, so if WRAP_CONTENT is specified and the width is greater than the parent the height will be adjusted, else assume you can be as wide as the content.
Where: pager_header.xml
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<ListView
android:id="#+id/item_hdr_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
</GridLayout>
and the main layout contains:
<?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"
android:gravity="center">
<ExpandableListView
android:id="#+id/expandable_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:paddingBottom="10dp" />
</LinearLayout>

Add LinearLayout to ViewGroup

I have got custom class which is extending ViewGroup class. Inside it I want to add some views including two buttoons which has to be next to each other. I came up with idea of creating XML file with this view and then add it using addView. Unfortunately it doesn't work out.
My second idea, which I think is better was creating LineraLayout programmatically along with two buttons, setting up all the settings and then adding.
This is the code:
//adding view to view group
addView(createView(ctx));
//function creating linearlayout and buttons
private View createView(Context ctx){
LinearLayout l = new LinearLayout(ctx);
l.setOrientation(LinearLayout.HORIZONTAL);
l.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
Button btnL = new Button(ctx);
btnL.setText("Text1");
Button btnR = new Button(ctx);
btnR.setText("Text2");
l.addView(btnL);
l.addView(btnR);
return l;
}
The problem is, that I don't see this view now at all. I mean this created from LinearLayout. There is no error in LogCat.
Can someone please tell me what I have to do to add it?
EDIT:
This is code for onLayout, I don't have onMeasure:
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int w = getWidth();
int h = getHeight();
for (int i = 0; i < NUM_CHILDREN; i++) {
View v = getChildAt(i);
int ii = i * 4;
float fl = w * COORDS[ii] / GRID_WIDTH;
float ft = h * COORDS[ii + 1] / GRID_HEIGHT;
float fr = fl + w * COORDS[ii + 2] / GRID_WIDTH;
float fb = ft + h * COORDS[ii + 3] / GRID_HEIGHT;
v.layout(Math.round(fl), Math.round(ft), Math.round(fr),
Math.round(fb));
}
}
In general I am just using huge table where I have got info what exact dimensions of given view should be.

override your custom ViewGroup's onMeasure() like this:
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int w = getWidth();
int h = getHeight();
for (int i = 0; i < NUM_CHILDREN; i++) {
View v = getChildAt(i);
int ii = i * 4;
float fw = w * COORDS[ii+2] / GRID_WIDTH;
float fh = h * COORDS[ii+3] / GRID_HEIGHT;
int wSpec = MeasureSpec.makeMeasureSpec(Math.round(fw), MeasureSpec.EXACTLY);
int hSpec = MeasureSpec.makeMeasureSpec(Math.round(fh), MeasureSpec.EXACTLY);
Log.d(TAG, "onMeasure Width " + MeasureSpec.toString(wSpec) + ", Height " + MeasureSpec.toString(hSpec));
v.measure(wSpec, hSpec);
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

For your first idea I am giving you a example from my project as you asked.
It is based on a simple idea. I have an element designed in xml layout file. I load it from xml layout file. I change few things and finally I add it to an element that is currently being viewed on screen.
RelativeLayout relativeLayout = (RelativeLayout) getLayoutInflater().inflate(R.layout.android_messenger_sent_message, null);
TextView inbox_message = (TextView)relativeLayout.findViewById(R.id.sentMessage);
inbox_message.setText(conversationInfo.getBody());
TextView inbox_messageStatus = (TextView) relativeLayout.findViewById(R.id.sentMessageStatus);
String dateStatus = getDateForStatus(conversationInfo.getDateSent());
inbox_messageStatus.setText(""+dateStatus+" "+getString(R.string.me));
linearLayoutGlobal.addView(relativeLayout,0);
XML layout file from here below.
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="2dp"
android:src="#drawable/contact_ico" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="5dp"
android:layout_toRightOf="#+id/imageView1"
android:background="#color/light_blue"
android:orientation="vertical">
<TextView
android:id="#+id/sentMessageStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12:59, FirstName LastName"
android:textColor="#android:color/darker_gray"
android:paddingBottom="5dp"/>
<TextView
android:id="#+id/sentMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a long sample message and what if it will be toooooooo long?"
/>
</LinearLayout>
</RelativeLayout>