CODEWITHSUNDEEP
androidandroid-layoutandroid-drawable
Damn Vegetables
Damn Vegetables

Reputation: 12504

Scale drawable to be half of the height while maintaining the aspect ratio

I want to put two circles vertically and I want their size to be half of the parent height. In short, please see the picture below.

I want the circles to be scaled according to x, which is the height of TextView, and can vary according to the system preferences. I created a layout below, but it did not work. Is this achievable?

desired

UPDATE

According to the answers, I assigned some arbitrary width and height to the circle, and changed "fitXY" to "centerInside" (because I have found out that fitXY does not keep aspect ratio). To simulate different system settings, I set arbitrary height to the TextView. I set the background colour of the ImageViews to red to see their boundaries.

The problem is, if the circle's width/height is smaller than 1/2 of the TextView height, (e.g., circle width/height=10dp, TextView height=100dp) the circle does not scale up. enter image description here

If the circle's width/height is larger than 1/2 of the TextView height, (e.g., circle width/height=200dp, TextView height=100dp) then the circle gets correctly scaled but somehow there are some weird empty margins on the left/right side of the circle. enter image description here

END OF UPDATE

I created a layout like the following, but it did not work.

item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">
        <ImageView
            android:src="@drawable/circle"
            android:scaleType="fitXY"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"/>
        <ImageView
            android:src="@drawable/circle"
            android:scaleType="fitXY"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"/>
    </LinearLayout>
    <TextView
        android:textAppearance="@android:style/TextAppearance.Large"
        android:text= "If he's so smart, how come he's dead?"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:gravity="center_vertical"
        android:layout_height="wrap_content"/>
</LinearLayout>

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#0000FF"/>
</shape>

Upvotes: 3

Views: 1341

Answers (4)

Damn Vegetables
Damn Vegetables

Reputation: 12504

I solved this problem by creating a custom ImageView. Basically, if the width and the height is different, this ImageView sets the width to the height.

Using this way, the circle drawable needs not have <Size>.

public class SquareImageView extends ImageView
{
    public SquareImageView(Context context)
    {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom)
    {
        int width = right - left;
        int height = bottom - top;
        if(width!=height)
        {
            post(new Runnable()
            {
                @Override
                public void run()
                {
                    setMinimumWidth(height);
                }
            });
        }
    }
}

Upvotes: 1

Ravi Theja
Ravi Theja

Reputation: 3401

Change circle to this.It should work.

 <?xml version="1.0" encoding="utf-8"?>
 <shape
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
      <solid
          android:color="#0000FF"/>
      <size
        android:height="someHeight in dp"
        android:width="sameWidth in dp" />
 </shape>

Upvotes: 0

Iqbal
Iqbal

Reputation: 2334

The below layout solves your problem partially. To complete it, you want to get the exact value of layout_height in runtime (programmatically) and set the layout_width of the LinearLayout (which will replace the hard coded value 100dp) to half of the layout_height value.

<?xml version="1.0" encoding="utf-8"?>

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    android:columnCount="2"
    >

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="match_parent"
    android:weightSum="2"
    android:orientation="vertical"
    android:layout_column="0"
    android:layout_row="0"
    >

    <ImageView
        android:src="@drawable/circle"
        android:scaleType="fitXY"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <ImageView
        android:src="@drawable/circle"
        android:scaleType="fitXY"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text= "If he's so smart, how come he's dead?"
    android:layout_column="1"
    android:layout_row="0"
    android:gravity="center_vertical"
    />

Upvotes: 0

Abhishek Patel
Abhishek Patel

Reputation: 4328

Try Below..

<?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"
android:orientation="horizontal" >

<LinearLayout
    android:id="@+id/ll"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/circle" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/circle" />
</LinearLayout>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/ll"
    android:layout_centerVertical="true"
    android:text="If he&apos;s so smart, how come he&apos;s dead?"
    android:textAppearance="@android:style/TextAppearance.Large" />

And circle.xml

<?xml version="1.0" encoding="utf-8"?>


<solid android:color="#0000FF" />

<stroke
    android:width="2dp"
    android:color="#fff" />

<size
    android:height="80dp"
    android:width="80dp" />

Upvotes: 0

Related Questions