2
votes

I have a linear layout with 2 text views that have different background colors. I want to make the whole view (linearlayout) with rounded corners. I tried enclosing it in MaterialCardview (as I was able to achieve that effect when I set the whole fragment layout inside) but for some reason it is not working. What do I need to do to achieve rounded corner on the view?

<android.support.design.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="8dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="2dp"
        app:cardBackgroundColor="@color/Transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tutTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/tutorial_title"
                android:text="Text 1"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textColor="@color/White"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/tutBody"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/tutorial_body"
                android:padding="10dp"
                android:drawableLeft="@drawable/image"
                android:drawablePadding="10dp"
                android:text="This is a hint"
                android:textColor="@color/main_dark_grey"
                android:textSize="16sp" />
        </LinearLayout>

    </android.support.design.card.MaterialCardView>

Note: I know some might suggest to use xml drawable with rounded background. This Won't work as the children background color will take over the transparency and will remain sharp edges

3
its good if you share your expected output as image - AskNilesh
why you don't using shape drawable in both of linear and it's child layout? - GianhTran

3 Answers

0
votes

I want to make the whole view (linearlayout) with rounded corners.

Since the LinearLayout covers all the CardView, then the whole view, is the CardView.
So instead of setting transparent background to the CardView, set it to the LinearLayout, set a background color to the CardView and you will see rounded corners.
If you set transparent color to both the CardView and the LinearLayout how do you expect to see rounded corners since there are no corners?

3
votes

res/drawable/background.xml

<shape  xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#00ffffff"/>
    <corners android:bottomRightRadius="8dp"
       android:bottomLeftRadius="8dp"  
       android:topRightRadius="8dp"
       android:topLeftRadius="8dp"/>
</shape>

activity.xml

<LinearLayout
        android:layout_width="match_parent"
        android:background="@drawable/background"
        android:layout_height="wrap_content"
        android:orientation="vertical">
1
votes

Try this layout. Hope this is the give you the expected results you want.

<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:orientation="vertical"
android:layout_margin="16dp">



<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/layout_bg"
    >
    <TextView
        android:id="@+id/que"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:gravity="center_vertical"
        android:paddingLeft="15dp"
        android:text="@string/tvque"
        android:textColor="#cbd3db" />
    </RelativeLayout>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/layoutbg1"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/des"
        android:padding="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tvdes"
        android:textColor="#2c365a"
        />
</RelativeLayout>

</LinearLayout>

layout_bg

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <solid android:color="#3e4874"/>
 <corners android:topLeftRadius="6dp" android:topRightRadius="6dp"
    android:bottomLeftRadius="0.1dp" android:bottomRightRadius="0.1dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" 
         android:bottom="0dp" />
</shape>

layout_bg1

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#fff"/>
<corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"
    android:bottomLeftRadius="6dp" android:bottomRightRadius="6dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" 
         android:bottom="0dp" />
</shape>