[英]Android: Put an image and a text view over another image
I am trying to create a screen that has two background images and a text view with a language selection dropdown.我正在尝试创建一个具有两个背景图像和一个带有语言选择下拉菜单的文本视图的屏幕。 The first background image fills up the entire screen, and the second background image sites in the center.
第一个背景图像填满整个屏幕,第二个背景图像位于中心。 Then we have a language dropdown which is suppose to sit at the bottom.
然后我们有一个语言下拉菜单,它应该位于底部。 I want to achieve something like this:
我想实现这样的目标:
I see that FrameLayout gives us this capability of nesting images one over another, however with my code, I am getting the language dropdown at the top instead of bottom.我看到 FrameLayout 为我们提供了一种将图像逐个嵌套的能力,但是使用我的代码,我在顶部而不是底部获得了语言下拉列表。 I am pretty new to Android and am fixing a few screens, any help is really appreciated.
我对 Android 很陌生,正在修复一些屏幕,非常感谢任何帮助。 Here is my code:
这是我的代码:
<FrameLayout 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="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/image_1"
android:scaleType="fitXY" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="20dip"
android:background="@drawable/image_2" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.instructionview.WelcomeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="@dimen/common_10dp"
android:id="@+id/preferredData"
android:text=""
android:layout_marginBottom="@dimen/common_10dp"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
android:textColor="#2c5a99"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="@dimen/common_20dp"
android:layout_marginRight="@dimen/common_20dp"
android:background="@drawable/bg_dashboard_line_outline">
<TextView
android:id="@+id/language_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/change_lang"
android:gravity="left"
android:padding="@dimen/common_10dp"
android:layout_marginLeft="@dimen/common_20dp"
android:text="English"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="#343f45" />
<Button
android:id="@+id/change_lang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginRight="@dimen/common_30dp"
android:backgroundTint="#183274"
android:gravity="center_vertical"
android:text="CHANGE" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
1.That will give you some start 1.这会给你一些开始
2.Read the code carefully use some margin and padding to make this beautiful 2.仔细阅读代码使用一些边距和填充使这个漂亮
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="@drawable/chemistry">
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginBottom="20dip"
android:background="@drawable/calculator" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/framelayout"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="@+id/preferredData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center"
android:padding="10dp"
android:text="fedsgsd vfsm "
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
android:textColor="#2c5a99"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="end">
<TextView
android:id="@+id/language_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_toLeftOf="@+id/change_lang"
android:gravity="left"
android:padding="10dp"
android:text="English"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="#343f45" />
<Button
android:id="@+id/change_lang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginRight="30dp"
android:backgroundTint="#183274"
android:gravity="center_vertical"
android:text="CHANGE" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You should really consider using ConstraintLayout instead of FrameLayout as it gives you more control and flexibility.您真的应该考虑使用ConstraintLayout而不是FrameLayout,因为它为您提供了更多的控制和灵活性。 If you don't know about ConstraintLayout, I would recommend learning it ASAP .
如果您不了解 ConstraintLayout,我建议您尽快学习。 You can through this playlist for a quick and in-depth overview.
您可以通过此播放列表进行快速深入的概览。 Using ConstraintLayout you can achieve your desired outcome with a few lines of code.
使用 ConstraintLayout,您可以通过几行代码实现您想要的结果。
<?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"
android:background="@color/black"
android:padding="24dp"
tools:context=".MainActivity">
<!--Here I have set height and width of the ImageView to 0dp
So that I can maintain the same aspect ratio for all kind of screen sizes.
-->
<ImageView
android:id="@+id/image"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="24dp"
android:background="@color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/image" />
</androidx.constraintlayout.widget.ConstraintLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.