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

Question

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?

Answer 1

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>

Answer 2

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.