Search code examples
androidbuttondivider

How to make the Borders of a custom button in android


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 .


Solution

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