1

Hi i am developing an app where i have a custom curve shape which i'm using in an imageview now this shpae is in white color and i have created another similar custom shape in black color so now what i'm trying to do is make the black shape as shadow of white shape as a thin black line acting as a outline to white shape. Now my problem is when i run the app the black shape is getting completely overlapped by white shape. So please f anyone can help me out here My xml code

<android.support.v4.widget.NestedScrollView android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    android:id="@+id/profile_scroll"
    xmlns:android="http://schemas.android.com/apk/res/android" >
<RelativeLayout 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"
    android:orientation="vertical">

    <RelativeLayout
        android:id="@+id/background_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/curved_toolbar"
        >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:src="@drawable/curved_toolbar"
            android:visibility="gone" />
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:layout_marginBottom="20dp"
            android:src="@drawable/profile_black_shadow"/>
        <ImageView
            android:id="@+id/second_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:layout_marginBottom="20dp"
            android:src="@drawable/profile_second_image" />


        <ImageView
            android:id="@+id/pencil_image"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="30dp"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true"
            android:layout_marginTop="25dp"
            android:src="@drawable/pencil" />


    </RelativeLayout>


    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


    </LinearLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circle_image"
        android:layout_width="116dp"
        android:layout_height="120dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="125dp"
        android:layout_marginRight="125dp"
        android:layout_marginTop="113dp"
        android:src="@drawable/heath_ledger"
       />

    <LinearLayout
        android:id="@+id/person_name_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/circle_image"
        android:layout_centerInParent="true"
        >
        <com.ct.listrtrial.Custom.CustomTextViewMedium
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Jhon Doe"
            android:id="@+id/person_name_text"
            android:textColor="@color/White"
            android:textSize="16sp"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/points_layout"
        android:layout_marginBottom="8dp"
        android:layout_below="@+id/person_name_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="6dp">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="20dp">
           <com.ct.listrtrial.Custom.CustomTextViewMedium
               android:id="@+id/first_follow_count"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:text="200"
               android:textColor="@color/White"
               android:layout_marginLeft="13dp"
               android:textSize="15sp"/>
        <com.ct.listrtrial.Custom.CustomTextViewMedium
            android:id="@+id/first_follow_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="13sp"
            android:text="Followers"
            android:textColor="@color/White"
            android:layout_marginTop="5dp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="51dp">
            <com.ct.listrtrial.Custom.CustomTextViewMedium
                android:id="@+id/second_follow_count"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="200"
                android:layout_marginLeft="40dp"
                android:textColor="@color/White"
                android:textSize="15sp"/>
            <com.ct.listrtrial.Custom.CustomTextViewMedium
                android:id="@+id/second_follow_text"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textSize="13sp"
                android:text="Following"
                android:textColor="@color/White"
               android:layout_marginLeft="25dp"
                android:layout_marginTop="5dp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="100dp">
            <com.ct.listrtrial.Custom.CustomTextViewMedium
                android:id="@+id/third_follow_count"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="1.5K"
                android:textColor="@color/White"
                android:textSize="15sp"/>
            <com.ct.listrtrial.Custom.CustomTextViewMedium
                android:id="@+id/third_follow_text"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textSize="13sp"
                android:text="Points"
                android:textColor="@color/White"
                android:layout_marginTop="5dp"/>
        </LinearLayout>
    </LinearLayout>
    <View
        android:id="@+id/divider_view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black"
        android:layout_above="@+id/leaderboard_recycler"/>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/leaderboard_recycler"
        android:layout_below="@+id/points_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    </android.support.v7.widget.RecyclerView>
    <View
        android:id="@+id/divider_view1"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black"
        android:layout_below="@+id/leaderboard_recycler"
        />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>

and my custom white shape

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <size
        android:width="30dp"
        android:height="15dp"/>
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"/>
</shape>

and my black shape

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#000000"/>
    <size
        android:width="18dp"
        android:height="9.1dp"/>
    <corners
        android:bottomLeftRadius="55dp"
        android:bottomRightRadius="55dp"
        />
</shape>
Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
john
  • 140
  • 1
  • 16
  • edit you question to simplify where's the problem exactly (where you call your custom white shape and black shape) and it's preferred to screenshot xml – Mohamed Embaby May 05 '18 at 10:06

1 Answers1

1

Try with this drawable (You can adjust shadow thickness by change padding in shapes),

like:-

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="0px">
        <layer-list>
            <item android:top="4dp">
                <shape android:shape="rectangle">
                    <solid android:color="#08000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="3px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#09000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="2px"/>
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#10000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="2px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#11000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="1px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#12000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="1px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#13000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="1px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#14000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="1px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#15000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="1px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#16000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="1px" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="#17000000"/>
                    <corners
                        android:bottomLeftRadius="180dp"
                        android:bottomRightRadius="180dp" />
                    <size
                        android:width="80dp"
                        android:height="40dp"/>
                    <padding
                        android:bottom="1px" />
                </shape>
            </item>
        </layer-list>
    </item>
    <item >
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
            <corners
                android:bottomLeftRadius="180dp"
                android:bottomRightRadius="180dp" />
            <size
                android:width="80dp"
                android:height="40dp"/>
        </shape>
    </item>
</layer-list>

Set on ImageView like:- 

<ImageView
        android:background="@drawable/shape"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

Result:-

enter image description here

Deven
  • 3,078
  • 1
  • 32
  • 34
  • Hi @Deven thanks for your response but when i use it is showing semi transparent shapes which are quite visible.. – john May 05 '18 at 10:40
  • actually those semi transparent shapes are creating shadow effect for the top white shape, you can adjust this by removing some back layer items as your need. – Deven May 05 '18 at 10:47
  • ok but can you show me how i can get a single thin black line surrounding white shape like an outline – john May 05 '18 at 10:49
  • remove all items from list-layer, keep only two, last and second last, then add padding android:right="1px" android:left="1px" android:top="1px" for the second last item, and change solid color as you want for your outline. – Deven May 05 '18 at 11:06
  • thanks for your answer but is there more lighter balck color because now it showing a very dark and thick black border – john May 05 '18 at 12:21
  • You can make lighter black color by change alpha value from your android studio color picker like this https://stackoverflow.com/a/41865518/1427776 – Deven May 05 '18 at 12:30
  • Deven i can you help me with one problem https://github.com/thunderpunch/LadderLayoutManager/blob/master/gif/horizontal.gif – john May 05 '18 at 13:02
  • Hi @deven i actually need your help with this https://github.com/thunderpunch/LadderLayoutManager/blob/master/gif/horizontal.gif – john May 07 '18 at 03:53
  • actually i'm trying to make same card stack as in this github image and i have implemented as well but i do not know how i can change scrolling direction from right to left please can you help me. – john May 07 '18 at 05:54
  • r you using this library or try to implement own for right direction ? – Deven May 07 '18 at 06:14
  • well i have implementec this library and it is working fine for right direction but i do not know how i can change swipe direction from right to left – john May 07 '18 at 06:15
  • i would be grateful if you can help me out – john May 07 '18 at 06:25