How to make the Borders of a custom button in android

895 views Asked by At

I want to achieve something like this :

See two Buttons at the bottom

I want to make the button transparent Which I have successfully done, now tell me how can I show the line on the upper border of the button and between the two button. How can I handle this. my xml of button is simply goes like this

<LinearLayout
        android:id="@+id/buttons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:weightSum="2">
            <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text=" Send Message"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:textColor="#ff4444"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Cancel"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:textColor="#ff4444"/>
    </LinearLayout>

So How can I achieve the borders like this as shown in picture below. pardon me , for the small size picture as I have this only single image to clear my question .

1

There are 1 answers

8
narancs On BEST ANSWER

If you would like to add separator line, please add this:

<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="@android:color/darker_gray"/>

I would use realitveLayout instad of LinearLayout, so you can set the position of the separators more quickly. You are going to have 2 separators, one is the horizontal, with layout_width="match_parent" and one between the elements.

Android draw a Horizontal line between views

Android Drawing Separator/Divider Line in Layout?

You can define your own shape and add to the Button, as background: use it as R.drawable.myshape:

place it to res/drawable/myshape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient android:startColor="#FFFEEE" 
    android:endColor="#00FFFF"
    android:angle="270" />
  <corners android:radius="5dp" />
  <stroke android:width="7px" android:color="#EE0FF0" />
</shape>

if you would like to be transparent as well, try this:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="1.4"
android:useLevel="false" >
<solid android:color="@android:color/transparent" />

<stroke
    android:width="4dp"
    android:color="@android:color/darker_gray" />
 </shape>