KARAN CHAPANERI KARAN CHAPANERI -3 years ago 179
Android Question

Create a CardView with a semicircle on top

I am very much into designing a login screen.

Something like this:

enter image description here
How Do I actually cut the card from the top so as to fill the drawable on top of it? Any help would be of great value.

[Source: https://www.uplabs.com/posts/login-android-app/]

Answer Source

A bit update from Ferdous Ahamed's answer. you need to make your image circular.

just add this to your gradle

compile 'de.hdodenhof:circleimageview:2.1.0'

then in your xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f36121">


    <RelativeLayout
        android:id="@+id/card_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_centerInParent="true">

        <android.support.v7.widget.CardView
            android:id="@+id/card_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:foreground="?android:attr/selectableItemBackground"
            card_view:cardBackgroundColor="#ffffff"
            card_view:cardCornerRadius="4dp"
            card_view:cardElevation="0dp"
            card_view:cardUseCompatPadding="false" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_marginTop="50dp"
                android:padding="24dp">

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Login"/>

                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:hint="Password"
                    android:inputType="textPassword"/>

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:text="Sign In"
                    android:background="@android:color/holo_blue_dark"/>

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


        <de.hdodenhof.circleimageview.CircleImageView
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/profile_image"
            android:layout_width="96dp"
            android:layout_height="96dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/me"
            app:civ_border_width="10dp"
            app:civ_border_color="#f36121"/>

    </RelativeLayout>
</RelativeLayout>

all you need to do is use same color. in your parent background and in your imageview use same color for border.

app:civ_border_color="#f36121"

OUTPUT
enter image description here

Github : https://github.com/adityasd/LoginDemo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download