My current Android application requires a complex layout as follows.
this is the completed view
------------------------------------------------------------------------------------------
| |
| --------------- ------------------------------------------------- --------------- |
| | | | | | | |
| | | | | | | |
| | IV(1) | | TV(1) | | IV(2) | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| --------------- ------------------------------------------------- --------------- |
| --------------------------------------------------------------------------------- |
| | | |
| | | |
| | | |
| | TV(2) | |
| | | |
| | | |
| --------------------------------------------------------------------------------- |
| --------------- ------------------------------------------------- --------------- |
| | | | | | | |
| | | | | | | |
| | IV(3) | | TV(3) | | IV(4) | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| --------------- ------------------------------------------------- --------------- |
------------------------------------------------------------------------------------------
It consists of four ImageView
s, (e.g. IV1
- 4
) and three TextView
s (e.g. TV1
- 3
)
There are additional restrictions I have to adhere to
- A Minimum of 1 ImageView will always be present, it can be any of the four shown
- All textViews are mandatory
- All ImageViews have identical width & height
- All Textviews heights must match that of the ImageViews
For the Top and middle rows shown above I have managed to get to the following layout
<RelativeLayout
android:id="@ id/top_row_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingTop="10dp"
android:paddingEnd="10dp">
<ImageView
android:id="@ id/top_left_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:src="@drawable/ic_launcher_background" />
<TextView
android:id="@ id/top_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@ id/top_left_corner"
android:layout_alignWithParentIfMissing="true"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_toStartOf="@ id/top_right_corner"
android:layout_toEndOf="@ id/top_left_corner"
android:text="@string/lorem_ipsum" />
<ImageView
android:id="@ id/top_right_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:src="@drawable/ic_launcher_background" />
</RelativeLayout>
<TextView
android:id="@ id/middle_text"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:text="@string/lorem_ipsum" />
I wanted to achieve the desired UI without having to develop a custom View, I've a feeling that it may be the only solution though.
CodePudding user response:
You can achieve this layout using ConstraintLayout
Try below code:
<?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:orientation="vertical"
tools:context=".MainActivity"
android:padding="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/clMain1"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:padding="10dp">
<ImageView
android:id="@ id/ivMain1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@ id/ivMain1"
app:layout_constraintEnd_toStartOf="@id/ivMain2"
app:layout_constraintTop_toTopOf="@ id/ivMain1"
app:layout_constraintBottom_toBottomOf="@ id/ivMain1"
android:text="Text1"
android:gravity="center"/>
<ImageView
android:id="@ id/ivMain2"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@ id/clMain1"
app:layout_constraintBottom_toTopOf="@ id/clMain2"
android:gravity="center"
android:text="Text2"
android:padding="10dp"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/clMain2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:padding="10dp">
<ImageView
android:id="@ id/ivMain3"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@ id/ivMain3"
app:layout_constraintEnd_toStartOf="@id/ivMain4"
app:layout_constraintTop_toTopOf="@ id/ivMain3"
app:layout_constraintBottom_toBottomOf="@ id/ivMain3"
android:text="Text3"
android:gravity="center"/>
<ImageView
android:id="@ id/ivMain4"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintDimensionRatio="1:1"
android:src="@mipmap/ic_launcher"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
For more info for ContraintLayout
Check this official link
Output for above code
CodePudding user response:
You can learn about ConstraintLayout
or TableLayout
, these two arrangements can solve your problem.