Androidでこのようなレイアウトを作る方法は？

Question

私はAndroidでこのようなレイアウトを作る方法を知りたいと思います。私は、水平方向のLinearLayoutを使用し、2つの線形レイアウトを置くことができます。最初の1つは赤のもの、もう1つは白いものです.2つの重さとそれらの中にいくつかのテキストビューを入れますしかし、私の主な質問は：どのように私はこの小さな赤い三角形が表示されるように、xmlのコードを置くことができます、それがないので、このレイアウトを作るのは簡単ですが、私はどのようにこのような幾何学的形状をレイアウトに入れてください。あなたに私にいくつかの提案を教えてください。あなたがしたくない場合は、コードを置く必要はありません、アイデアは十分です:)ありがとうございます。

Answer 1

私はConstraintLayoutを使用します。一般的に、これは、これらのような複雑なレイアウトに最適です。以下は、このレイアウトを再現する私の試みです。私は完璧な色や書体で悩まされていませんが、一般的な構造はそこにあります。

レイアウトXML

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="150dp" 
    android:layout_margin="12dp" 
    android:padding="1dp" 
    android:background="#f00"> 

    <android.support.constraint.ConstraintLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#fff"> 

     <FrameLayout 
      android:id="@+id/redBg" 
      android:layout_width="120dp" 
      android:layout_height="0dp" 
      android:background="#f00" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent"/> 

     <FrameLayout 
      android:id="@+id/caret" 
      android:layout_width="12dp" 
      android:layout_height="40dp" 
      android:background="@drawable/caret" 
      app:layout_constraintTop_toTopOf="parent" 
      app:layout_constraintLeft_toRightOf="@+id/redBg" 
      app:layout_constraintBottom_toBottomOf="parent"/> 

     <android.support.constraint.Guideline 
      android:id="@+id/guideline" 
      android:layout_width="0dp" 
      android:layout_height="0dp" 
      android:orientation="horizontal" 
      app:layout_constraintGuide_percent="0.5"/> 

     <TextView 
      android:id="@+id/subtitle" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textColor="#fff" 
      android:textSize="12sp" 
      app:layout_constraintLeft_toLeftOf="@+id/redBg" 
      app:layout_constraintRight_toRightOf="@+id/redBg" 
      app:layout_constraintBottom_toTopOf="@+id/guideline" 
      tools:text="26/04/2017"/> 

     <TextView 
      android:id="@+id/title" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textColor="#fff" 
      android:textSize="16sp" 
      app:layout_constraintLeft_toLeftOf="@+id/redBg" 
      app:layout_constraintRight_toRightOf="@+id/redBg" 
      app:layout_constraintBottom_toTopOf="@+id/subtitle" 
      tools:text="Amanha"/> 

     <TextView 
      android:id="@+id/description" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="12dp" 
      android:layout_marginStart="12dp" 
      android:textColor="#f00" 
      android:textSize="12sp" 
      app:layout_constraintLeft_toRightOf="@+id/caret" 
      app:layout_constraintBottom_toTopOf="@+id/guideline" 
      tools:text="1 Mililitro"/> 

     <TextView 
      android:id="@+id/name" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="12dp" 
      android:layout_marginStart="12dp" 
      android:textColor="#f00" 
      android:textSize="16sp" 
      app:layout_constraintLeft_toRightOf="@+id/caret" 
      app:layout_constraintBottom_toTopOf="@+id/description" 
      tools:text="Amoxilina"/> 

     <ImageView 
      android:layout_width="24dp" 
      android:layout_height="24dp" 
      android:layout_marginRight="16dp" 
      android:src="@drawable/oval" 
      app:layout_constraintBottom_toTopOf="@+id/guideline" 
      app:layout_constraintRight_toRightOf="parent"/> 

     <TextView 
      android:id="@+id/time" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="4dp" 
      android:textColor="#f00" 
      android:textSize="16sp" 
      app:layout_constraintLeft_toRightOf="@+id/caret" 
      app:layout_constraintBottom_toBottomOf="parent" 
      tools:text="08:00"/> 

     <TextView 
      android:id="@+id/details" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginRight="8dp" 
      android:layout_marginBottom="4dp" 
      android:textColor="#f00" 
      android:textSize="16sp" 
      app:layout_constraintRight_toRightOf="parent" 
      app:layout_constraintBottom_toBottomOf="parent" 
      tools:text="+detalhes"/> 

    </android.support.constraint.ConstraintLayout> 

</FrameLayout> 

キャレットベクトル

<vector 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="24dp" 
    android:height="24dp" 
    android:viewportWidth="24.0" 
    android:viewportHeight="24.0"> 
    <path 
     android:fillColor="#FFff0000" 
     android:pathData="M0 0L24 12L0 24z"/> 
</vector> 

スクリーン