Develop Reference

Problem with relative layouts: anchored elements at the top right

I'm trying to create an android application but I'm a beginner, especially with the XML. I don't know why, if I put Relative layout and move the widgets they remain anchored at the top left. does anyone know why?
ps I would like to work on the window design not on the code. Anyway I leave you the code in case there is something wrong
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Tentativo">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</RelativeLayout>

You are facing this problem because you are using the wrong attributes. The attributes you are using are meant for Constraint Layout and not Relative layout.
For Example: in case of TextView instead of using app:layout_constraintRight_toRightOf="parent" try using android:layout_alignParentRight="true"
Also, I would like to recommend you to use Constraint Layout instead of Relative as is much better and easier to use. example: To center a view in a RelativeLayout you would write centerInParent=true. Constraint Layout instead allows centering in-between views and the parent.

relative layout works great with nested sibling Containers, just add a container, and add the Widgets inside the container, my favorite one to use when Relative Layout is the parent is the Linear Layout, it makes the UI much cleaner and uses weights which is great for supporting different screen ratios. Here is a sample Example for your case (also you can remove all the constraints in the widget since their parent is no longer the relative layout) :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:gravity="center"
android:weightSum="2"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Number"
android:layout_weight="1"
android:textSize="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.255"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.299" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Play"
tools:layout_editor_absoluteX="247dp"
tools:layout_editor_absoluteY="211dp" />
</LinearLayout>
</RelativeLayout>

Android : How to clip views by parent, like CSS overflow:hidden

I have views as follows :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/global_legal_gap"
android:clipToPadding="true"
android:clipChildren="true"
android:baselineAligned="false"
android:background="#drawable/post_sound_bg"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="#dimen/post_sound_card_height"
android:layout_height="#dimen/post_sound_card_height">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/album_art"
android:layout_width="#dimen/post_sound_card_height"
android:layout_height="#dimen/post_sound_card_height"
fresco:backgroundImage="#drawable/music_placeholder" />
<RelativeLayout
android:id="#+id/play_icon_control"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:visibility="gone">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_margin="3dp" />
</RelativeLayout>
</RelativeLayout>
<LinearLayout>
As shown in the parent RelativeLayout, I'm using android:clipToPadding="true" and
android:clipChildren="true", yet the children of this parent view are still protruding outside it.
Or I'm I doing this right? How do I achieve something like CSS's overflow:hidden?

Consider changing layouts. What you want can be done with ConstraintLayout.
Just set the the dimensions of the layout and don't set the constraint on the part you want to overflow/hide.
The following code shows a View that adjusts it dimensions to its constraint and another that overflows.
Create a new android project and paste this as activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:layout_margin="55dp">
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/sym_def_app_icon"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="84dp"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_height="300dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline"
app:srcCompat="#mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>

Your parent view has
android:layout_width="match_parent"
android:layout_height="wrap_content"
which means that the view takes all available width and up to all available height if child views are large enough. With this setup you can't seethe overflow:hidden behaviour because the parent will resize itself to contain children up to the whole screen size.
Actually, default view behaviour in android is similar to overflow:hidden.
What you need to do to see it is set fixed dimentions on the parent.
Just try to use something like:
<LinearLayout
android:layout_width="20dp"
android:layout_height="20dp"
and you'll get the idea.
On a different note, you don't need to have a LinearLayout just to host a RelayiveLayout - use the RelativeLayout directly. Also, using android:orientation="horizontal" makes it behave similarly to flexbox direction row, not sure if that's something you want here.

In native Android, overflow: hidden is android:clipToOutline="true".

Why margin top and layout_above in relative view behave this way?

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>

scroll a layout with a listview android

My problem is that i have my listview working perfect on a absoulteLayout but the buttons on the bottom aren't show up! I put a scrollview with a absoluteLayout with all items (textview, button, etc) and outside of the scrollview I put the listview, this didn't work, either, just scroll the buttons but the listview just move a little bit, how can I put a scrollview to can see the buttons on the button and make the listview works?
my XML:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- The main content view -->
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/Ab">
<ListView
android:layout_width="317dp"
android:layout_height="429dp"
android:id="#+id/listView"
android:layout_gravity="center"
android:layout_x="45dp"
android:layout_y="41dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This Works Monica!!"
android:id="#+id/TV1"
android:layout_gravity="center_horizontal"
android:layout_x="120dp"
android:layout_y="22dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Play :D"
android:id="#+id/TESTME"
android:layout_gravity="center_horizontal|bottom"
android:layout_x="190dp"
android:layout_y="520dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Pause"
android:id="#+id/PAUSE"
android:layout_x="110dp"
android:layout_y="521dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="37dp"
android:text="Lista"
android:id="#+id/LISTA"
android:layout_x="274dp"
android:layout_y="520dp" />
<CheckBox
android:layout_width="84dp"
android:layout_height="wrap_content"
android:text="Lista?"
android:id="#+id/CHECARL"
android:layout_x="267dp"
android:layout_y="490dp"
android:checked="false" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="BorrarL"
android:id="#+id/BORRARL"
android:layout_x="20dp"
android:layout_y="520dp" />
</AbsoluteLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#E6E6E7" />

You are using absolute layout that means, from documentation:
A layout that lets you specify exact locations (x/y coordinates) of its children.
So if you don't see the buttons it is because they are positioned outside of your device screen bounds. And their position is absolute / fixed so they stay there no matter what.
I would recommend to change to different layout. I don't know what kind of app you are building but absolute layout is generally not the best choice.

Possibility number one:
<?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"
android:background="#color/background"
android:clickable="true">
<ListView
android:id="#+id/allPaymentListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/addNewPayment"
android:layout_marginTop="10dp"></ListView>
<Button
android:id="#+id/addNewPayment"
android:layout_width="match_parent"
android:layout_height="#dimen/primary_button_height"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
android:background="#drawable/blackbutton"
android:text="#string/add_new_card"
android:textColor="#color/light_blue"/>
</RelativeLayout>
In this case the button will be always seen on the bottom of the page, below the listview.
The second possibilty is to add a footer to the listview:
http://developer.android.com/reference/android/widget/ListView.html#addFooterView(android.view.View)
In that case the view with the button will be the last element in the listview.
And don't use Absolute Layout it is deprecated, the reason is the app will not scale to different screen sizes as you wanted.

You should use a RelativeLayout with the buttons at the bottom and the ListView placed on top of the buttons.
AbsoluteLayout is, in general. to be avoided for layouts unless you are trying to accomplish a very specific purpose. It's considered an anti-pattern to position elements absolutely. To achieve what you have stated, a RelativeLayout would be the way to go.

Android: Using 2 layouts in one layout

I have some FrameLayout to display overlapping images. Under this FrameLayout I want to display a standard button for some click-action.
To make my work easier, I thought, I can put a new Linear, or Relative, Layout under the FrameLayout - surely all in one LinearLayout.
But this method isn't working for me.
What is the best way to show my button under a whole FrameLayout without putting it in the Layout and managing his position programmaticaly?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left" >
<ImageView
android:id="#+id/coverimg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:maxHeight="100dp"
android:minHeight="130dp"
android:minWidth="130dp"
android:src="#drawable/cover_img" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="100dp"
android:src="#android:drawable/ic_media_play" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="Button" />
</LinearLayout>
</LinearLayout>

first to say:
your orientation of the first LinearLayout is wrong. You should use vertical instead of horizontel, cause it would show the button right of your images and not below.
second:
no nead to wrap the button into another LinearLayout, cause it's a sinlge item and attached to your first LinearLayout.
third:
to set the button on another 'place', give your top LinearLayout an ID like 'android:id="#+id/myLinear"' and then use following code:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
LayoutParams lp = new LinearLayout.LayoutParams(Gravity.CENTER);
myLinear.setLayoutParams(lp);
maybe this will work to:
LinearLayout myLinear = (LinearLayout)this.findViewById(R.id.myLinear);
myLinear.setLayoutParams(new LinearLayout.LayoutParams(Gravity.CENTER));
Hope i could help you?

First you change Linear layout orientation to vertical, and second no need to use another
layout u can put button directly
Ex: android:orientation="vertical"