Develop Reference

Linear Layout using weight to adapt screen size

I am trying to use a linear layout as a row for my recyclerView/adapter, basically my row has 3 elements: an image, a textView and a checkButton with some text.
What I want is the image occupying like 50% of the width plus 40 height, so I set the weight of the image to 2.
Next I need to have another 50% layout that has the other 2 elements, and I want at the top right of the image the textView and at bottom the checkbox.
I already implemented this before with relative layouts, but the content didn't adapt to different devices, so I tried the linear layout and the weight property.
So this is what I have at the moment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:contentDescription="photo " />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/plantName"
android:layout_below="#+id/plantName"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
Here is the image of what I have at the moment:image
As I explained, I need the image to occupy the 50% width and the green text to be side on side with the photo at the right.
The checkbox must be below, any help??
Thanks

Try this,
<?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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_weight="0.5"
android:contentDescription="photo "
android:src="#drawable/placeholder" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5">
<TextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/colorBlack"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/plantName"
android:layout_marginTop="5dp"
android:text="CheckBox"
android:textSize="15dp" />
</RelativeLayout>
</LinearLayout>

To me, it would have to be set with a Relative layout. Then for the elements to "adapt to different devices" you would need to set android:layout_width and height to wrap_content or fill_parent depending on what you want to achieve.

Set image weight to 50% which is .5, anything you add on that layout will be horizontal, so to solve that just add another layout at .5 weight and set it vertical.

You can try something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:contentDescription="photo " />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/nephritis"
android:textSize="15sp" />
<CheckBox
android:id="#+id/plantCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="25dp"
android:button="#drawable/customdrawablecheckbox"
android:textSize="10dp" />
</LinearLayout>
</LinearLayout>

Detect if the phone is old / NEXUS4 to avoid display issues

It looks like some issues appears on the display of my app when I run it on old devices. Here is what I observe.
1) When I open my app in recent phones (above NEXUS 5) the screen of the dialog I am showing appear properly all the elements are there. They are all defined with a height of "WRAP_CONTENT".
2) When I run my app in NEXUS 4, the dialog appears cut, even though there is still space on the screen...For whatever reason it looks like the "WRAP_CONTENT" does not work... but if I set the height of the dialog programmaticaly then it is working (I try setup the height of the button and the framelayout without success).
Any idea what I am missing there? If you advise me to set the height programmaticaly, then my problems become how to know if the user is using an old device or not so that when he is I define the pop-up taking the whole screen otherwise not...
I have included a screenshot of what I see on recent phone (just below, you can see the button cool completely) and what I see on NEXUS4 (second screenshot you can only see the beginning of the button cool...)
and below is the XML I am using
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/popup_swiperewards_flMainwindow"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_margin="32dp"
android:id="#+id/popup_swiperewards_llMaincontainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:background="#DD000000">
<TextView
android:id="#+id/popup_swiperewards_tvUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="USER NAME"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ImageView
android:id="#+id/popup_swiperewards_ivSeparator1"
android:scaleType="fitXY"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/stripe_separator" />
<pro.appus.takemeout.ui.views.ViewPagerWrapContent
android:id="#+id/popup_swiperewards_vpAwardcontainer"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/popup_swiperewards_cpiCircleindicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:fillColor="#FFFFFF"
app:pageColor="#android:color/transparent"
app:radius="6dp"
app:strokeColor="#FFFFFF"
app:strokeWidth="1dp" />
<ImageView
android:id="#+id/popup_swiperewards_ivSeparator2"
android:scaleType="fitXY"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/stripe_separator" />
<TextView
android:id="#+id/popup_swiperewards_tvComeagain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Come again tomorrow \n to collect %d TMO"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textStyle="bold" />
<FrameLayout
android:id="#+id/popup_swiperewards_btnCoolContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/popup_swiperewards_btnCool"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:includeFontPadding="true"
android:background="#drawable/appsettings_button_silver"
android:text="Cool"
android:textAllCaps="true"
android:textColor="#android:color/white" />
</FrameLayout>
</LinearLayout>
</FrameLayout>

I found the mistake, it was in the code there where the margin was too big for that screen...
<LinearLayout
**android:layout_margin="32dp"**
android:id="#+id/popup_swiperewards_llMaincontainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:background="#DD000000">

Weight in scrollview

I have a task - make an activity like this Here photo takes one half of screen and text takes another. And everything works fine with weights, but sometimes text can take a lot of space and don't fit in screen, so I covered all my layout with ScrollView, but here comes problem. If everything doesn't fit into one screen everything should look that way - photo will take one half of visible screen and second half will contain some part of text that can fit there, and when I scroll, everything should be scrolled and new text will appear at the bottom. But I don't understand how to realize that, weights here work in some weird way and as I understood tag fillViewPort="true" makes something only if there is nothing to scroll, and when there is something this tag makes nothing. So how can I make my view look in proper way?
Here is my XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="leopikinc.musiciansyandex.MusicianInfo"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/big_photo"
android:src="#drawable/test"
android:layout_gravity="center" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Genres"
android:id="#+id/genres"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Album count"
android:id="#+id/album_count"
android:layout_below="#+id/genres"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Track count"
android:id="#+id/track_count"
android:layout_above="#+id/biography_string"
android:layout_toRightOf="#+id/album_count"
android:layout_toEndOf="#+id/album_count" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/biography_string_text"
android:id="#+id/biography_string"
android:layout_below="#+id/album_count"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Biography Text"
android:id="#+id/biography_text"
android:layout_below="#+id/biography_string"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</LinearLayout>
</ScrollView>

I achived my aim making it programmaticaly. In activity I got access to ImageView and set it's height = half of visible screen.
ViewGroup.LayoutParams lp = bigphoto.getLayoutParams();
lp.height = getResources().getDisplayMetrics().heightPixels/2;
bigphoto.setLayoutParams(lp);
But still I don't know how to make this using XML

Doesn't wrap_content adjust to the size of fonts?

My understanding was that the wrap_content take as much space as needed by its contents. But doesn’t this apply to TextViews as well?
In the following layout why when I change the font of TextView with id real_status to 24 the text is partially hidden? I was expecting that due to the wrap content the enclosing TextView it would wrap around the 24 sp and display the text fine. It is fine with 18sp.
Layout:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<TextView
android:id="#+id/real_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/full_display_name"
android:gravity="center_vertical"
android:textSize="24sp"
android:textStyle="bold"
tools:text="Active"
/>
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/real_status"
android:gravity="center_vertical"
android:text="The real user status:"
android:textSize="16sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/full_display_name"
android:gravity="right"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:visibility="gone"
tools:text="Just a text view"
tools:visibility="visible" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
With 18sp:
With 24sp:
UPDATE:
Following the answers I removed the layout top/bottom and the font adjusted but now I see that the TextView overlaps with the next widget. Adding red background is more visible.
I thought that by “growning” the TextView the rest would move down and not overlap

whenever You suffering from this type of problem You can LiniarLayout is best if You understand it very well. because of wrap_content and match_parent is simple to handle in LiniarLayout.
lets understand it.(For Your case)..
1.take two LiniarLayout(parent have verticle orientation..)
i give Id LL1(horizontal) and id LL2 for your case
2.in first layout two textview #+id/full_display_name and #+id/real_status
in real_status have match_parent in width so it easy to divide parent(fill_parent) and set its android:gravity="right"
3.LiniarLayout as it is without relate
See belove XML code...
<?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="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The real user status:"
android:textSize="16sp" />
<TextView
android:id="#+id/real_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Active"
android:textSize="26sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/real_status"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Just a text view" />
</LinearLayout>
</LinearLayout>
It will help you Your GUI give bestView in All devices with any size of text
Hope it help You

Remove these two line will fix your problem
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignTop="#+id/full_display_name"

Yes the wrap_content will take as much space needed by the view. It will also applied to the TextView also. The problem here is you written android:layout_alignBottom="#+id/full_display_name" to real_status text view. This attribute is overriding the wrap_content So remove allignBottom attribute from the text view.
UPDATE
For your bottom linear layout update the line
android:layout_below="#+id/full_display_name"
with
android:layout_below="#+id/real_status"

scaled ImageView placement in RelativeLayout

I need to place three elements inside RelativeLayout:
scaled image in ImageView on the right side with the top and bottom margins
TextEdit in the left top corner
LinearLayout in the rest of the space (below the title and to the left of the image)
The problem happens when the image is scaled in ImageView. I want it fits the entire parent's height considering margins. After scaling uniformly to fit the parent's height I want ImageView wraps the image's width. But as the result there are some unfilled horizontal spaces in ImageView.
The problem looks similar to one solved here. But in my case all tests with android:adjustViewBounds and android:scaleTypes didn't work. I suppose there is a problem because of margins and RelativeLayout use.
Here is the extract from my xml file:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#id/albums_slideshow"
android:adjustViewBounds="true"
android:layout_marginTop="71.33dp"
android:layout_marginBottom="88.67dp"
android:scaleType="centerInside"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/music_img_album_noimage"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/music_module_screen_title_margin_left"
android:layout_marginTop="#dimen/music_module_screen_title_margin_top"
android:text="#string/music_string"
style="#style/ScreenTitleFont"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignTop="#id/albums_slideshow"
android:layout_toLeftOf="#id/albums_slideshow">
...
</LinearLayout>
</RelativeLayout>
Has anyone met this problem and found the answer?

this is what i have come up with
and this is the xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="music string" android:background="#android:color/white"
/>
<LinearLayout android:id="#+id/albums_list"
android:layout_width="wrap_content" android:layout_height="fill_parent"
android:layout_alignParentLeft="true" android:layout_below="#id/album_text"
android:layout_marginTop="71.33dp"
android:orientation="vertical" android:background="#android:color/white"
>
<TextView android:id="#+id/album_text"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
android:text="albums list"
/>
</LinearLayout>
<ImageView android:id="#+id/albums_slideshow"
android:layout_height="fill_parent" android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="88.67dp"
android:layout_alignTop="#id/albums_list"
android:scaleType="centerInside"
android:layout_centerInParent="true" android:background="#android:color/darker_gray"
android:src="#drawable/icon"/>
</RelativeLayout>
let me know for improvements