Develop Reference

Xamarin:Android - Layout_Height changes with wordwrap

I have three identical buttons in one linear layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Kamera öffnen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Bild hochladen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="match_parent"
android:layout_height="60dp"
android:text="Abbrechen" />
</LinearLayout>
If I turn my device from horizontal to vertical, the text of the first two buttons need a wordwrap.
The problem is, that the buttons change their height -> the two buttons with wordwrap have a lower height than the third button with only one text line.
Horizontal view:
Vertical view:
Why is that happening and how can I prevent it?

Hope this following xml will resolve your problems.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android"
android:weightSum="3">
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Kamera öffnen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Bild hochladen" />
<Button
android:layout_weight="1"
android:background="#drawable/button_clear"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="Abbrechen" />
Use weightSum on root layout while your are using layout_weight coz it will make conflict when you have more view or complex view. You should also use layout_width/height="0dp" depending on root layout orientation for getting the advantage of layout_weight. Because you trying to control your view using weight. Thank you

Native Android: Create dynamically a grid-like scrollable layout with equal width buttons

I am trying to create a layout as per this picture (paint'ed).
Layout Design
Target level is API 17. This has to be created programmatically, not using XML. This has to be a responsive design.
I extensively researched and attempted other partially similar situations on stackoverflow, using GridLayout, TableLayout, GridView, various layout parameters, gravity, weight, view nesting and so on. However,
(a) I can't get the text buttons width to fill the available width real estate as per device screen size and orientation. Buttons with shorter texts are coming with shorter width.
(b) The plus, minus and number buttons are of fixed height and width irrespective of screen sizes and orientation. But they are not aligning with the text button in the left on the same row. only the bottom few pixels are visible.
I would appreciate any code snippet that can achieve the above layout. Thanks a million.
UPDATE:
Following inputs from #tiny-sunlight, I did this. Next I will recreate this programmatically.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTable"
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layoutRow"
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="10dp"
android:layout_weight="17"
android:text="This is my button"
android:textSize="15sp"
android:textAllCaps="false"
android:gravity="start"
android:layout_width="0dp"
android:layout_height="40dp" />
<Button
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:text="-"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="0"
android:textSize="15sp"
android:gravity="center"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:layout_weight="1"
android:text="+"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>

Try to build layout below programmatically.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="1111"
android:layout_width="0dp"
android:layout_height="40dp" />
<ImageView
android:layout_marginRight="5dp"
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginRight="5dp"
android:background="#44bb11"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="11"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>

You can use a recycler view, which will provide you scrolling option plus bind views on the fly for you.
So load a linear layout (orientation horizonal) into the recycler view. now for the layout, it then becomes easier. You need a textview, button,textview,button.
For each of these textview and buttons, set widht = 0dp and weight as 7,1,1,1 respectively i.e. your leftmost textview occupy 70% of width whereas all other occupy 10%. Obviously you can change these weights as per your requirements. Thats it for the layout.
Now just fill your data using the adapter.

Block elements in android development

I am going through the tutorials at developer.android.com and they do not cover something I want to try.
In my XML file (LinearLayout) I have 3 elements, a textblock and 2 buttons.
I would like to have the TextBlock taking up all available width. IN HTML terms I would like it to be block.
Then underneath I would like the 2 buttons to be on the same line. In HTML terms I would like it to be inline.
My XML:
<LinearLayout android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Another option:
Create a linearlayout and add textview and another linearlayout with orientation horizontal within that the 2 buttons.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

you can sort of do it in one linear layout, but it's not going to be very flexible. You'd either want to use a relative layout and position the button below the text view or you can use two linear layouts (first is vertical orientation containing the textview and the second linear layout, that one is a horizontal linear layout containing the two buttons)

Simple fixes:
<TextView
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/app_name" />
<Button android:id = "#+id/thisbutton"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="thisbutton"
/>
That's the basic idea.
Look up all the features that are available in the layouts. Because there are a lot, and they are quite flexible.

Android - having trouble properly sizing an xml layout used for a listview row

I'm trying to set up an xml layout to be used for a row in a ListView. The layout consists of a root LinearLayout with a child RelativeLayout containing two ImageViews (one anchored to the other's bottom/right corner) and a child vertical LinearLayout containing two TextViews. I want each row in the listview to have the same width and height, despite the size of the content in the subviews. I realize I cannot use wrap_content which will size the views based on their content, but I'm unclear on what I should use to accomplish a uniform width/height. I tried using fixed dp values, but that just made it even worse. I've attached two screenshots. The first one, from the iOS version, shows how it should look, while the second one shows how it looks on the Android version with the following layout. As a said, I know what's wrong (the wrap_content attributes), but how do I change it to size correctly? Thanks in advance!
<?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="horizontal" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/campaign_thumbnail_container" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/campaign_thumbnail"
android:layout_alignRight="#id/campaign_thumbnail"
android:src="#drawable/new1" />
</RelativeLayout>
<LinearLayout
android:id="#+id/campaign_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/word_bar"
android:orientation="vertical" >
<TextView
android:id="#+id/campaign_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/campaign_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/campaign_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/campaign_footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>

EDIT - According to comments below:
One general thing: To size elements in a LinearLayout uniformly, you need to do two things:
Use a equal android:layout_weight for each element
Make the width or height (whatever has to be uniquely sized) ="0dip"
This is, because the weight factor is only used to fill the rest of the available space. First all elements are placed using their weight/height, then the still available space is calculated and distributed by weight to each element.
EDIT-end
Now, let me create the layouts step by step.
First, this would be your layout of one entry without the "new campaign" indication.
<!-- Type 1: Picture left, text right. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
You get a warning, because the LinearLayout itself has a weight. That is necessary, to give all list entries the same height.
Here's type 2:
<!-- Type 2: Picture right, text left. half-half size. Picture resized to fit -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Your Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
</LinearLayout>
(Where's my "That was easy!" button?)
And Type 3. Even easier:
<!-- Type 3: Picture full width. Picture resized to fit -->
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_menu_camera" />
Now the final thing. Put these three layouts in separate XML-files and include them into a wrapping RelativeLayout.
<!-- Finally overlay the entry with a new indication -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ImageView
android:id="#+id/newIndication"
android:layout_width="24dip"
android:layout_height="24dip"
android:layout_alignRight="#+id/entry1"
android:layout_alignBottom="#+id/entry1"
android:scaleType="fitCenter"
android:src="#android:drawable/ic_input_add" />
<include
layout="#layout/type1entry"
android:id="#+id/entry1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
Note the include. I've put the Type1 LinearLayout in its own XML file named "type1entry". By giving this a new id with #+id/entry1 I can access this entry explicitely in the Activity. Also, I've given the indicator a size of 24dip in square. Change that to your image accordingly.
I've checked the layouts in Eclipse and they did look as I expected them.

Do you need to use a relative layout?
If not, use linearLayout with weights like this.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/campaign_thumbnail_container"
android:weightSum="100" >
<ImageView
android:id="#+id/campaign_thumbnail"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="50"
android:scaleType="fitCenter"
/>
<ImageView
android:id="#+id/campaign_mark_new"
android:layout_width="0dip"
android:layout_height="match_parent"
android:src="#drawable/new1"
android:layout_weight=50
android:scaleType="fitCenter" />
</LinearLayout>
This is untested, but similar solutions like this have worked for me in the past.

Prevent layout to resize after background

Im trying to set a backgound to a RelativeLayout.
The issue is that the layout is resized after the size of the image, which i don't want. I want the layout to be sized after the two textviews.
Anyway to prevent the layout to be scaled to the size of the background?
This is the xml-code
<RelativeLayout
android:id="#+id/hud"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#+drawable/hud_background"
android:layout_weight="1" >
<TextView
android:id="#+id/lblScore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Score: " />
<TextView
android:id="#+id/txtScore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/lblScore"
android:layout_alignBottom="#+id/lblScore"
android:layout_toRightOf="#+id/lblScore"
android:text="00" />
</RelativeLayout>
Regards

I think all you need is to change android:layout_width="match_parent" into android:layout_width="wrap_content" for the relativeLayout, so that the sizes will be according to the textViews alone.
Why did you add android:layout_weight="1" ? is it only a part of your layout file?
if so, if it's in a vertical linearLayout, use:
android:layout_width="match_parent"
android:layout_height="0px"
and if it's in a horizontal linearLayout, use:
android:layout_width="wrap_content"
android:layout_height="0px"