如何在布局的一角使用徽章图标 [英] How to have badge icon at corner of a layout
问题描述
我想在布局的一角有一个徽章.我设法将徽章添加到布局中，但无法在布局的一角实现.
I wanted to have a badge at corner of a layout . I managed to get badge inside the layout but not able to achieve at corner of it .
目前，我的代码给了我:
Currently my code gives me :
我想要的东西:我想将此徽标放置在布局的右上角.
What i want : i want to have this badge to over right top corner of an layout .
我想要这样的东西:
Toolbar.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>
可绘制的badge.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>
请帮助.
推荐答案
也许有点老，但是如果有人读了这篇文章，现在您可以使用新的" ConstraintLayout解决方案.
Maybe a little old, but if someone reads this post, now you have solution with "new" ConstraintLayout.
因此，首先我更喜欢在新的布局文件(文件名:user_cart_with_badge.xml)中执行此操作，并将其包含在工具栏中.
So first I prefer to do this in new layout file (name of the file: user_cart_with_badge.xml) which I will include it in toolbar.
因此，在此文件中，我将定义要使用的图标和用作徽章的文本.
So in this, file I will define icon that I want to use it, and text, that will be used as badge.
此文件的内容:
<?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".我认为在此链接如果您不喜欢我的背景，则可以了解有关此背景形状的更多信息.
Now, we should also define background for our TextView badge. Create new file in your drawable folder, I have called it "badge_background.xml". I think that on this link you can see more about shapes for this background, if you don't like mine.
此文件的内容:
<?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布局的内容包括到文件/布局中，在此您需要带有徽章的自定义图像.假设您在工具栏中需要它.
And finally all you need now is to include content of user_cart_with_badge.xml layout, to file/layout where you need this custom image with badge. Let's say that you need it in toolbar.
<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>
希望，这将帮助多年后阅读此书的人.
Hope, that this will help someone, who reads this, after years.
这篇关于如何在布局的一角使用徽章图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
