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?

@harshjain ` adjustViewBounds` is for Images, and beside, it's not even for this, but aspect ratio. — Relm, Jun 14 '18 at 09:51
there is no `android:clipToPadding` in the code. Could you post a sketch of what you would like? — Tadija Bagarić, Jun 16 '18 at 09:51
@TadijaBagarić the code was simply cut out by poorly formatted code, see edit. — Relm, Jun 16 '18 at 10:02
Have you tried setting android:layout_height to `match_parent`? — Tadija Bagarić, Jun 16 '18 at 12:49
yo! I didn't understand one stuff: you said that the relativelayout has the clipToPadding, but it is in the linearLayout, right? another stuff is: which view is overflowing from its parent? the child relativelayout? — Pier Giorgio Misley, Jun 19 '18 at 07:38
@Relm thanks, can you provide a screenshot of the actual result? just to have a correct idea of what is appening :) — Pier Giorgio Misley, Jun 20 '18 at 12:11

Tadija Bagarić · Answer 1 · 2018-06-19T07:29:12.340

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>

I'd love if this can be done with what I posted above. I want to understand why this isn't working before changing anything. — Relm, Jun 16 '18 at 12:19

score 4 · Answer 2 · answered Jun 17 '18 at 15:00

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.

score 0 · Answer 3 · edited Dec 31 '22 at 11:27

0

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

edited Dec 31 '22 at 11:27

SNBS

671
2
22

answered Dec 31 '22 at 05:47

Vishal Parmar

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 31 '22 at 11:47

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

3 Answers3