CODEWITHSUNDEEP
android
user6313669
user6313669

Reputation: 365

I want to make border like attached image

screen 3rd

I want to make border like attached image in my app. Please help me for same. original screen is as same as a code below. I want to make as first screen image . Tell me changes in xml . How to make a border like a scereen image?

customborder.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="2dp"
                android:color="#009bdb" />

            <solid android:color="#00FFFFFF" />

            <padding android:left="0dp"
                android:right="0dp"
                android:top="2dp"
                android:bottom="0dp" />
        </shape>
    </item>
    </layer-list>





<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/customborder"
    android:layout_margin="10dp"
   >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"

        android:orientation="horizontal"
        android:background="#cbe5f8"
        android:padding="5dip"
        >
    <TextView
        android:id="@+id/textView1"
        android:text="Order Id:"
        android:textColor="@color/textcolor"/>
        <TextView
            android:id="@+id/textView2"
            android:text="Placed Date:"
            android:gravity="right"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="15dip"></TextView>

    </TableRow>
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:padding="5dip"
        android:orientation="vertical"
        android:background="@drawable/bdr_top_bottom"
       >
    <TextView
        android:id="@+id/textView3"
        android:text="Address:" />

    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:padding="5dip"
        android:orientation="vertical"
        android:background="@drawable/bdr_top_bottom">
        <TextView
            android:id="@+id/textView4"
            android:text="Placed Order:" />
        <TextView
            android:id="@+id/placedorder"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1"
            />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:padding="5dip"
        android:orientation="vertical"
        android:background="@drawable/bdr_top_bottom">
        <TextView
            android:id="@+id/textView5"
            android:text="Service Opted: " />
        <TextView
            android:id="@+id/serviceopted"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1"
            />
    </TableRow>
    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:padding="5dip"
        android:orientation="vertical"
        android:background="@drawable/bdr_top_bottom">
        <TextView
            android:id="@+id/textView6"
            android:text="Order Status:" />
        <TextView
            android:id="@+id/orderstatus"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1"
            />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:padding="5dip"
        android:orientation="vertical"
        android:background="@drawable/bdr_top_bottom">
        <TextView
            android:id="@+id/textView7"
            android:text="Time Slot:" />
        <TextView
            android:id="@+id/timeslot"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1"
            />
    </TableRow>
    <TableRow
        android:id="@+id/tableRow7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:padding="5dip"
        android:orientation="vertical"
        android:background="@drawable/bdr_top_bottom">
        <TextView
            android:id="@+id/textView8"
            android:text="Contact Number:" />
        <TextView
            android:id="@+id/contactno"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:text="8556023080"
            android:layout_weight="1"
            />
    </TableRow>
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:padding="6dp"
        android:weightSum="2">
    <Button
        android:id="@+id/repeat"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginTop="20dp"
        android:text="Repeat Order"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginBottom="20dp"
        android:textSize="20dp"
        android:background="#009bdb"
        android:textColor="#FFFFFF"
        android:layout_weight="1"/>
    </LinearLayout>
</TableLayout>

Upvotes: 0

Views: 87

Answers (2)

Abhishek Patel
Abhishek Patel

Reputation: 4328

Add this xml in your drawable folder

bdr_top.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="-2dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="2dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="2dp"
            android:color="#009bdb" />

        <solid android:color="#00FFFFFF" />

        <padding android:left="0dp"
            android:right="0dp"
            android:top="0dp"
            android:bottom="0dp" />
    </shape>
</item>

</layer-list>

bdr_top_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="-1dp"
    android:left="-1dp"
    android:right="-1dp"
    android:top="1dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1dp"
            android:color="#7e7e7e" />

        <solid android:color="#00FFFFFF" />

        <padding android:left="0dp"
            android:right="0dp"
            android:top="0dp"
            android:bottom="0dp" />
    </shape>
</item>

</layer-list>

bdr_all.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp"
    android:top="1dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1dp"
            android:color="#7e7e7e" />

        <solid android:color="#00FFFFFF" />

        <padding android:left="0dp"
            android:right="0dp"
            android:top="0dp"
            android:bottom="0dp" />
    </shape>
</item>

</layer-list>

Your xml replace with it

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/llParent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bdr_top"
android:layout_marginTop="10dp"
android:orientation="vertical"
android:padding="10dip">

<TableLayout
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/bdr_all">


    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#7e7e7e"
        android:orientation="horizontal"
        android:padding="10dip">

        <TextView
            android:id="@+id/textView1"
            android:text="Order Id:" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="right"
            android:padding="5dip"
            android:text="Placed Date:"></TextView>

    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/bdr_top_bottom"
        android:orientation="vertical"
        android:padding="10dip">

        <TextView
            android:id="@+id/textView3"
            android:text="Address:" />

    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/bdr_top_bottom"
        android:orientation="vertical"
        android:padding="10dip">

        <TextView
            android:id="@+id/textView4"
            android:text="Placed Order:" />

        <TextView
            android:id="@+id/placedorder"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/bdr_top_bottom"
        android:orientation="vertical"
        android:padding="10dip">

        <TextView
            android:id="@+id/textView5"
            android:text="Service Opted: " />

        <TextView
            android:id="@+id/serviceopted"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/bdr_top_bottom"
        android:orientation="vertical"
        android:padding="10dip">

        <TextView
            android:id="@+id/textView6"
            android:text="Order Status:" />

        <TextView
            android:id="@+id/orderstatus"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:background="@drawable/bdr_top_bottom"
        android:orientation="vertical"
        android:padding="10dip">

        <TextView
            android:id="@+id/textView7"
            android:text="Time Slot:" />

        <TextView
            android:id="@+id/timeslot"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bdr_top_bottom"
        android:orientation="vertical"
        android:padding="10dip">

        <TextView
            android:id="@+id/textView8"
            android:text="Contact Number:" />

        <TextView
            android:id="@+id/contactno"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dip"
            android:layout_marginRight="20dip"
            android:layout_weight="1"
            android:text="8556023080" />
    </TableRow>


</TableLayout>

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="6dp"
    android:weightSum="2">

    <Button
        android:id="@+id/repeat"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:layout_weight="1"
        android:background="#009bdb"
        android:text="Repeat Order"
        android:textColor="#FFFFFF"
        android:textSize="20dp" />
</LinearLayout>

enter image description here

Upvotes: 1

Sharad Chauhan
Sharad Chauhan

Reputation: 4891

And to make rounded corner for your button use this code.

round_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_pressed="true" >
     <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />            
     </shape>
 </item>
<item android:state_focused="true">
     <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <solid android:color="#58857e"/>       
     </shape>
 </item>  
<item >
    <shape android:shape="rectangle"  >
         <corners android:radius="3dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />            
     </shape>
 </item>
</selector>

Now use it like this :

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#ffffff"
    android:background="@drawable/round_corner"
    android:text="Buttons" />

Upvotes: 0

Related Questions