CODEWITHSUNDEEP
androidandroid-layoutandroid-studioandroid-canvas
Tom Wayne
Tom Wayne

Reputation: 1368

How to create layout with two colors divided by curved line on Android

I have to create layout which looks exactly like this picture:

enter image description here

It not a problem to create circular avatar but I have no idea how to create background which would be split to two parts by curved line. I found some similiar answers how to draw for example white background and black line, but thats not exactly what I am looking for. As you can see in the picture, I need the whole bottom part to have the same color as that "divider" line basically.

Upvotes: 0

Views: 1193

Answers (1)

Ikazuchi
Ikazuchi

Reputation: 443

It will be something like this:

<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">


    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/cool_grey"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/center_of_profile_picture"
        android:src="@drawable/white_circle"
        android:scaleType="centerInside"
        />

    <view
        android:id="@+id/center_of_profile_picture"
        android:layout_width="1dp"
        android:layout_height="1dp"
        app:layout_constraintBottom_toBottomOf="@+id/profile_picture"
        app:layout_constraintEnd_toEndOf="@+id/profile_picture"
        app:layout_constraintStart_toStartOf="@+id/profile_picture"
        app:layout_constraintTop_toTopOf="@+id/profile_picture" />


    <ImageView
        android:id="@+id/profile_picture"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Where white_circle drawable looks like (from https://stackoverflow.com/a/48284045):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"/>
    </item>
    <item
        android:bottom="0dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

result

There will be still some things to improve, but i think its good base to start.

Upvotes: 1

Related Questions