I am trying to make a screen, preferably with XML only, to look like this:
I followed this approach, but using FrameLayout I only have the option to position the "orange" view using layout_gravity
, and as I try to explain in the image, I don't know the layouts' height, because both measure with layout_weight.
My layout:
<?xml version="1.0" encoding="utf-8"?>
<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="onit.radiolisten.MainActivity">
<FrameLayout
android:id="@+id/layout_container_activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- TOP LAYOUT, THE GREEN ONE ON THE IMAGE -->
<LinearLayout
android:id="@+id/layout_top_activity_main"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="2"
android:background="@color/colorPrimary"
android:orientation="vertical"></LinearLayout>
<!-- BOTTOM LAYOUT, THE BLUE ONE ON THE IMAGE -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#e6e6e6">
</RelativeLayout>
</LinearLayout>
<!-- THIS IS THE IMAGE I WANT TO POSITION -->
<ImageView
android:id="@+id/btn_play_radio"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:src="@drawable/play_icon" />
</FrameLayout>
</LinearLayout>
Can this be done with XML only?
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<--main layout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<--top layout-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="0.4"
android:gravity="bottom|center"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
android:background="@color/callingscreen_color"
android:gravity="center|top" />
</LinearLayout>
<--layout for img-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="center|top">
<--IMage u want to put-->
<ImageView
android:id="@+id/ivimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I came here looking for answers to the same question but I found nothing as well as other posts. Then, I realized I had to figure a way out myself. The below employs the use of weights and margin.
<LinearLayout
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="?colorSecondary"
android:orientation="vertical"
android:weightSum="11"
tools:context=".ActivityUserAccount">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginBottom="-90dp"
android:background="@drawable/sample_user"
android:elevation="10dp"
android:src="@drawable/sample_user" />
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center|bottom"
android:layout_marginBottom="-50dp"
android:backgroundTint="#FFFAFA"
android:elevation="0dp"
app:cardCornerRadius="50dp">
</androidx.cardview.widget.CardView>
</LinearLayout>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.