CODEWITHSUNDEEP
android
reiley
reiley

Reputation: 3761

Image border only at top & bottom

I have 3 images.

I want to draw borders around them, show them joint one-after-another, as shown below.

enter image description here

Issue is when I draw border around them using layer-list. The image in center gets 2 borders in left and right side, because of the borders of adjustant side.

How should I modify the layer-list of the center image.

Thank You

Current code (used in all image's layer-list):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <!-- border color -->
            <stroke 
                android:width="0.5dp"
                android:color="@color/application_orange" />

            <!-- background -->
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <!-- top, bottom, left, right used for padding -->
    <item
        android:bottom="10dp"
        android:drawable="@drawable/ic_disk"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
    </item>

</layer-list>

Upvotes: 0

Views: 979

Answers (2)

dipali
dipali

Reputation: 11188

Use this Code:

Main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/common_bg_with_dark_border"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="#e2e2e2" >
        </View>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="#e2e2e2" >
        </View>

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

</RelativeLayout>

common_bg_with_dark_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <stroke
        android:width="2dp"
        android:color="#e2e2e2" />

    <solid android:color="#ffffff" />

</shape>

Upvotes: 1

Autocrab
Autocrab

Reputation: 3757

for center image drawable:

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/application_orange" />
        </shape>
    </item>

    <item android:bottom="10dp" android:top="10dp">
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" />
        </shape>
    </item>

    <item
        android:bottom="10dp"
        android:drawable="@drawable/ic_disk"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
    </item>

</layer-list>

Upvotes: 2

Related Questions