Как сделать макет с цветной полосой позади текста и изображений

Question

Im пытается создать этот макет (извините за качество, это все, что у меня есть):

До сих пор я построил этот

<?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="wrap_content" 
    android:padding="12dp"> 
    <ImageView xmlns:tools="http://schemas.android.com/tools" 
     android:layout_width="48dp" 
     android:layout_height="48dp" 
     android:id="@+id/UserPhotoImageView" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentLeft="true" 
     android:layout_marginRight="16dp" /> 
    <TextView 
     android:text="UserName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textStyle="normal" 
     android:typeface="normal" 
     android:textSize="16dp" 
     android:layout_toRightOf="@+id/UserPhotoImageView" 
     android:layout_alignTop="@+id/CalendarImageView" 
     android:id="@+id/UserNameTextView" 
     android:textColor="#333333" /> 
    <TextView 
     android:text="Date" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:typeface="normal" 
     android:textSize="12dp" 
     android:id="@+id/DateTextView" 
     android:gravity="top" 
     android:layout_toLeftOf="@+id/CalendarImageView" 
     android:layout_alignTop="@+id/CalendarImageView" /> 
    <ImageView 
     android:layout_width="16dp" 
     android:layout_height="16dp" 
     android:gravity="top" 
     android:id="@+id/CalendarImageView" 
     android:layout_alignParentRight="true" 
     android:layout_marginLeft="6dp" 
     android:src="@drawable/ic_calendar_icon" 
     android:backgroundTint="#ffffffff" /> 
    <TextView 
     android:text="Comment" 
     android:layout_below="@+id/UserNameTextView" 
     android:layout_alignLeft="@+id/UserNameTextView" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:typeface="normal" 
     android:textSize="14dp" 
     android:id="@+id/UserCommentTextView" /> 
</RelativeLayout> 

Который дал мне первую часть, как я хочу для того чтобы достигнуть этого:

Теперь для последней строки, я знаю, как сделать округлое изображение, но как я могу поместить изображение и текст за цветную полосой ?

Answer 1

Итак, я понимаю, что вы хотите нарисовать эту пурпуровую толстую линию и надеть на нее изображение. Самый простой способ, который я обычно делаю для перекрытия двух или более макетов/представлений, это: позволяет сказать, что у нас есть 3 вида (вид 1, вид 2 и вид 3). Если вы разместите их в этом порядке (1,2,3) в относительной компоновке и установите их в том же положении в макете, результатом будет то, что вид 3 будет поверх других 2.

So как вывод, если вы хотите перекрывать два или более видов, просто поместите вид, который хотите видеть сверху (изображение в вашем случае), перед видом, который вы хотите перекрывать (фиолетовая линия)

Answer 2

Оберните обоими в a FrameLayout.

Я догадался об измерениях, но это должно привести вас в стадион.

 <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/UserCommentTextView"> 

      <TextView 
       android:id="@+id/name" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical" 
       android:paddingTop="8dp" 
       android:paddingBottom="8dp" 
       android:paddingRight="96dp" 
       android:gravity="right|end" 
       android:background="@color/purple" 
       tools:text="Name"/> 

      <!-- replace with whatever component you are using for circle image view --> 
      <CircleImageView 
       android:id="@+id/circle_image_view" 
       android:layout_width="64dp" 
       android:layout_height="64dp" 
       android:layout_gravity="right|end" 
       android:layout_marginRight="16dp" 
       android:background="@color/purple" 
       tools:src="@drawable/gwynneth"/> 

     </FrameLayout> 

---

EDIT

В качестве альтернативы, если вы хотите, чтобы устранить FrameLayout, вы могли бы объединить эти два вида прямо в RelativeLayout с этими изменениями:

• Для позиционирования, Я бы пошел с android:layout_alignParentTop="true", а затем верхний край, чтобы подтолкнуть взгляды ниже других ваших взглядов. У вас небольшая проблема в том, что вы хотите, чтобы они были ниже как изображения пользователя, так и текста комментария, но поскольку текст комментария может расширяться, так что нижняя часть ниже изображения, трудно сказать, на какой вид вы должны закрепить. Возможно, вы захотите установить maxHeight на комментарий, чтобы он не становился слишком большим.

• Поскольку у вас нет FrameLayout, чтобы больше по центру, вам нужно будет дать TextView полный размер, чтобы выстроить его по кругу с изображением круга. Если все в порядке с этим, вы можете просто положить их прямо в вашем RelativeLayout затем установить их верхние поля, чтобы они правильно выравнивать:

   <TextView 
        android:id="@+id/name" 
        android:layout_width="match_parent" 
        android:layout_height="32dp" 
        android:layout_alignParentTop="true" 
        android:layout_marginTop="80dp" 
        android:paddingTop="8dp" 
        android:paddingBottom="8dp" 
        android:paddingRight="96dp" 
        android:paddingEnd="96dp" 
        android:gravity="right|end" 
        android:background="@color/purple" 
        tools:text="Name"/> 
  
       <!-- replace with whatever component you are using for circle image view --> 
       <CircleImageView 
        android:id="@+id/circle_image_view" 
        android:layout_width="64dp" 
        android:layout_height="64dp" 
        android:layout_alignParentTop="true" 
        android:layout_alignParentRight="true" 
        android:layout_alignParentEnd="true" 
        android:layout_marginTop="64dp" 
        android:layout_marginRight="16dp" 
        android:layout_marginEnd="16dp" 
        android:background="@color/purple" 
        tools:src="@drawable/gwynneth"/> 
  

Answer 3

Я хотел бы создать RelativeLayout для этой части (круг с изображением цветной бар и текст)

Вы можете добавить View (может быть ImageView) в этом относительном расположении, чтобы показать за вашим изображением. и дайте ему фон с цветом по вашему выбору.

Пример:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> <!--change here to what you need--> 

    <!--your colored bar--> 

    <View 
     android:layout_width="match_parent" 
     android:layout_height="30dp" <!--control the thickness of your bar--> 
     android:layout_centerVertical="true" 
     android:background="#3333aa" /> 

    <!--face image--> 

    <ImageView 
     android:id="@+id/imageFace" 
     android:layout_width="70dp" 
     android:layout_height="70dp" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:layout_marginRight="15dp" 
     android:background="@color/#2323ea" /> 

    <!--text view--> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerVertical="true" 
     android:layout_marginRight="15dp" 
     android:layout_toLeftOf="@id/imageFace" 
     android:text="name" /> 
</RelativeLayout> 

добавить свои собственные настройки, но это общий пример