Search code examples
androidxmllayoutdivider

how to show horizontal and vertical gradient divider line?


enter image description here

I am little good at coding but when it comes to designing part in android, I always cannot make it out. gradient color works at vertical but not in horizontal. Can anyone suggest me how to get those divider on horizontal line to whole item like in vertical?

my divider.xml

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

<gradient
    android:angle="0"
    android:endColor="@android:color/white"
    android:centerColor="#000"
    android:startColor="@android:color/white"
    android:type="linear" />

</shape>

design.xml

    <?xml version="1.0" encoding="utf-8"?>
   <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:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   tools:context="com.thebrogrammers.design.MainActivity"
   tools:showIn="@layout/app_bar_main"
   android:background="@color/grey">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:clickable="true"
    android:focusable="true"
    android:elevation="4dp"
    >

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

        <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        >


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


            <ImageView
                android:id="@+id/image1"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:src="@mipmap/ic_launcher"

                />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Apply For Icard"
                android:layout_marginBottom="15dp"
                android:id="@+id/textView15"
                android:textColor="@color/colorPrimaryDark"
                android:textAlignment="center"
                android:textStyle="bold"
                />

        </LinearLayout>

            <ImageView
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:src="@drawable/divider2"/>
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1"
            >


                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="5dp"
                    android:textAppearance="?
                    android:attr/textAppearanceSmall"
                    android:text="Apply For Icard"
                    android:layout_marginBottom="15dp"
                    android:id="@+id/textView15"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    />

            </LinearLayout>




        </LinearLayout>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:src="@drawable/divider"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="1">


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


                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="5dp"
                    android:textAppearance="?
                    android:attr/textAppearanceSmall"
                    android:text="Apply For Icard"
                    android:layout_marginBottom="10dp"
                    android:id="@+id/textView15"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    />

            </LinearLayout>

            <ImageView
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:src="@drawable/divider2"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1">


                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="5dp"
                    android:textAppearance="?
                    android:attr/textAppearanceSmall"
                    android:text="Apply For Icard"
                    android:layout_marginBottom="10dp"
                    android:id="@+id/textView15"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    />

            </LinearLayout>

        </LinearLayout>


      </LinearLayout>

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

 </RelativeLayout>

Solution

  • What about using line instead ? :

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    
    
    <item android:top="-5dp" android:right="-5dp" android:left="-5dp">
        <shape>
            <stroke android:color="@android:color/transparent" />
            <stroke
                android:width=".8dp"
                android:color="@color/black" />
    
        </shape>
    
    </item>
    

    the above divider for vertical one, and this for horizontal one :

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    
    
        <item android:top="-5dp" android:bottom="-5dp" android:left="-5dp">
            <shape>
                <stroke android:color="@android:color/transparent" />
                <stroke
                    android:width=".8dp"
                    android:color="@color/company_color" />
    
            </shape>
    
        </item>
    
    </layer-list>
    

    try with your own width.

    OR remove this line from your current divider android:centerColor="#000"