アンドロイドでこのUIを作成したいです。使用できませんレイアウトの位置とスペース

Question

このUIを作成します。

仕事は私がレイアウトを設定することはできませんよposition.and私は「仕事」UIに応じて項目間のパディングを与えたいです。私は線形レイアウトを使用しています。単純な短い行のソート、フィルター、および心臓のアイコンを描く方法。 View.Iを使っています。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="horizontal"> 

    <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="20dp" 
    android:orientation="vertical"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="drawable/sort" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="SORT" 
     android:textStyle="bold" /> 

    </LinearLayout> 

    <View 
    android:layout_width="0dp" 
    android:layout_height="1dp" 
    android:layout_weight="1" 
    android:background="#706e6e" /> 

    <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="20dp" 
    android:orientation="horizontal"> 

     <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="drawable/filter" /> 

     <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="FILTER" 
     android:textStyle="bold" /> 

     <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/rect_red" 
     android:text="NEW" 
     android:textColor="#FFFFFF" 
     android:textSize="14dp" 
     android:textStyle="bold" /> 


    </LinearLayout> 
    <View 
    android:layout_width="0dp" 
    android:layout_height="1dp" 

    android:layout_weight="1" 
    android:background="#706e6e" /> 
    <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginTop="20dp" 
    android:orientation="horizontal"> 


    <ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="drawable/heart" /> 
    </LinearLayout> 

    </LinearLayout> 

rect_red.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="#ff0000"></solid> 
    <padding 
    android:bottom="10dp" 
    android:left="25dp" 
    android:right="25dp" 
    android:top="10dp"></padding> 
    </shape> 

Answer 1

ここで、ご希望のcsutomレイアウトがあります。これを試してみてください：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <!-- Custom Layout --> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="48dp" 
     android:orientation="horizontal" 
     android:weightSum="5"> 

     <!-- SORT --> 
     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1.8"> 

      <LinearLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:orientation="horizontal" 
       android:layout_centerInParent="true" 
       android:gravity="center_vertical"> 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/sort" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="4dp" 
        android:text="SORT" 
        android:textStyle="bold" 
        android:textColor="#727272"/> 
      </LinearLayout> 
     </RelativeLayout> 

     <View 
      android:layout_width="0.5dp" 
      android:layout_height="match_parent" 
      android:layout_marginTop="4dp" 
      android:layout_marginBottom="4dp" 
      android:background="#706e6e" /> 

     <!-- FILTER --> 
     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="2.2"> 

      <LinearLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:orientation="horizontal" 
       android:layout_centerVertical="true" 
       android:layout_alignParentRight="true" 
       android:layout_marginRight="16dp" 
       android:gravity="center_vertical"> 

       <ImageView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/filter" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="4dp" 
        android:text="FILTER" 
        android:textStyle="bold" 
        android:textColor="#727272" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="16dp" 
        android:paddingLeft="4dp" 
        android:paddingRight="4dp" 
        android:paddingTop="2dp" 
        android:paddingBottom="2dp" 
        android:background="#ff0000" 
        android:text="NEW" 
        android:textColor="#FFFFFF" 
        android:textSize="10sp" 
        android:textStyle="normal" /> 
      </LinearLayout> 
     </RelativeLayout> 

     <View 
      android:layout_width="0.5dp" 
      android:layout_height="match_parent" 
      android:layout_marginTop="4dp" 
      android:layout_marginBottom="4dp" 
      android:background="#706e6e" /> 

     <!-- Favorite --> 
     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerInParent="true" 
       android:src="@drawable/heart" /> 
     </RelativeLayout> 
    </LinearLayout> 

</LinearLayout> 

FYI、あなたのニーズとred背景でrect_red.xmlを使用する必要はありませんあたりとしてicon、text colorとdivider colorを変更することができます。

OUTPUT：

これは、私はあなたが何かする前にアンドロイドのレイアウトについてのチュートリアルに従うことをお勧め〜

Answer 2

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="56dp" 
    android:orientation="horizontal" 
    android:background="#fff" 
    android:gravity="center_vertical" 
    android:weightSum="5" 
    android:padding="16dp"> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 
     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:text="SORT" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 

     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:layout_marginRight="5dp" 
      android:text="FILTER" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:background="@drawable/red_background" 
      android:text="New" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1"> 

     <ImageView 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 


</LinearLayout><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="56dp" 
    android:orientation="horizontal" 
    android:background="#fff" 
    android:gravity="center_vertical" 
    android:weightSum="5" 
    android:padding="16dp"> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 
     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:text="SORT" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center_vertical" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2"> 

     <ImageView 
      android:layout_marginRight="5dp" 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:layout_marginRight="5dp" 
      android:text="FILTER" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 

     <TextView 
      android:background="@drawable/red_background" 
      android:text="New" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 

    <LinearLayout 
     android:gravity="center" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1"> 

     <ImageView 
      android:src="@android:drawable/star_big_on" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </LinearLayout> 


</LinearLayout>