在内容背景上创建布局

Question

我的问题很简单，是 UI/UX 设计问题。我想为我的布局获取此模型

我不知道它是怎么称呼的，需要一些帮助和想法来编写这个代码，我尝试了几个选项但没有尝试。

Answer 1

尝试对图像和回收站视图使用相对布局，并将回收站视图放在卡片视图中。这应该适用于第一个和第二个视图，并在卡片视图中的第三个视图中添加一个日历和一个回收器视图。希望这有帮助

Answer 2

要创建上述布局，您可以使用 FrameLayout 或 Co-ordinator Layout 或新的 ConstraintLayout。这将为您完成。

Refer this link to understand the above design.

    <RelativeLayout 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="match_parent"
        tools:context="xyz.himanshusingh.cryptokoin.ui.display.MainActivity">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@drawable/toolbargradient" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="130dp"
            android:layout_below="@+id/toolbar"
            android:background="@drawable/toolbargradient" />

        <android.support.v7.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="80dp"
            app:cardCornerRadius="10dp">
       </android.support.v7.widget.CardView>
</RelativeLayout>

和toolbargradient.xml,

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:type="linear"
        android:startColor="#f7792e"
        android:endColor="#ef246b"
        android:angle="180"/>
</shape>

这段 XML 代码几乎可以为您完成设计。您可以使用 want.Like RecyclerView、DatePicker 等任何东西来代替 CardView

希望这对您有所帮助 :)

在内容背景上创建布局

Creating a layout over content background

user-interface

android

user-experience

android-layout