Android layout clipping

Question

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.

score 3 · Accepted Answer · edited Mar 08 '14 at 15:10

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 :)

You can always compare your code with my code ;). I used `android:layout_centerInParent="true"` for my grey `TextView` — Vishal Vyas, Aug 30 '13 at 15:05
Hmmm.. but thats not the problem i guess... if you put the text views in another relative layout then it doesn't work...And i need to have a parent element for the two textviews.. because the desired layout is actually a button... and i have 6 similar buttons in my parent layout — Adolf Dsilva, Aug 30 '13 at 15:09

score 0 · Answer 2 · answered Aug 30 '13 at 14:24

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.

score 0 · Answer 3 · answered Jun 01 '19 at 10:40

0

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.

answered Jun 01 '19 at 10:40

Le-roy Staines

2,037
2
22
40

Android layout clipping

3 Answers3