I want a simple card based layout with the image at the top of the card. However whenever I add this, the image floats in the vertical center of the card. How can I force the image to the top of the card without any hacks such as setting negative margins?
The XML I am using is here
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#EEE">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
>
<ImageView android:src="#drawable/edinburgh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="#id/card_view" ></ImageView>
</android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>
And here's a screenshot of the output:
Solution:
Change android:layout_alignParentTop="#id/card_view" to android:layout_gravity="top"
Explanation:
android:layout_alignParentTop="#id/card_view" value must be boolean, not View's id
android:layout_alignParentTop is attribute for RelativeLayout children, where CardView inherits from FrameLayout, not RelativeLayout.
Related
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>
I am trying to place a view on top of another view and a bit outside of its bounding box.
My code simplified to show the problem:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_above="#+id/linear"
android:layout_marginTop="200dp"
android:background="#color/red"
/>
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:orientation="vertical"
android:padding="0dp"
android:background="#color/white"
>
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/orange"
/>
</LinearLayout>
</RelativeLayout>
The result:
The second arrow shows where I expected the small rectangle view.
Why does it show up on the top although I have specified the same top margin as the linear layout bellow it?
If I remove the android:layout_above="#+id/linear" then it goes where the second arrow shows either but bellow the orange view and not above it.
Why does relative layout do that?
It is not RelativeLayout that does that but nature of margins. If you put a view (orange box) and say that there is margin of 200dp above it, then no other view can be placed in that 200dp margin.
To center a orange box and then put another view above it you need to do something like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_above="#+id/center_view"
android:background="#color/red" />
<View
android:id="#+id/center_view"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:background="#color/orange" />
</RelativeLayout>
This will put orange view in center and red view directly on top of it. Notice that you don't even need LinearLayout but can have orange view in RelativeLayout directly.
Layout_above causes it to layout with its bottom directly on top of the view its named above. If you want to make it layout directly above, you'd have 0 marginTop.
Without the layout above, it goes below because the z order is determined by the order of views in the file- the lower in the file, the higher the z order.
If you want it to appear on the upper left corner of the orange view, do layout_alignTop="#id/linear" and make sure the smaller view is later in the file than the bigger view. Do not put a margin on it.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:orientation="vertical"
android:padding="0dp"
android:background="#color/white"
>
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/orange"
/>
</LinearLayout>
<View
android:id="#+id/view"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_alignTop="#+id/linear"
android:background="#color/red"
/>
</RelativeLayout>
When you include the attribute android:layout_marginTop="200dp" in the LinearLayout android:id="#+id/linear", the margin is considered to be a part of the LinearLayout container.
Hence, effectively, the container wrapping the LinearLayout includes the margin android:layout_marginTop="200dp". And since your root layout is a Relative Layout, the LinearLayout is aligned to the top of the root layout by default (since the LinearLayout doesn't contain any relative attributes like android:layout_below, android:layout_above etc). So when you include the android:layout_above="#+id/linear" attribute in your View tag given by android:id="#+id/view", it is trying to place the View above LinearLayout which starts from the top of the screen.
A better way to code your layout would be:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginTop="200dp"
android:background="#color/red"
/>
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_below="#+id/view"
android:orientation="vertical"
android:padding="0dp"
android:background="#color/white"
>
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/orange"
/>
</LinearLayout>
</RelativeLayout>
<?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"
i am currently making one android application, i moded title bar, so all content for title bar is holded in window_title.xml where i have LinearLayout set: paddingLeft="5dip" . And now i need to load one imageView on the right side of this titleBar how i am able to some kind of overwrite this paddingLeft i cant delete it as it required for text and image on the left but i need it on right too...
Here is current xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:background="#222222">
<ImageView
android:id="#+id/header"
android:src="#drawable/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="TextTexast"
android:textSize="10pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="5dip"
android:textColor="#F7F7F7"
/>
</LinearLayout>
If I understand your question correctly, you're looking to apply some padding to an ImageView that you display to the right of the titlebar TextView. You can use android:paddingRight in your root LinearLayout like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:gravity="center_vertical"
android:paddingLeft="5dip"
android:paddingRight="5dip
android:background="#222222">
Alternatively, you can specify the android:paddingRight attribute in the ImageView that you want to align to the right.
To move the grey figure to the right just set android:layout_gravity for that to "right".