I want to separate the 4 icon with equal space like pic1.
And the XML code for pic1 is:
However, at the first time, I set the Blank View height as wrap_content, then the result showed like this:
.
The code for pic2 is:
.
The only difference is highlight by red rectangle.
In the case of this layout, you will get more from a ConstraintLayout.
Specifically, setting your icons within a ConstraintLayout would look like this to get the balanced look you're going for:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/image_2"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
<ImageView
android:id="#+id/image_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_1"
app:layout_constraintEnd_toStartOf="#id/image_3"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_2"
app:layout_constraintEnd_toStartOf="#id/image_4"
app:layout_constraintHorizontal_chainStyle="spread_inside" />
<ImageView
android:id="#+id/image_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/check"
app:layout_constraintStart_toEndOf="#id/image_3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="spread_inside"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The takeaways from this snippet that get your look are:
horizontal Orientation for the ConstraintLayout
Constraints for each ImageView that attach them to the one before and after
First view is constraint to the parent, specially, as is the last view
app:layout_constraintHorizontal_chainStyle="spread_inside", says to spread them out evenly within the available space.
If you don't want them touching the sides, add padding to the left/right of the parent ConstraintLayout.
Use this code in place of that linearlayout containing all the icons:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your first icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your second icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your third icon code here-->
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<!--keep your fourth icon code here-->
</LinearLayout>
</LinearLayout>
Related
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 have a Vertical linear layout with 2 item. One is a is a customview which is extended from a framelayout and the 2nd one is a textview with a drawable as background. The visibility have to be controlled dynamically from gone to visible.
The issue is that when i change the visibility of the item from gone to visible the order is not coming as i intended. The the second item is below the customview. I want it to come as the 2nd item, below the customview
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:textureview="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="#+id/comment_holder"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.custom_views.CircularFrameLayout
android:id="#+id/comment_holder_circular_layout"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/user_avatar"
android:visibility="gone"
android:layout_gravity="center_horizontal"
android:layout_width="#dimen/comment_avatar_width"
android:layout_height="#dimen/comment_avatar_width" />
<com.custom_views.PlaybackTextureView
android:visibility="gone"
android:id="#+id/playback_texture_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
textureview:isAuthorMode="true"/>
</com.custom_views.CircularFrameLayout>
<LinearLayout
android:visibility="gone"
android:id="#+id/c_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="16dp"
android:paddingStart="4dp"
android:paddingEnd="4dp"
android:background="#drawable/chat_bubble_top_arrow_orange"
android:orientation="vertical">
<TextView
android:id="#+id/video_comment_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#color/black_50"
android:fontFamily="sans-serif" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
NOTE: I tried adding weight to the custom layout as 1. But it still didnt help.
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>
<?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:weightSum="10"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:layout_weight="2">
<TextView
android:id="#+id/centerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#FFFFFF"
android:textSize="28sp"
android:text="HALLO ALLE"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/centerText"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="10"
android:layout_weight="8"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Btn 1"
android:layout_weight="2"/>
</LinearLayout>
Hi everybody, this is my code and I have a question about this I set a weightSum in the first LinearLayout I set the weightSum of 10, which the RelativeLayout has 2/10 and the other one (LinearLayout) has 8/10, as I saw in the preview of my IDE (Android Studio), the RelativeLayout is the bigger one here's my question:
The layout_weight with less value will be the bigger one?
No, the larger value for layout_weight should be the bigger one.
When using layout_weight you should set either the height or width to 0dp; in a vertical layout you're dealing with height and in a horizontal one it's width.
So in your case your root layout is a vertical LinearLayout. Within that, your relative layout with a weight of '2' should have android:layout_height="0dp" and the same for your LinearLayout with a weight of '8'.
From the documentation:
A larger weight value allows it to expand to fill any remaining space in the parent view
The key part here is "remaining space"
This means that if the RelativeLayout height is bigger them half of its parent height, it will be bigger then the LinearLayout no matter to what value you set its android:layout_weight property
I believe you are looking for something like this: (top takes up 20% bottom takes up 80%)
<?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:weightSum="5"
android:orientation="vertical">
<!-- Specify height as 0dp-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#000000"
android:layout_weight="1">
<TextView
android:id="#+id/centerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#FFFFFF"
android:textSize="28sp"
android:text="HALLO ALLE"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/centerText"
android:text="Button top"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<!-- Specify height as 0dp -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Btn 1"/>
</LinearLayout>
</LinearLayout>
When dealing with layout weights you supply 0dp to the layout width or height of the weighted item when parents orientation is horizontal or vertical.
When ever using weights it is better to use corresponding one to 0dp and then use the layout_weight....like
In Case of android:orientation="horizontal"
Use the following code
android:layout_width="match_parent"
android:layout_height="0dp"
In Case of android:orientation="vertical"
Use the following code
android:layout_width="0dp"
android:layout_height="match_parent"
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"