android - Rounded Linear Layout corner overlapped by fill_parent TextView

Question

enter image description here

This is what I need to the top of my layout

enter image description here

This is what I actually have

There would be a simple option that I'm not calculating at the moment.

Drawable for rounded corners

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#E9E9E9"/>
    <stroke android:width="4dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

Layout

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/home_root"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/rounded_layout" >

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

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/filter_title"
            android:background="@android:color/black"
            android:textColor="@android:color/white"
            android:padding="10dp"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="15dp" >

            <Spinner
                android:id="@+id/sp_intorno_a_me_proximity"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:spinnerMode="dialog" />
            .
            .
            .
            <EditText
                android:id="@+id/et_intorno_a_me_username"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:textSize="20sp"
                android:digits="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
                android:hint="@string/agentNumber" />

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="10dp"
                android:weightSum="1" >

                <Button
                    android:id="@+id/btn_intorno_a_me_close_search"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.5"
                    android:text="@string/annulla"
                    style="@style/HelianButtonRed"
                    android:textColor="@android:color/white" />

                <Button
                    android:id="@+id/btn_intorno_a_me_search"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.5"
                    android:text="@string/find"
                    style="@style/HelianButtonGreen" />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

</ScrollView>

I have already tried to move the drawable to the first LinearLayout child.

How can I prevent the text view to hides the rounded corners?

Why dont you declare the title TextView inside the second LinearLayout ?Doing this way the textView background will not overlap your rounder corners — Manishika, Oct 21 '13 at 10:13
Because the result will be padded due to the **android:padding="15dp"** of the secondo linear layout. Can I avoid the padding for a single view ? — Link 88, Oct 21 '13 at 10:27

score 3 · Answer 1 · answered Oct 21 '13 at 14:03

With the help of Manishika (I voted up your answer [do the same for me! :)]) I'm posting the solution of my problem!

With this parent rounded corner style:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#E9E9E9"/>
    <stroke android:width="4dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

We need to attach a specific drawable to the textview (or any view you need).

Here is the drawable for the trick:

I subtracted 2 d

    <corners 
        android:topLeftRadius="8dip"
        android:topRightRadius="8dip"
        android:bottomLeftRadius="0dip"
        android:bottomRightRadius="0dip" />
</shape>

KEEP IN MIND!!

The Graphical Layout (the Preview) will NOT shows the correct rounding! You need to test it on the device (or emulator if you have no devices).

score 2 · Accepted Answer · answered Oct 21 '13 at 10:31

2

Try something like this in your TextView as background. Create a new drawable .xml for TextView with following data

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#000000"/>
    <stroke android:width="4dip" android:color="#B1BCBE" />
    <corners 
        android:topLeftRadius="10dip"
        android:topRightRadius="10dip"
        android:bottomLeftRadius="0dip"
        android:bottomRightRadius="0dip"

        />
    <padding android:left="0dip" android:top="0dip" android:right="0dip"                  
      android:bottom="0dip" />

</shape>

answered Oct 21 '13 at 10:31

Manishika

5,478
2
22
28

I have not tried it yet, and I'm sure that this workaround would work, but I would like a more elegant solution that not force me to replicate the radius and color two times (one for the layout draw and one for the button draw). I would like to generalize it... Thank you for the time you are giving me anyway man! – Link 88 Oct 21 '13 at 10:37
No Actually you cant remove padding to one View if you have given padding to the parentLayout.But what you can do is put the TextView in a LinearLayout without any padding and put both textView's LinearLayout and LinearLayout2 inside one LinearLayout and give background to this LinearLayout.This way your TextView will not have padding – Manishika Oct 21 '13 at 10:56
I know this is a bad practice.But you should give it a try. – Manishika Oct 21 '13 at 10:57
Yeah man, I will give it a try! You will have my feedback asap – Link 88 Oct 21 '13 at 12:20
Almost perfect! When I set **android:topLeftRadius="5dip"** all the corners are rounded, instead of only the top left one. – Link 88 Oct 21 '13 at 13:47

android - Rounded Linear Layout corner overlapped by fill_parent TextView

2 Answers2