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"
Related
I am displaying a couple of textviews inside a ListView component. My issue is that textview's text is not aligned between rows despite having the same length. I am attaching an image to make the issue clear.
image here
It is not quite visible but its still annoying and I cannot find why its happening.
The xml layout file of the listview:
<?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"
android:layout_weight="2"
android:padding="16dp">
<TextView
android:id="#+id/textview_date"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="17sp"
/>
<TextView
android:id="#+id/textview_temp"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textSize="17sp"
/>
</LinearLayout>
I have following problem, I want to add a ImageView (the Google Play button) to my dialog which stays in place, no matter which device the app is running on.
Here is what it should look like:
This is what it looks like on some devices:
Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/goProDialogImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/goldversiondialog"/>
<ImageView
android:id="#+id/googleplaybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/goProDialogImage"
android:layout_alignBottom="#+id/goProDialogImage"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:maxHeight="250dp"
android:maxWidth="250dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:src="#drawable/gpbutton" />
</RelativeLayout>
How can I tell the app to never put the Image above the golden veil?
Do this:
<LinearLayout
android:weightSum="1"
android:gravity="end"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/googleplaybutton"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_logo" />
</LinearLayout>
I have removed some of your properties, the key point is that you need to use weightSum in LinearLayout and apply weight to your ImageView(I have given 0.5, you can change according to your need). Also, do not set android:scaleType to fitXY, keep the aspect ratio so the height will change according to the width.
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">
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>
I am trying to add two different textviews with different heights like so:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/single_margin"
android:layout_marginLeft="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:layout_marginTop="#dimen/single_margin"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginRight="28dp"
android:layout_weight="3"
android:fontFamily="sans-serif-light"
android:gravity="center_vertical"
android:singleLine="false"
android:text="This is example text view that will mess up the height!"
android:textColor="#color/dark_blue"
android:textSize="#dimen/ad_title_text" />
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" /> </LinearLayout>
And the result is this:
(Don't mind the drop shadow above. I cropped the image and the shadow is from the actionbar)
The height of the linear layout is determined by the smaller textview instead of the bigger one. Why? And how do I go about fixing it? Thanks in advance
Make textview's height wrap_content it will solve the issue
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="wrap_content"
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="match_parent"
android:layout_marginBottom="#dimen/single_margin"
android:layout_marginLeft="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:layout_marginTop="#dimen/single_margin"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginRight="28dp"
android:layout_weight="3"
android:fontFamily="sans-serif-light"
android:gravity="center_vertical"
android:singleLine="false"
android:text="This is example text view that will mess up the height!"
android:textColor="#color/dark_blue"
android:textSize="#dimen/ad_title_text" />
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" />
</LinearLayout>
If this does not solve your problem then give your dimen.xml file.
Hope this will be helpful...thanks
You want to make the left textview (with ID newsfeed_ad_title) not cut right? Change the android:layout_height to "wrap_content"
Try to set match_parent newsfeed_ad_info_button TextView :
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" />
Note : Also use dp instead px :
http://developer.android.com/guide/practices/screens_support.html
The problem is that the first TextView (the one with ID newsfeed_ad_title) has an height of match_parent. This means that first the LinearLayout will compute its preferred height, and then the TextView will occupy exactly that height.
Giving a wrap_content to the first TextView will solve the issue, because this way the LinearLayout will first ask both children to compute their desired height,and then set his own accordingly.
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="wrap_content"
... //the rest is unmodified