CODEWITHSUNDEEP
androidxmlandroid-linearlayoutandroid-relativelayout
timothyjc
timothyjc

Reputation: 2228

App widget xml layout for variable parent size

I have an app widget which is resizable. I want to have text above and below an image. The image should take as much room as available and the text should be directly above and below the image.

I want to do this in xml only, but can't figure out a layout which works for both situations shown in the attached image.

So my question is, with what XML can I achieve this behavior?

EDIT: The image view may be larger than the parent container view.

desired layout behavior

Upvotes: 0

Views: 434

Answers (1)

Simon
Simon

Reputation: 14472

Something like this:

<?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="wrap_content" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:layout_alignParentCenter="true"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/imageview"
        android:text="text 1"/>


    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageview"
        android:text="text 2"/>


</RelativeLayout>

Or this, using layout weight to control the sizing:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:weightSum="100"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_weight="10"
        android:layout_height="0px"
        android:text="text 1"/>

   <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_weight="80"
        android:layout_height="0px"
        android:scaleType="center"
        android:layout_alignParentCenter="true"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_weight="10"
        android:layout_height="0px"
        android:text="text 2"/>

 </LinearLayout>

Play with the weights, the image alignment and the image scale type to get it just how you want.

Upvotes: 1

Related Questions