I am more into Swift than Android but am trying to learn it.
With Swift I used auto layout with constraints which allowed me to layout pretty easy. I can't seem to achieve what I want to with Android XML.
I am creating a custom list view row. I want the row to be the same height as the image (128px) no more or no less. Then I want the title centred and below the title, 2 images each with text.
I thought I had it as on the smaller device preview it looked fine. But as I move up screen resolutions it is as if the row gets smaller in height.
4.0 inch screen:
6.0 inch screen:
So why does the height of the row appear to change?
Could I get some pointers? Thanks.
Here is the full XML code for reference:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="128px"
android:orientation="vertical">
<ImageView
android:id="@+id/sceneImage"
android:layout_width="128px"
android:layout_height="128px"
android:layout_margin="0px"
app:srcCompat="@mipmap/clipboard"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<TextView
android:id="@+id/sceneName"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:text="Scene Title"
android:layout_toEndOf="@id/sceneImage"
android:layout_marginLeft="30dp"
android:gravity="center"/>
<ImageView
android:id="@+id/sceneOptionImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/forest"
android:layout_below="@+id/sceneName"
android:layout_alignStart="@+id/sceneName"
android:layout_marginTop="18dp" />
<TextView
android:id="@+id/sceneOptionText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_toEndOf="@+id/sceneOptionImage"
android:layout_below="@id/sceneName"
android:layout_marginTop="20dp"
android:text="TextView" />
<ImageView
android:id="@+id/sceneColourImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
app:srcCompat="@mipmap/forest"
android:layout_below="@+id/sceneName"
android:layout_alignStart="@+id/sceneOptionText"
android:layout_marginTop="18dp" />
<TextView
android:id="@+id/sceneColourText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_toEndOf="@+id/sceneColourImage"
android:layout_below="@id/sceneName"
android:layout_marginTop="20dp"
android:text="TextView" />
</RelativeLayout>
Solution to your problem is weight sum. this will allows you to manage layout on different screen size
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="128dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="vertical">
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scene Title"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:gravity="center"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text View"/>
</LinearLayout>
<LinearLayout
android:gravity="center"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text View"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</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.