如何在android studio中创建ui？

Question

您好，亲爱的Android开发人员：希望大家都度过一个愉快的周末。我正在开发cv Android应用程序。最近，我在下面遇到了UI屏幕截图，如何在我的布局中实现这样的UI **。

在我实现了UI屏幕截图的XML布局下面

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="250dp"
                android:src="@drawable/education_information" />


            <TextView
                android:id="@+id/education_info"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="@string/education_info" />

        </LinearLayout>

        <TextView
            android:id="@+id/duration"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/text_duration" />


        <TextView
            android:id="@+id/institution"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/text_institution"
            android:textSize="16sp"
            android:textStyle="bold" />


        <TextView
            android:id="@+id/degree"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_marginTop="20dp"
            android:gravity="center"
            android:text="@string/text_degree"
            android:textSize="16sp" />

    </LinearLayout>

下面我的真实设备截图

Answer 1

 *layout  for first image.*


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


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/checkbox_selector"
            android:layout_gravity="center"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Education"
            android:textColor="@color/white"
            android:textSize="20sp" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Education"
        android:textColor="@color/white"
        android:layout_marginStart="12dp"
        android:textSize="14sp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Education"
        android:layout_marginStart="12dp"
        android:textColor="@color/white"
        android:textSize="10sp" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Education"
        android:textColor="@color/white"
        android:layout_marginStart="12dp"
        android:textSize="10sp" />


       </LinearLayout>

  **Layout for second image**
         <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black_heading">
    </Toolbar>

    <TextView
        android:layout_marginTop="40dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="jhdfjkhjwqhfjhwqjfhwjqf"
        android:layout_gravity="center"
        android:gravity="center"
        />
    <TextView
        android:layout_marginTop="70dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="jhdfjkhjwqhfjhwqjfhwjqf"
        android:layout_gravity="center"
        android:gravity="center"
        />
    <TextView
        android:layout_marginTop="@dimen/_50sdp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="jhdfjkhjwqhfjhwqjfhwjqf"
        android:layout_gravity="center"
        android:gravity="center"
        />
    </LinearLayout>

  inside on create view in your activity

    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setTitle("Litabswait Task");