[英]Floating Action Button - Rendering issue at design and runtime
Have observation while working with a simple design for Login Screen with two EditText and a Floating Action Button.在使用带有两个 EditText 和一个浮动操作按钮的登录屏幕的简单设计时进行观察。
Observation: Views rendered incorrectly;
观察:视图渲染不正确; take a look at below XML code for layout and the attached image showing design-time view for layout.
看看下面的 XML 代码布局和显示布局设计时视图的附加图像。
NOTE: Same UI appears on real or virtual devices too.
注意:相同的 UI 也会出现在真实或虚拟设备上。
activity_login.xml activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.LoginActivity">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="200dip"
android:layout_marginEnd="32dp"
android:orientation="vertical"
android:padding="10dip"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="@+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="@drawable/ic_mobile"
android:drawablePadding="10dip"
android:ems="10"
android:hint="@string/username"
android:inputType="textPersonName"
android:textColorHint="@color/colorAccent"
tools:ignore="Autofill" />
<EditText
android:id="@+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dip"
android:drawableStart="@drawable/ic_key"
android:drawablePadding="10dip"
android:ems="10"
android:hint="@string/password"
android:inputType="textPassword"
android:textColorHint="@color/colorAccent"
tools:ignore="Autofill" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/screen_size"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="@string/forget_password"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="@android:color/white"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
style.xml样式.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
</resources>
This is how it looks like.这就是它的样子。
Other things that might require for more!其他可能需要更多的东西!
below is the list of dependencies used下面是使用的依赖项列表
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.3.0'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'com.google.android.material:material:1.1.0'
testImplementation 'junit:junit:4.13'
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
implementation 'com.squareup.picasso:picasso:2.71828'
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
}
The problem with the floating Action Button is that you haven't set the浮动操作按钮的问题是您没有设置
android:layout_gravity="bottom|end"
which is required to set the button to the bottom position of the layout. android:layout_gravity="bottom|end"
需要将按钮设置为布局的底部 position。 Also add android:layout_margin="value"
to determine its relative postion from the layout borders.还添加
android:layout_margin="value"
以确定其与布局边界的相对位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.