Develop Reference

Android XML: Textview with 2 Imageviews below it that are next to each other

I want to create a layout in Android that looks like this:
This is what i want the result to look like
So far, my code looks something like this:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:text="TextView"
android:textSize="24sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="216dp"
android:layout_height="217dp"
android:layout_below="#+id/textView"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_launcher_background" />
</RelativeLayout>
if someone could help me with this it would be much appreciated

I suggest in this case using LinearLayout cause the layout is very simple.
Try it. Here the width of the images is halved exactly with the attribute android:layout_weight="1" in the ImageView1 and ImageView2 android:layout_weight="1", result weight is 2 (set in LinearLayout android:weightSum="2", try change it and you will see how it works).
Also, in more complex layouts, I suggest using ConstraintLayout instead RelativeLayout.
Good luck!
<?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="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:paddingHorizontal="20dp"
android:paddingTop="20dp"
android:paddingBottom="40dp"
android:text="TextView"
android:textColor="#android:color/white"
android:layout_gravity="center_horizontal"
android:textSize="24sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:background="#drawable/ic_launcher_background"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_marginleft="5dp"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_launcher_background"/>
</LinearLayout>
</LinearLayout>

Use Constraint layout, you won't have to nest layouts. Just define the start, end, top, and bottom constraints of each view and then you have the layout you want. For example the two image views should have their top constrained to the bottom of the TextView, then the start of the left ImageView should be constrained to the start of parent container while the end of the right ImageView should be constrained to the end of the parent container. then constrain them against each other. i.e start of right ImageView against end of left ImageView and vice versa.

layout_gravity isn't working as expected - just partially

I have the following layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#string/title_day"
android:textStyle="bold"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="end|center_vertical" />
</LinearLayout>
</LinearLayout>
And this looks like this:
And I want the last TextView with id tv_fail to be pinned to right end of screen. I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end. How to fix it?

I suppose that
android:layout_gravity="end|center_vertical"
should handle it, but this instruction centers TextView vertically, but doesn't move it to end.
This is due to how LinearLayout works; your understanding of layout_gravity is generally correct.
LinearLayout takes its children and lays them out in a line, and the children will all be packed towards the "start" of the LinearLayout. In other words, a horizontal LinearLayout will ignore the horizontal component of the layout_gravity attribute of a child.
There are a few ways to work around this. The one that I think works best for your scenario is to make the TextView stretch to fill all the remaining space in the LinearLayout (using layout_weight), and then have the TextView position its text at the end of its content area (using gravity).
<TextView
android:id="#+id/tv_fail"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+22"
android:textSize="16sp"
android:layout_gravity="center_vertical"
android:gravity="end"/>

If you just want to set text inside of your last TextView to end then you should use :
android:gravity="end"
for TextView gravity use:
android:layout_gravity="center"
Difference between android:gravity & android:layout_gravity is that first one arrange content inside of any view with given gravity while second one arranges view according to given gravity.
Updated code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="title_day"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Tuesday"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="#+id/tv_fail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="+22"
android:textSize="16sp" />
</LinearLayout>

LinearLayout inside CardView not filling the whole space

Why is my Linear Layout not taking up the whole space inside the CardView?
When I use the preview and expand the LinearLayout to match the CardViews width it sets the width to match_parent (which I tried manually) but then goes back to how it is now.
In other words: I want the red background to go all the way to the right and also the right TextView aligned to the right.
<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.support.v7.widget.CardView
android:id="#+id/itemCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
android:background="#color/Mat"
android:padding="3dp"
app:cardElevation="4dp"
app:cardCornerRadius="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:background="#color/Mat"
android:orientation="horizontal"
android:padding="3dp"
android:paddingLeft="5dp"
android:paddingRight="5dp">
<TextView
android:id="#+id/textView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/circle"
android:gravity="center"
android:text="DEU"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Frau Hardt"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView4" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="O03"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Edit: After removing the min-width and setting the width of the whole layout to match_parent it goes all the way to the right.
Now how do I get to center the TextView with the name horizontally and have the text view on the right align to the right of the whole layout?
I included a picture because it looks all nice right next to each other. I hope the code (especially since it's not a whole lot) doesn't have to be as text. If so I'll edit the question of course!
Thanks!

Make your middle TextView as this;
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
... />
It fills the remaining middle space.
You also should use match_parent instead of fill_parent since it is deprecated.

Why does image in relative layout with "fill_parent" hide button underneath?

I'm trying to increase the size of an image in relative layout. Right now, its width and height are set to wrap_content. When I set them fill_parent, the image grows, but pushes the button underneath off the display. The relevant XML is below. What am I doing wrong?
Edit: Thanks for all the answers, but so far, if I set the height of the image to fill_parent or match_parent, it always extends to the bottom of the display, regardless of if the button is in or outside of relative layout. Why does the relative layout ignore what's beneath it?
<LinearLayout>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/myImageView"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/apple"
android:alpha=".5"
android:paddingBottom="0dp"
android:adjustViewBounds="true" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample"
android:textColor="#000000"
android:singleLine="true"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignStart="#+id/myImageView"
android:layout_alignParentTop="true" />
</RelativeLayout>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/enterPluButton"
android:background="#FFBD5C"
android:textColor="#000000"
android:text="Submit" />
</LinearLayout>

Set android:layout_alignParentBottom="true" for button.
Set android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/enterPluButton" for your RelativeLayout
Set android:layout_width="match_parent"
android:layout_height="match_parent" for the ImageView

In RelativeLayouts views are positioneed relatively to the top left of the "ViewGroup". To get the ImageView to stop hiding the Button, or any other view at that matter, add the layout_below attribute.
<TextView
android:layout_below="#+id/relativelayout"
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
...
/>
Also, for ImageView it is not advised, unless being used for a background, that you set layout_height to fill_parent or match_parent.
You would get the desired result if you place the Button in the relative layout and position it under the text view.

RelativeLayout positions View relative of each other. if it does not have a relation to a another child View it calculates with the Parent View which is the RelativeLayout. This is why you are having that. Why don't wrap the LinearLayout in a ScrollView or give the RelativeLayout a fixed dimension

I understand now what you're trying to do. Try this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:alpha=".5"
android:paddingBottom="0dp"
android:src="#drawable/apple" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/myImageView"
android:gravity="center"
android:singleLine="true"
android:text="Sample"
android:textColor="#000000" />
<Button
android:id="#+id/enterPluButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/myImageView"
android:background="#FFBD5C"
android:text="Submit"
android:textColor="#000000" />
</RelativeLayout>

Unable to horizontally center a TextView

I have a TextView inside a LinearLayout and i want to align it in center of the page but its not happening, i have tried the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>

Change the TextView layout_width to "match_parent", the issue is that "gravity" works only for the child of the View in this case the "text" it self, hence if you specify the object width as just to wrap its content, it means there's no space to center to, filling the whole parent and using "gravity" center would do the trick.
The other thing you can do is changing the "android:gravity" property to "android:layout_gravity" and center horizontal, this way you are telling the TextView itself to move to the center...
As best practice always try to use RelativeLayouts and avoid LinearLayouts, they provide a better way to manipulate Views position and are "device size fragmentation" friendly, RelativeLayout have plenty of methods to position views on the most common positions including center, top, bottom etc...
Hope this Helps.
Regards!

Try changing the layout. Linear Layout is meant for displaying ui components in rows. If you want to center your textview using you layout, I suggest changing the layout to Relative Layout.

First of all you cant set the property android:layout_centerHorizontal="true" for a LinearLayout. To make it centered you need to make layout height and width to match_parent like below,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/userName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>

Try using:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center" >
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#80000000"
android:gravity="center"
android:padding="10dp"
android:text="User Name"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>