3

In my xml file I set each small circle (ImageView) to be the size of 25% of the screen with a Linear View and layout_weights.

Here is a screen shot from my phone
(how it is supposed to look)		 On my tablet it does not change the size
to be 25% of the screen (this is how it looks)
How it must look How it looks on tablet

My code consists of three LinearLayout's each containing ImageView's with weights of 0.25 out of 1.

Here is the code:

<?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" xmlns:ads="http://schemas.android.com/apk/res-auto"> <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/imageView12" android:src="@drawable/circle_big" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> <LinearLayout android:id="@+id/wrapper" android:layout_width="fill_parent" android:layout_height="wrap_content" android:weightSum="1.0" android:layout_centerVertical="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true"> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.03125" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.25" android:id="@+id/imageView12" android:src="@drawable/circle_white" android:onClick="changeToScreenSelectLayout" android:scaleType="fitCenter" android:adjustViewBounds="true" /> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.09375" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.25" android:id="@+id/imageView12" android:src="@drawable/circle_white" android:onClick="changeToScreenSelectLayout" android:scaleType="fitCenter" android:adjustViewBounds="true" /> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.09375" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.25" android:id="@+id/imageView12" android:src="@drawable/circle_white" android:onClick="changeToScreenSelectLayout" android:scaleType="fitCenter" android:adjustViewBounds="true" /> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.03125" /> </LinearLayout> <LinearLayout android:id="@+id/wrapper" android:layout_width="fill_parent" android:layout_height="wrap_content" android:weightSum="1.0" android:layout_centerVertical="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:rotation = "120"> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.03125" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.25" android:id="@+id/imageView12" android:src="@drawable/circle_white" android:onClick="changeToScreenSelectLayout" android:scaleType="fitCenter" android:adjustViewBounds="true" /> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.4375" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.25" android:id="@+id/imageView12" android:src="@drawable/circle_white" android:onClick="changeToScreenSelectLayout" android:scaleType="fitCenter" android:adjustViewBounds="true" /> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.03125" /> </LinearLayout> <LinearLayout android:id="@+id/wrapper" android:layout_width="fill_parent" android:layout_height="wrap_content" android:weightSum="1.0" android:layout_centerVertical="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:rotation = "60"> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.03125" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.25" android:id="@+id/imageView12" android:src="@drawable/circle_white" android:onClick="changeToScreenSelectLayout" android:scaleType="fitCenter" android:adjustViewBounds="true" /> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.4375" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.25" android:id="@+id/imageView12" android:src="@drawable/circle_white" android:onClick="changeToScreenSelectLayout" android:scaleType="fitCenter" android:adjustViewBounds="true" /> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.03125"/> </LinearLayout> </RelativeLayout>
Improve this question
7
  • Using a PercentRelativeLayout may help. Commented Aug 4, 2016 at 18:23
  • As far as I am aware, layout weights must be whole numbers Commented Aug 4, 2016 at 18:29
  • @cricket_007 wrong. They can be floating point values. Commented Aug 4, 2016 at 18:37
  • 1
    @cricket_007 As defined here, weights are floats Commented Aug 4, 2016 at 18:43
  • 1
    Yeah.... there is a tendency for people to assume the numbers need to sum to 1. But its just weights, 1:1:1 would product the same exact result as 2.5:2.5:2.5 Commented Aug 4, 2016 at 19:12

1 Answer 1

Reset to default
1

You cannot use a png file as your circle_white. You could technically make this work if you choose the correct android:scaleType, but it would result in horribly aliased renderings.

I would first delete your existing pngs (From each resource bucket) since they cannot be used for this. Then make a new file in drawable named "circle_white.xml". Put this in it, this will draw a circle with no intrinsic size. I.E. it will just fill whatever you render it with.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#fff"/> </shape>

And then change from using ImageView's with a src of circle_white to a HeightMatchesWidthView with the background set to this new @drawable/circle_white. You would need to ensure the Views height matches the width which I did in a view extension below. To use this just make a new class somewhere and paste this in. In xml reference it by instead of having ImageView do com.whatever.HeightMatchesWidthView where the com.whatever is whatever package you put this in.

public class HeightMatchesWidthView extends View { public HeightMatchesWidthView(final Context context) { super(context); } public HeightMatchesWidthView(final Context context, final AttributeSet attrs) { super(context, attrs); } public HeightMatchesWidthView(final Context context, final AttributeSet attrs, final int defStyle) { super(context, attrs, defStyle); } @Override protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) { int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); setMeasuredDimension(width, width); } @Override protected void onSizeChanged(final int w, final int h, final int oldw, final int oldh) { super.onSizeChanged(w, w, oldw, oldh); } }

Instead of the HeightMatchesWidthView you could also use a PercentRelativeLayout instead and use that to force them to be square, and the correct size without having to extend View to add support for forcing square.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

It is the white circles from the pictures
So its an actual PNG file?
Yes it is a png file from ldpi to xxhdpi
@sazzy4o Please see this post stackoverflow.com/a/34724737/2308683
Ill try changing it to a view
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.