Textview is out of Relativelayout (with rounded edges)

Asked

Viewed 384 times

0

I’m trying to make the items on my list look like figure 2, but they only look like figure 1. I did a lot of research on it, but I found very little about it (I don’t really know what to search for).

inserir a descrição da imagem aqui

Follow my XML file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:id="@+id/lista_linhas"
    android:padding="5dp">

    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@drawable/border_radius"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:id="@+id/teste"
        android:layout_centerInParent="true"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:padding="0dp"
        android:id="@+id/circulo">

        <TextView
            android:layout_width="5dp"
            android:layout_height="48dp"
            android:layout_margin="0dp"
            android:padding="0dp"
            android:layout_alignParentLeft="true"
            android:id="@+id/cor_esquerda" />

        <TextView
            android:layout_width="38dp"
            android:layout_height="48dp"
            android:layout_margin="0dp"
            android:padding="0dp"
            android:gravity="center"
            android:textAlignment="center"
            android:layout_centerInParent="true"
            android:textColor="@color/preto"
            android:id="@+id/numero" />

        <TextView
            android:layout_width="5dp"
            android:layout_height="48dp"
            android:layout_margin="0dp"
            android:padding="0dp"
            android:layout_alignParentRight="true"
            android:id="@+id/cor_direita" />

    </RelativeLayout>

</RelativeLayout>

border-Radius.xml

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

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

    <padding
        android:left="1dp"
        android:right="1dp"
        android:top="1dp" />

    <corners android:radius="50dp" />

</shape>
android xml
  • 1

    It could include the border_radius.xml? I would like to test this layout to see how to get it right. It came to think about doing with Canvas?

  • I edited the question and included the xml of the rounded border. I don’t know Canvas, I can do with it?

  • 1

    It depends on the type of interaction that the View will have, because with the Canvas you have access only to the drawing primitives (draw rectangle, square, lines, circles, arcs, write text and etc), it is more difficult to work with click events and etc. If there is no alternative, think you have, the solution is to use Canvas.

  • These drawings work as a kind of icons in a Listview, I will need to work with their click. Using Canvas would make this MUCH more difficult?

  • 1

    If you click on View whole, not in parts, just implement correctly the method onMeasure (where you say the dimensions of View with certain restrictions based on layout_width and layout_height who gave them), have a look at: http://developer.android.com/training/custom-views/index.html, http://www.jayway.com/2012/12/creating-custom-android-views-part-4-measuring-and-how-to-forca-view-to-be-square/ and http://blog.denevell.org/android-custom-viewsonlayout-onmeasure.html.

  • 1

    Sometimes make a Custom View is much more efficient, because to make a simple drawing you had to use 6 Views and it’s not good yet. Imagine in a ListView multi-element?

  • Okay, thank you. I’ll take a look at these links.

  • 1

    If I can solve the problem I put the solution here.

Show 3 more comments

1 answer

1

You can create a custom view:

package br.com.mion.android;

public class MyView extends View {

    private Paint mPaint;
    private Rect mRect;
    private Path mPath;

    public MyView(Context context) {
        this(context, null, 0);
    }

    public MyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLACK);
        mRect = new Rect();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // Define um path "ovalado" do tamanho da View.
        RectF r = new RectF();
        r.set(0, 0, (float) w, (float) h);
        mPath = new Path();
        mPath.addOval(r, Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        // Corta o canvas com o path "ovalado".
        canvas.clipPath(mPath);
        // Pinta o fundo de vermelho.
        canvas.drawColor(Color.RED);

        // Desenha o retângulo vermelho da esquerda.
        mRect.set(0, 0, (int) (getWidth() * .25f), getHeight());
        canvas.drawRect(mRect, mPaint);

        // Desenha o retângulo vermelho da direita.
        mRect.set((int) (getWidth() * .75f), 0, getWidth(), getHeight());
        canvas.drawRect(mRect, mPaint);

    }

};

And use in your layout file like this, for example:

<br.com.mion.android.MyView
    android:layout_width="100dp"
    android:layout_height="100dp" />

  • Hi, André, welcome to the site. Can you explain, even briefly, why your code solves the problem presented? It’s only [Edit] the answer. The [Tour] of the site and the guide [Answer] has more tips.

Browser other questions tagged android xml

You are not signed in. Login or sign up in order to post.