CODEWITHSUNDEEP
androidxmlandroid-layoutimage-clipping
Adolf Dsilva
Adolf Dsilva

Reputation: 14340

Android layout clipping

I am trying to make a layout as described below. I don't understand how to exactly implement the layout. enter image description here

The layout and the above hexagon will have some text that i need to change dynamically from code.

I have tried a similar way mentioned here

But the hexagon is still clipping. I'm using the following code.

  <RelativeLayout
        android:id="@+id/Llfirstamount"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@color/layoutcolor1"
        android:clickable="true"
        android:clipChildren="false" >

        <TextView
            android:id="@+id/my_first_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:android:layout_alignParentBottom="true"
            android:android:layout_alignParentLeft="true"
            android:padding="15dp"
            android:text="Amount"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/my_second_text"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="-20dp"
            android:background="@drawable/hexagon"
            android:clipToPadding="false"
            android:contentDescription="@string/contentdesc_peso_logo"
            android:gravity="center"
            android:text="x5" />
    </RelativeLayout>

I don't know is this the only way or the right way or there is a much better way to implement this.I'm very confused. Please Help!!! thank you..

EDIT:

Ok thanks for your answers using two text views with custom background is is a good and clean idea. Now I'm using the edited code but the hexagon is clipping like below.. enter image description here

Am i missing something i have also added 

android:clipToPadding="false"

and

android:clipChildren="false"

in my code.

Upvotes: 0

Views: 6612

Answers (3)

Le-roy Staines
Le-roy Staines

Reputation: 2057

Adding android:clipToPadding="false" and android:clipChildren="false" to the top-most layout view will do the trick, if you can bear all sub-views having the same effect.

Upvotes: 0

Vishal Vyas
Vishal Vyas

Reputation: 2581

This will do it..

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:background="#ccc"
        android:gravity="center_vertical"
        android:layout_centerInParent="true"
        android:padding="5dp"
        android:text="@string/hello_world" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView2"
        android:layout_marginLeft="-25dp"
        android:layout_marginBottom="-25dp"
        android:layout_toRightOf="@+id/textView2"
        android:background="@drawable/ic_launcher" />


</RelativeLayout>

OUTPUT: enter image description here

Good Luck :)

Upvotes: 3

Guian
Guian

Reputation: 4688

If you have to change the text from code you probably don't want to use an ImageView.

try with two TextViews (the green one and the hexagonal one which will take your image as background)

<RelativeLayout
        android:id="@+id/Llfirstamount"
        android:layout_width="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_height="wrap_content"
        android:background="@drawable/layout"
        android:clickable="true"
        android:clipChildren="false"
        android:orientation="horizontal" >
        <TextView android:id="@+id/my_first_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:android:layout_alignParentLeft="true"
            android:android:layout_alignParentBottom="true"
        >
        </TextView>
        <TextView android:id="@+id/my_second_text"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:android:layout_alignParentTop="true"
            android:android:layout_alignParentRight="true"
            android:contentDescription="@string/contentdesc_peso_logo"
            android:background="@drawable/hexagon" />
    </RelativeLayout>

Then you can use Activity.findViewById() to get the references on your textviews and change their texts.

Upvotes: 0

Related Questions