如何在布局的一角放置徽章图标

Question

我想在布局的一角有一个徽章。我设法在布局内获得徽章，但无法在它的角落实现。

目前我的代码给我：

我想要什么： 我想让这个徽章位于布局的右上角。

我想要这样的东西：

工具栏.xml

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="@dimen/toolbar_height"
    android:background="@color/toolbar_color"
    android:contentInsetLeft="0dp"
    android:contentInsetStart="0dp"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="1"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textview"
            android:text="My Assignments"
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_marginLeft="90dp"
            android:layout_weight="0.5"
            android:textSize="20sp"
            />

        <RelativeLayout
        android:id="@+id/bell_linearlayout1"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_gravity="center"
        android:layout_marginLeft="15dp">

        <RelativeLayout
            android:id="@+id/bell_linearlayout"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:background="#75aadb">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:layout_centerInParent="true"
                android:id="@+id/cartIconImageView"
                android:src="@drawable/notification"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="25dip"
            android:layout_height="25dip"
            android:gravity="end|top|right"
            android:layout_alignParentTop="true"
            android:layout_marginBottom="100dp"
            android:layout_marginLeft="20dp">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_alignParentTop="true"
                android:background="@drawable/badge" />
        </RelativeLayout>

</RelativeLayout>
        <LinearLayout
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="#75aadb"
            android:id="@+id/accountinfo_layout"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="1dp"
                android:src="@drawable/profile"/>

        </LinearLayout>

    </LinearLayout>
    </android.support.v7.widget.Toolbar>

可绘制徽章.xml

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="8dp" />
    <solid android:color="#f20000" />
    <stroke
        android:width="2dip"
        android:color="#FFF" />
    <padding
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp" />
</shape>

请帮忙 。

原文由 young_08 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可能有点旧，但如果有人阅读这篇文章，那么现在您就有了“新”ConstraintLayout 的解决方案。

所以首先我更喜欢在新的布局文件（文件名：user_cart_with_badge.xml）中执行此操作，我会将其包含在工具栏中。

所以在这个文件中，我将定义我想要使用它的图标，以及将用作徽章的文本。

该文件的内容：

     <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="@+id/layoutforprofileimage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <ImageButton
        android:id="@+id/btnOpenCart"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:gravity="end"
        app:srcCompat="@drawable/ic_menu_shooping_cart"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"
        android:adjustViewBounds="true"
        android:gravity="center"
        android:minHeight="17sp"
        android:minWidth="17sp"
        android:padding="3dp"
        android:paddingBottom="1dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:scaleType="fitStart"
        android:text="3"
        android:textColor="#ffffff"
        android:textSize="12sp"
        android:visibility="visible"
        android:background="@drawable/badge_background"
        app:layout_constraintBottom_toBottomOf="@+id/btnOpenCart"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/btnOpenCart"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

现在，我们还应该为我们的 TextView 徽章定义背景。在您的可绘制文件夹中创建新文件，我将其命名为“badge_background.xml”。我想在这个 链接 上你可以看到更多关于这个背景的形状，如果你不喜欢我的。

该文件的内容：

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="2dp" />
    <solid
        android:color="#ff4848"/>

    <padding
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp" />
</shape>

最后，您现在需要的是将 user_cart_with_badge.xml 布局的内容包含到您需要带有徽章的自定义图像的文件/布局中。假设您在工具栏中需要它。

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarMeat"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/AppTheme.Toolbar"
        android:gravity="end">

        <include
            android:id="@+id/cardContainerForSettingsData"
            layout="@layout/user_cart_with_badge"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/user_info_section" />

    </android.support.v7.widget.Toolbar>

希望这能帮助多年后阅读本文的人。

原文由 Nihad Delic 发布，翻译遵循 CC BY-SA 3.0 许可协议