I understand that this is probably a trivial layout issue, but I can't get it to work the way I want, without layers in the way I feel there are too many container layouts. I am trying to configure ImageView so that the following conditions are true:
- The width of the ImageView is a certain percentage of the width of its parent element (now the width of the screen).
- ImageView is centered horizontally inside the screen.
I created a test case using an XML layout, but in practice I will create these layouts and view them programmatically; I do not think this is important for the purpose of determining the correct layout.
I am a little familiar with the scales in Android layouts and how they are usually used to layout several types with relative weighting factors. To satisfy condition 1, I create a LinearLayout container (horizontal orientation), set its weightSum = 1, then insert my ImageView with the weight of any percentage that I want, say, 0.5. It works!
Next, I would like the ImageView to eventually center horizontally on the screen. So I set gravity to "center" / "centerHorizontal". I'm stuck here, because no matter what gravity / layout _gravity I choose, it always aligns on the left side.
Layout File:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFFFF"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:weightSum="1.0"> <ImageView android:src="@drawable/earth" android:adjustViewBounds="true" android:layout_width="0" android:layout_height="wrap_content" android:layout_weight="0.5" android:layout_gravity="center_horizontal" android:id="@+id/imageView1" /> </LinearLayout> </LinearLayout>
Result:
What I really want to achieve is something like this:
But for this I had to insert two dummy LinearLayouts with 0.25 weights on both sides of my ImageView, for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFFFF"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:weightSum="1.0"> <LinearLayout android:orientation="horizontal" android:layout_width="0" android:layout_height="wrap_content" android:layout_weight="0.25"/> <ImageView android:src="@drawable/earth" android:adjustViewBounds="true" android:layout_width="0" android:layout_height="wrap_content" android:layout_weight="0.5" android:layout_gravity="center_horizontal" android:id="@+id/imageView1" /> <LinearLayout android:orientation="horizontal" android:layout_width="0" android:layout_height="wrap_content" android:layout_weight="0.25"/> </LinearLayout> </LinearLayout>
This is an ugly and inconvenient location, in my opinion, not only because now I need to use 3 additional LinearLayouts aside from my LinearLayout at the top level, just to size and position my view, but also because I want to do everything Layout programmatically and dynamically. I could decide how to correct or left align my views at runtime, or change their scaling factor relative to the screen width, which in this solution requires the potential addition / removal of layout dummies and setting all weights accordingly.
I hope someone is better at layouts than I will have a better solution! Ideally, somewhere I can just set “gravity” (although I couldn’t get it working) or some alternative way to set the width without requiring a horizontal LinearLayout container and weight, since without this container I can center horizontally in a vertical LinearLayout top level.
Thanks!
EDIT: I only realized that in a second layout attempt using the dummy LinearLayout add-on, I can end the second LinearLayout add-on (set to 0.25 weight) and just use one dummy LinearLayout add-on before my ImageView, since they refer to a predefined weightSum in the parent . For example:.
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:weightSum="1.0"> <LinearLayout android:orientation="horizontal" android:layout_width="0" android:layout_height="wrap_content" android:layout_weight="0.25"/> <ImageView android:src="@drawable/earth" android:adjustViewBounds="true" android:layout_width="0" android:layout_height="wrap_content" android:layout_weight="0.5" android:layout_gravity="center_horizontal" android:id="@+id/imageView1" /> </LinearLayout>
Still not the perfect solution I was hoping for.