Develop Reference

Layout weight with matchparent attribute

I have been often told to use 0dp on views while using weight in XML like this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="1" />
</LinearLayout>
but there is a problem with this code which is when i use a view like Button, i can't force it to take the exact weight im giving to it.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="25"
android:text="1" />
<Button
android:id="#+id/a2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="2" />
</LinearLayout>
in the code written above, the 2nd button will never be exactly 1/26 because the button itself has some margin and padding by default.
but when i use match_parent for their height, it forces them to be exactly 1/26 and it works perfectly.
but i can't understand why the 1st button gets to be 1/26 and it seems like they exchange their weight, and it gets more complicated when i use 3 views.
is there a better way of achieving this goal ?
and why weight acts different while using match_parent ?

the spacing in the Button is not padding or margin, but it was a background.
if you want to remove the spacing you should change the background of the Button
it is recommended to use android:layout_height="0dp"
because the docs of layout_weight said :
Indicates how much of the extra space in the LinearLayout is allocated to the view associated with these LayoutParams.
It said "extra space" not "space". So the right height should be 0dp + "extra space calculated"
here some sample code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="6"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/a1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/red"
android:text="1" />
<Button
android:id="#+id/a2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:background="#color/blue"
android:text="2" />
<Button
android:id="#+id/a3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#color/yellow"
android:text="3" />
</LinearLayout>
and the result

GridView items overlapping each other

Please check my attached image. I am facing this issue when the product name is more than one line. I am confused what should i do now.
In my gridview i am facing this issue. How can i solve this? Here is my gridview xml code.
<GridView
android:id="#+id/productGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:verticalSpacing="4dp"
android:horizontalSpacing="3dp"
android:focusable="true"
android:stretchMode="columnWidth"
android:fitsSystemWindows="true">
</GridView>
Here is my grid item xml
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardPreventCornerOverlap="true"
app:contentPadding="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_productImage"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/avatar"/>
<TextView
android:id="#+id/tv_productName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:text="Bread Trimmer"
android:textSize="17sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp">
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:src="#drawable/coin"/>
<TextView
android:id="#+id/tv_productPrice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1049999999999990"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:textColor="#FAAD18"
android:textSize="17sp"/>
</LinearLayout>
<TextView
android:id="#+id/btn_buy"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:layout_height="wrap_content"
android:text="Get Now"
android:textColor="#FFFFFF"
android:focusable="false"
android:textSize="16sp"
android:gravity="center"
android:background="#drawable/buy_background"
android:textStyle="bold"
android:textAllCaps="false"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
This is single item. I am confused where did i made mistake. Please help. Thanks.

solution 1
you can add this attribute to your tv_productName
android:ellipsize="end"
android:singleLine="true"
android:maxLines="1"
this lines add ... to end of your TextView text
solution 2
use this library for your tv_productName TextView
autofittextview
this library fit your TextView size to prevent overlaping
solution 3
this is a bad solution but it work you can add margin to your parent layout(RelativeLayout)
android:layout_margin="5dp"

I think the problem is. Your text view. The name of the product. As the product name increases the whole text view get divided and spread vertically. Like Rhinestones Rose watch the watch is in the vertical position related to the upper text which is creating the issue. I guess. Try to use small text and check if that's the issue or not and if that's the issue you can easily be able to solve it I guess and plz let me know if it works. Thanks .

How to add a number and a frame after textview

I want to add a framed number (#+id/number_ayat) right after the end of the text(#+id/isi_ayat), but it can't if I use textview. So how can I add numbers and frames after the end of the text?
This is my code in custom_isi_ayat.xml
<?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"
android:paddingBottom="10dp"
android:paddingTop="10dp"
>
<LinearLayout
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:background="#drawable/frame"
android:gravity="center" />
<TextView
android:gravity="left"
android:textAlignment="textStart"
android:id="#+id/isi_ayat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30dp" />
</LinearLayout>
<TextView
android:id="#+id/translate_bahasa"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:paddingLeft="20dp"
android:id="#+id/terjemahan"
android:textStyle="italic"
android:lineSpacingMultiplier="0.7"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
in capture result :in capture result :
and I want to result is : and I want to result is
Whether this can be solved with java?
Thanks in advance for help with my problem !

I have modeled the layout in Android Studio. I had to force rtl on my layout so there may be some things to correct. The first that I sugest is changing the width of "#+id/isi_ayat" as explained below.
The changes I did were the following:
In the LinearLayout I set gravity to end for the textviews to go to the right.
For android:id="#+id/isi_ayat", I set gravity and textAlignment to end so the text aligns to the end of the TextView, and also set layout_gravity to end and center_vertical for the TextView to also go to the end. And also changed the width from match_parent to wrap_content.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:textSize="20dp"
android:id="#+id/number_ayat"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="10dp"
android:gravity="center"
tools:text="10"/>
<TextView
android:layout_gravity="end|center_vertical"
android:gravity="end"
android:textAlignment="gravity"
android:id="#+id/isi_ayat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
tools:text="lorem ipsum dolo asd"/>
</LinearLayout>
EDIT I
I removed android:layout_marginRight="10dp" from android:id="#+id/number_ayat".
As you can see in the picture below. There is no more space between the two textviews.
This is the closest you can get without making the number's textview smaller.
EDIT II
I think I understood, if there are more lines the number must be after the last line.
Change android:gravity="end" to android:gravity="end|bottom" in
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">

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>

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"