¿Cómo crear un diseño doblado personalizado con imageview y texto android?

Hola estoy creando la aplicación de chat en el que tengo que crear con forma curva ImageView con el texto. No sé cómo mencionar la forma del diseño. He adjuntado captura de pantalla cómo el requisito necesita.

Introduzca aquí la descripción de la imagen

Lo que intenté:

 <LinearLayout android:id="@+id/left_chat" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="top|left" android:orientation="horizontal" android:padding="10dp" android:visibility="visible" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" > <ImageView android:id="@+id/left_chat_img" android:layout_width="60dp" android:layout_height="60dp" android:layout_gravity="center" android:background="@android:color/transparent" android:contentDescription="@string/text_image_description" android:scaleType="fitXY" android:src="@drawable/user_profile_image" /> <TextView android:id="@+id/chat_receiver_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="2dp" android:gravity="center" android:maxLength="10" android:textColor="@color/color_common_black" android:textSize="13sp" app:font_name="@string/font_roboto_light" /> </LinearLayout> <LinearLayout android:id="@+id/view_chat_left_item" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:background="@drawable/chat_tab_expert" android:gravity="center_vertical" android:orientation="vertical" android:paddingBottom="5dp" android:paddingLeft="10dp" android:paddingRight="5dp" android:paddingTop="5dp" > <TextView android:id="@+id/txt_left_chat_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" android:gravity="top" android:textColor="@color/color_common_black" android:textSize="15sp" app:font_name="@string/font_roboto_regular" /> <TextView android:id="@+id/txt_chat_time_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginLeft="5dp" android:gravity="top" android:textColor="@color/color_common_black" android:textSize="13sp" app:font_name="@string/font_roboto_regular" /> </LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/view_right_chat" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:gravity="top|right|" android:orientation="horizontal" android:padding="10dp" android:visibility="visible" > <LinearLayout android:id="@+id/view_chat_right_item" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:background="@drawable/shape_chat_cus_bg" android:gravity="top" android:minHeight="50dp" android:minWidth="180dp" android:orientation="vertical" android:paddingBottom="5dp" android:paddingLeft="5dp" android:paddingRight="10dp" android:paddingTop="5dp" > <TextView android:id="@+id/txt_right_chat_msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" android:gravity="top" android:textColor="@color/color_white" android:textSize="15sp" app:font_name="@string/font_roboto_regular" /> <LinearLayout android:id="@+id/view_right_icons" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:layout_marginTop="5dp" android:gravity="center" android:orientation="horizontal" > <ImageView android:id="@+id/img_msg_status_right" android:layout_width="15dp" android:layout_height="13dp" android:contentDescription="@string/text_image_description" android:scaleType="fitXY" android:src="@drawable/ic_scene" /> <TextView android:id="@+id/txt_chat_time_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:gravity="top" android:textColor="@color/color_white" android:textSize="13sp" app:font_name="@string/font_roboto_regular" /> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/img_chat_customer" android:layout_width="13dp" android:layout_height="13dp" android:layout_marginTop="15dp" android:background="@android:color/transparent" android:contentDescription="@string/text_image_description" android:scaleType="fitXY" android:src="@drawable/ic_arrow" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:gravity="center" android:orientation="vertical" > <com.views.CircularImageView android:id="@+id/view_right_chat_img" android:layout_width="60dp" android:layout_height="60dp" android:layout_gravity="top" android:background="@android:color/transparent" android:contentDescription="@string/text_image_description" android:scaleType="fitXY" android:src="@drawable/user_profile_image" android:visibility="visible" /> <TextView android:id="@+id/txt_chat_sender_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="2dp" android:gravity="center" android:maxLength="10" android:textColor="@color/color_common_black" android:textSize="13sp" app:font_name="@string/font_roboto_light" /> </LinearLayout> </LinearLayout> 

Aquí está la captura de pantalla lo que intenté que no podía lograr el diseño deseado.

Puse con ImageView redondeado pero no pude conseguir cómo utilizar tal tipo de diseño para traer en androide.

Por favor sugerirme cómo crear tal diseño. Gracias.

2ndImage

One Solution collect form web for “¿Cómo crear un diseño doblado personalizado con imageview y texto android?”

Introduzca aquí la descripción de la imagen

Tenemos que usar el fondo de encargo y la imagen de encargo del círculo.

Arriba Textveil backgyound: top_text_bg.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="@android:color/holo_blue_bright" /> <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="10dp" /> </shape> 

Fondo del texto del mensaje: msg_text_bg.xml

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="@color/list_row_bg" /> <corners android:radius="@dimen/dimen_10" /> </shape> 

Actividad principal: test.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.tunedinn.android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="@dimen/dimen_5" android:background="@android:color/darker_gray" android:paddingBottom="2dp" > <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" > <RelativeLayout android:id="@+id/rl" android:layout_width="match_parent" android:layout_height="90dp" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_below="@+id/t1" android:layout_marginLeft="2dp" android:background="@drawable/msg_text_bg" android:paddingBottom="10dp" > <TextView android:id="@+id/t3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:gravity="right" android:text="10 March,2015" /> <TextView android:id="@+id/t2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_marginLeft="80dp" android:gravity="left" android:text="hello how are you " /> </RelativeLayout> <TextView android:id="@+id/t1" android:layout_width="150dp" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="41dp" android:background="@drawable/top_text_bg" android:gravity="right" android:padding="4dp" android:text="Julein Renvoye " /> <com.tunedinn.android.view.CircularImageView android:id="@+id/fragment_profile_imageview_profile_picture" android:layout_width="80dp" android:layout_height="80dp" android:layout_alignParentTop="true" android:scaleType="fitXY" android:src="@drawable/andi" app:border="true" app:border_color="@android:color/holo_blue_bright" app:border_width="2dp" app:shadow="true" /> </RelativeLayout> </RelativeLayout> 

Círculo Imagen vista:

  package com.tunedinn.android.view; import android.annotation.SuppressLint; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Shader; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.util.AttributeSet; import android.widget.ImageView; import com.tunedinn.android.R; @SuppressLint("NewApi") public class CircularImageView extends ImageView { private int borderWidth; private int canvasSize; private Bitmap image; private Paint paint; private Paint paintBorder; public CircularImageView(final Context context) { this(context, null); } public CircularImageView(Context context, AttributeSet attrs) { this(context, attrs, R.attr.circularImageViewStyle); } public CircularImageView(Context context, AttributeSet attrs, int defStyle) super(context, attrs, defStyle); // init paint paint = new Paint(); paint.setAntiAlias(true); paintBorder = new Paint(); paintBorder.setAntiAlias(true); paintBorder.setStyle(Style.STROKE.STROKE); // load the styled attributes and set their properties TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0); if (attributes.getBoolean(R.styleable.CircularImageView_border, true)) { int defaultBorderSize = (int) (4 * getContext().getResources() .getDisplayMetrics().density + 0.5f); setBorderWidth(attributes.getDimensionPixelOffset( R.styleable.CircularImageView_border_width, defaultBorderSize)); setBorderColor(attributes.getColor( R.styleable.CircularImageView_border_color, Color.WHITE)); } if (attributes.getBoolean(R.styleable.CircularImageView_shadow, false)) addShadow(); } public void setBorderWidth(int borderWidth) { paintBorder.setStrokeWidth(borderWidth); this.borderWidth = borderWidth; this.requestLayout(); this.invalidate(); } public void setBorderColor(int borderColor) { if (paintBorder != null) paintBorder.setColor(borderColor); this.invalidate(); } public void addShadow() { setLayerType(LAYER_TYPE_SOFTWARE, paintBorder); } @Override public void onDraw(Canvas canvas) { // load the bitmap image = drawableToBitmap(getDrawable()); // init shader if (image != null) { canvasSize = canvas.getWidth(); if (canvas.getHeight() < canvasSize) canvasSize = canvas.getHeight(); BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap( image, canvasSize, canvasSize, false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint.setShader(shader); // circleCenter is the x or y of the view's center // radius is the radius in pixels of the cirle to be drawn // paint contains the shader that will texture the shape int circleCenter = (canvasSize - (borderWidth * 2)) / 2; canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) + borderWidth - 4.0f, paintBorder); canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) - 4.0f, paint); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = measureWidth(widthMeasureSpec); int height = measureHeight(heightMeasureSpec); setMeasuredDimension(width, height); } private int measureWidth(int measureSpec) { int result = 0; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) { // The parent has determined an exact size for the child. result = specSize; } else if (specMode == MeasureSpec.AT_MOST) { // The child can be as large as it wants up to the specified size. result = specSize; } else { // The parent has not imposed any constraint on the child. result = canvasSize; } return result; } private int measureHeight(int measureSpecHeight) { int result = 0; int specMode = MeasureSpec.getMode(measureSpecHeight); int specSize = MeasureSpec.getSize(measureSpecHeight); if (specMode == MeasureSpec.EXACTLY) { // We were told how big to be result = specSize; } else if (specMode == MeasureSpec.AT_MOST) { // The child can be as large as it wants up to the specified size. result = specSize; } else { // Measure the text (beware: ascent is a negative number) result = canvasSize; } return (result + 2); } public Bitmap drawableToBitmap(Drawable drawable) { if (drawable == null) { return null; } else if (drawable instanceof BitmapDrawable) { return ((BitmapDrawable) drawable).getBitmap(); } Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); drawable.draw(canvas); return bitmap; } } 
  • ¿Dónde defino mi OnClickListener para cerrar una vista de diálogo personalizada en Android?
  • Símbolo exclamatorio desconocido en el archivo xml
  • Cómo personalizar el ancho y la altura cuando se muestra una actividad como un cuadro de diálogo
  • Barra de herramientas que se superpone debajo de la barra de estado
  • FragmentTabHost Scrollview Horizontal + Paseo Android
  • ¿Cómo puedo incluir programaticamente en Android?
  • Cómo bloquear el micrófono para utilizar otra aplicación?
  • Cómo convertir Vista a Bitmap en android?
  • GridView del estilo de Google Play Música
  • ¿Por qué mis elementos de ListView no se pueden hacer clic?
  • ListFragment vs ListActivity - ¿Cuál usar?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.