Develop Reference

Android: Layout looks different on different devices

Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.
Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.
How can I make my code device independent?
<?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:background="#000000"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingTop="4dp"
android:paddingRight="4dp"
android:paddingBottom="4dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.

Try this layout:
<?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:background="#000000" >
<RelativeLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:layout_above="#+id/iconView"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
</LinearLayout>

Try this
make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it

Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...

When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.
When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.
What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.
The example below shows how to put two buttons beside each other and make them fill the screen's width equally :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<Button
android:id="#+id/btn_left"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<LinearLayout/>

I cant keep the text as it is on the screen

I am beginner and I what add a text that will change if it was seen in a smaller mobile
I pasted here
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#1d72c3"
android:gravity="center"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="#string/aboutus"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
In the picture, I want it to look like Pic1 and Pic2, the problem is, Im making it like Pic3 and I don't want that!

Please update your xml.
<RelativeLayout 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"
android:background="#1d72c3"
android:gravity="center"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/aboutus"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
Main problem is your textView's width is `"fill_parent". Your texts fill screen because of that.

The problem here is the way you have setup your layout is not the right solution if you wan't to have different layouts for different screens. Your outermost view is a Relative layout with width and height set to fill the screen (that's what fill parent does). Now inside that Relative Layout you have a LinearLayout with width and height set to match its parent (RelativeLayout). So this is also filling your screen. Now inside that you have a text view with width and height set to fill it's parent (LinearLayout), and since LinearLayout is taking full screen, your TextView will fill the whole screen.
The best way to support smaller screen is that in your res directory create a layout-small folder and place the same xml layout file in there but change the dimensions of your textView. If you want the text to be as large as its size, you can do "wrap_content" for both width and height. You can also specify android:textSize in dp to play around with different font sizes.

Try using relative units. I really recommend you to read this:
Supporting Multiple Screens
To make a long story short, using "sp" units is the way to go. use the attribute
android:textSize="15sp"
replacing 15 by the size you think it is the most appropriate for your needs.

Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#1d72c3"
tools:context=".main" >
<LinearLayout
android:layout_width="match_parent"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
<TextView
android:id="#+id/abus"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="text"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>

Linear layout arangment in android

I am learning Linear layout and I have some confusion.
<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"
android:orientation="vertical"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world"
android:layout_weight=".33"/>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button"
android:layout_weight=".33"/>
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button"
android:layout_weight=".3"/>
</LinearLayout>
In these code there are three elements.
TextView 2. Button1 3. Button2
The linear layout orientation is vertical and I have given them equal weight adjusting in one weight value only.
Now in vertical orientation I am am giving
android:layout_width="fill_parent"
android:layout_height="wrap_content"
So it is filling both the height and width.
But when I am using horizontal layout and writing like
android:layout_height="fill_parent"
android:layout_width="wrap_content"
It is filling width but not filling height
Instead of giving android:layout_height="fill_parent" why it not filling the height?

Copy paste this code and try it.. It will fill height.
<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"
android:orientation="horizontal"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/hello_world"
android:layout_weight=".33"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Button"
android:layout_weight=".33"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="Button"
android:layout_weight=".3"/>
</LinearLayout>

I think you need an understanding on this topic instead of someone throwing a code at you. The working code is as shown by #Nirali above.
So, in this crash course, you need to understand what is fill_parent and wrap_content. The linearlayout is your parent or you can see this as the screen of your device. If you set your height to fill_parent, it will fill the whole height of the screen.
Wrap_content is to wrap your object, for example your button. If you set height to wrap_content, it will just set the height to wrapping your button nicely.
Above are explanation that comes off my head, for a better understanding, refer to this post What's the difference between fill_parent and wrap_content?

Can only LinearLayout specify a fixed-size element with an adjacent element that uses the remaining space?

I'd like to have two adjacent views, a first that is a fixed size and a second that adjacent to the first that uses the remaining space.
I could easily do this with LinearLayout and weights, but I would like to avoid the "nested weights are bad for performance" problem.
Is there another layout type that can accomplish the equivalent? Please provide an example if so.

A RelativeLayout could do what you want, for example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Button"
android:background="#99cc00" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Button"
android:background="#0077cc"/>
</RelativeLayout>
The first Button will be 200dp in width and the second will stretch to fill the rest of the parent's remaining width.
You could also use a RelativeLayout to split two views in equal sizes to avoid having double weights on some layouts.

I believe this could be done with a RelativeLayout. Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/button">
...
</LinearLayout>
</RelativeLayout>

You can try
<?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="fill_parent"
android:orientation="horizontal" >
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="view with fixed size " />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="view with remaining space" />
</LinearLayout>
this is how weight works in LinearLayout:
At first, it will deduct the fixed dimension, then according to the weight, divide the available space, assign to the views which specify the weight attribute

android:layout_height 50% of the screen size

I just implemented a ListView inside a LinearLayout, but I need to define the height of the LinearLayout (it has to be 50% of the screen height).
<LinearLayout
android:id="#+id/widget34"
android:layout_width="300px"
android:layout_height="235px"
android:orientation="vertical"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
<ListView
android:id="#+id/lv_events"
android:textSize="18sp"
android:cacheColorHint="#00000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
</ListView>
</LinearLayout>
Is that possible?
I did something similar for a button and an EditText, but doesn't seem to work on Layouts.
This is my Code:
//capture the size of the devices screen
Display display = getWindowManager().getDefaultDisplay();
double width = display.getWidth();
//my EditText will be smaller than full screen (80%)
double doubleSize = (width/5)*4;
int editTextSize = (int) doubleSize;
//define the EditText
userName = (EditText) this.findViewById(R.id.userName);
password = (EditText) this.findViewById(R.id.password);
//set the size
userName.setWidth(editTextSize);
password.setWidth(editTextSize);

Set its layout_height="0dp"*, add a blank View beneath it (or blank ImageView or just a FrameLayout) with a layout_height also equal to 0dp, and set both Views to have a layout_weight="1"
This will stretch each View equally as it fills the screen. Since both have the same weight, each will take 50% of the screen.
*See adamp's comment for why that works and other really helpful tidbits.

This is easy to do in xml. Set your top container to be a LinearLayout and set the orientation attribute as you wish. Then inside of that place two linearlayouts that both have "fill parent" on width and height. Finally, set the weigth attribute of those two linearlayouts to 1.

This is my android:layout_height=50%
activity:
<?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="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/alipay_login"
style="#style/loginType"
android:background="#27b" >
</LinearLayout>
<LinearLayout
android:id="#+id/taobao_login"
style="#style/loginType"
android:background="#ed6d00" >
</LinearLayout>
</LinearLayout>
style:
<style name="loginType">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_weight">0.5</item>
<item name="android:orientation">vertical</item>
</style>

best way is use
layout_height="0dp"
layout_weight="0.5"
for example
<WebView
android:id="#+id/wvHelp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" />
<TextView
android:id="#+id/txtTEMP"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:text="TextView" />
WebView,TextView have 50% of the screen height

To make sure the height of a view is 50% of the screen then we can create two sub LinearLayouts in a LinearLayout. Each of the child LinearLayout should have "android:layout_weight" of 0.5 to cover half the screen
the parent LinearLAyout should have "android:orientation" set to vertical
.
.
here is code for your reference....
this code contains two buttons of height half the screen
<LinearLayout
android:orientation="vertical"
android:layout_height="match_parent">
<LinearLayout
android:layout_weight="0.5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:padding="10dp"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="button1"
android:id="#+id/button1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
/>
<Button
android:padding="10dp"
android:layout_weight="0.5"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="button2"
android:id="#+id/button2"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
<LinearLayout
android:layout_weight="0.5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>

This kind of worked for me.
Though FAB doesn't float independently, but now it isn't getting pushed down.
Observe the weights given inside the LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/andsanddkasd">
<android.support.v7.widget.RecyclerView
android:id="#+id/sharedResourcesRecyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="bottom|right"
android:src="#android:drawable/ic_input_add"
android:layout_weight="1"/>
</LinearLayout>
Hope this helps :)

You should do something like that:
<LinearLayout
android:id="#+id/widget34"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true">
<ListView
android:id="#+id/lv_events"
android:textSize="18sp"
android:cacheColorHint="#00000000"
android:layout_height="1"
android:layout_width="fill_parent"
android:layout_weight="0dp"
android:layout_below="#+id/tv_scanning_for"
android:layout_centerHorizontal="true"
/>
</LinearLayout>
Also use dp instead px or read about it here.

it's so easy if you want divide your screen two part vertically ( top30% + bottom70%)
<LinearLayout
android:id="#+id/LinearLayoutTop"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2">
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutBottom"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</LinearLayout>

To achieve this feat, define a outer linear layout with a weightSum={amount of weight to distribute}.
it defines the maximum weight sum. If unspecified, the sum is computed by adding the layout_weight of all of the children. This can be used for instance to give a single child 50% of the total available space by giving it a layout_weight of 0.5 and setting the weightSum to 1.0.Another example would be set weightSum=2, and if the two children set layout_weight=1 then each would get 50% of the available space.
WeightSum is dependent on the amount of children in the parent layout.

You can use android:weightSum="2" on the parent layout combined with android:layout_height="1" on the child layout.
<LinearLayout
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:weightSum="2"
>
<ImageView
android:layout_height="1"
android:layout_width="wrap_content" />
</LinearLayout>