Adding rounded corners to constraint layout leaves white background

user_12491671 0
Viewed 2077

I am using a constraint layout for my designs. I am new to constraint layout. My root layout is constraint layout and my child layout is also constraint layout. I have added background for my root layout with rounded corners but it leaves the white background at the corners. Below is my layout. This layout is attached to the fragment.

    <?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:id="@+id/background_black_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/res_bottomflat_topcorner_audiocontrols"
    app:layout_constraintBottom_toTopOf="@+id/background_grey_layout">


    <android.support.constraint.ConstraintLayout
        android:id="@+id/background_grey_layout"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginEnd="10dp"
        android:background="@drawable/res_grey_roundfilled_corner"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/background_black_layout"
        app:layout_constraintBottom_toBottomOf="parent"
        >

        <android.support.v7.widget.CardView
            android:id="@+id/album_art_card_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:elevation="2dp"
            app:cardCornerRadius="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/background_grey_layout">

            <ImageView
                android:id="@+id/album_art"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:contentDescription="@string/currently_playing_song"
                android:scaleType="fitXY"
                tools:src="@drawable/ic_launcher" />

        </android.support.v7.widget.CardView>


        <LinearLayout
            android:id="@+id/content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/album_art_card_view"
            app:layout_constraintTop_toTopOf="@+id/background_grey_layout"
            app:layout_constraintEnd_toStartOf="@+id/favorite_layout"
            >

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/currently_playing_song"
                android:ellipsize="end"
                android:fontFamily="@font/quicksand_medium"
                android:maxLines="1"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/main_text"
                android:textSize="12sp"
                tools:text="The Best Music EVAH1111 THE BEST" />

            <TextView
                android:id="@+id/artist"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/currently_playing_artist"
                android:ellipsize="end"
                android:fontFamily="@font/quicksand_regular"
                android:maxLines="1"
                android:text="A.R.Rehman"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textColor="@color/sub_text"
                android:textSize="10sp" />

        </LinearLayout>

        <RelativeLayout
            android:id="@+id/favorite_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/play_pause"
            android:layout_marginEnd="20dp"
            app:layout_constraintTop_toTopOf="@+id/background_grey_layout"
            android:layout_marginStart="10dp">

            <CheckBox
                android:id="@+id/favorite"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:button="@null"
                android:clickable="false"
                android:drawableStart="@drawable/favourite_check_status"
                />
        </RelativeLayout>


        <ImageView
            android:id="@+id/play_pause"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/bg_player_play_button_home"
            android:contentDescription="@string/play_pause"
            android:src="@drawable/ic_pause"
            android:layout_marginEnd="20dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/background_grey_layout"
            app:layout_constraintBottom_toBottomOf="parent"
            />
    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Below is my drawable file. res_bottomflat_topcorner_audiocontrols

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- fill/color -->
    <solid
        android:color="#000000"/>
    <corners
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp"
        />

</shape>

Below given image is the output I am getting.

bottom control image

What I need is shown below.

original output

I don't know where I am missing. I have searched a lot but I don't find any answers related to this. Need help. Thanks in advance.

android-constraintlayout android-drawable rounded-corners android
3 Answers

The thing you missed is you have to put your desired background color to your root view Another reason it would happen maybe your recyclerview (assuming that you have to use a recycler) is above of that music play view it should be above of bottom navigation

user_126762470

Kotlin

  MyDialog.window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

Android

MyDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
user_41562990

After getting pissed for 2 days I finally found it . It cannot be solved by any drawable files or by editing the canvas but simply by making the layout as base layout.

There are several methods and stuffs under values you have to choose the right ones and add it in your styles.

First add these to your styles.xml

<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
</style>

<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/drawable_round_bottom_sheet</item>
</style>

Now the most important part is to call the AppBottomDialogue for this I used this

 override fun getTheme(): Int {
    return R.style.AppBottomSheetDialogTheme
}

Now you can choose whatever to do with your method I used ImagesView inside ConstraintLayout you can directly clip it no problem.

If you want to know here it is

First I created these two drawable because I have to switch between day and night mode

day.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"
        android:bottomLeftRadius="16dp"
        android:bottomRightRadius="16dp"/>

</shape>

Then night.xml

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/night"/>
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"
        android:bottomLeftRadius="16dp"
        android:bottomRightRadius="16dp"/>

</shape>

Then I placed them to the methods parent1 is the id of the imageview if you are wondering

if (isNightMode) {
        parent1.setImageResource(R.drawable.round_night)

    } else {
        parent1.setImageResource(R.drawable.round_day)
    }
user_93082880
Related