Is there a way to get the images touching like in this image without guessing the heights of each horizontal LinearLayout?
As you can see from my XML i had to guess the LinearLayout heights at 144dp to get this effect, is there a better way that would work on different screen sizes?
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="144dp" >
<ImageView
android:id="#+id/ImageView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="144dp"
android:layout_gravity="fill_horizontal" >
<ImageView
android:id="#+id/imageView03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/imageView04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout03"
android:layout_width="match_parent"
android:layout_height="144dp"
android:layout_gravity="fill_horizontal" >
<ImageView
android:id="#+id/ImageView05"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView06"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
</LinearLayout>
If possible I would prefer to be able to do it in XML. The images are square so they have to fill the width and still be in proportion. I can almost do it with fitXY but that just stretches their width and not their height.
You should use a GridView instead of many LinearLayouts.
If you want to keep your code, update this :
Your main layout should have this property :
android:layout_height="match_parent"
The other "Layout Wrappers" should have :
android:layout_height="wrap_content"
android:orientation="horizontal"
Your imageView should have :
android:layout_height="wrap_content"
Are you working only with square images ?
I updated your code and didn't try it, but it should work :
<LinearLayout
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/ImageView01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/imageView04"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ImageView05"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView06"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_science" />
</LinearLayout>
</LinearLayout>
Whilst the images aren't perfectly square (although its quite unnoticeable) i managed to solve this problem by using 2 Vertical LinearLayouts instead of 3 Horizontal ones and using ScaleType=fitXY to fill the remaining gaps, leaving me with this:
From the code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="3" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_science" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="3" >
<ImageView
android:id="#+id/ImageView04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_sport" />
<ImageView
android:id="#+id/imageView03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_science" />
<ImageView
android:id="#+id/imageView04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_sport" />
</LinearLayout>
</LinearLayout>
Related
what I am trying to do is some thing like this.
image one
No matter which device is it. It should display ony four rows on the screen and later user can scroll to see other rows
I am using veritical linearlayout weight to achieve this,But it does not happening the way i am trying to achieve this. its give me screen like this when i add more rows
image two
below is my layout xml which gives screen as image one but adding more rows gives image two view
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:background="#color/lightGray"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="1dp"
android:weightSum="4"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/abulation"
style="#style/icon"
android:background="#drawable/wudu_96" />
<ImageButton
android:id="#+id/masjid"
style="#style/icon"
android:background="#drawable/masjid_96" />
<ImageView
android:id="#+id/restroom"
style="#style/icon"
android:background="#drawable/restroom_96" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/dressing"
style="#style/icon"
android:background="#drawable/dressing_96" />
<ImageButton
style="#style/icon"
android:background="#drawable/icon_selector"
android:scaleType="fitXY" />
<ImageButton
android:id="#+id/Favourite"
style="#style/icon"
android:background="#drawable/favourite_96"
android:onClick="random"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
style="#style/icon"
android:background="#drawable/fear_96" />
<ImageView
style="#style/icon"
android:background="#drawable/fear_96" />
<ImageView
style="#style/icon"
android:background="#drawable/fear_96" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
style="#style/icon"
android:background="#drawable/fear_96" />
<ImageView
style="#style/icon"
android:background="#drawable/fear_96" />
<ImageView
style="#style/icon"
android:background="#drawable/fear_96" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
I know i am doing wrong thing to achieve this . Please help me how can i get the view i want .
Try this. You have wrapped your view in one more parent LinearLayout in ScrollView that might just be the reason for your problem.
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:weightSum="3"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
Try this.
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:background="#color/lightGray"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="1dp"
android:weightSum="4"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/abulation"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#FF0F0F" />
<ImageButton
android:id="#+id/masjid"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#D0060F" />
<ImageView
android:id="#+id/restroom"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#1F0F0F" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:id="#+id/dressing"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#FF0F0F" />
<ImageButton
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#1F0F0F"
android:scaleType="fitXY" />
<ImageButton
android:id="#+id/Favourite"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#D0060F"
android:onClick="random"
android:scaleType="fitXY" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#D0060F" />
<ImageView
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#1F0F0F" />
<ImageView
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#FF0F0F" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<ImageView
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#1F0F0F" />
<ImageView
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:background="#D0060F" />
<ImageView
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#FF0F0F" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
Hope it helps.!
Here's what you need to do: Firstly we get rid of android:weightSum property from the main vertical LinearLayout and the android:layout_weight from each of the horizontal LinearLayout. We also need to set id to our vertical LinearLayout as android:id=#+id/mainContainerLL. This is the sample layout that i derived for testing from your layout:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/rowContainerLL"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:orientation="horizontal"
android:weightSum="3">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:orientation="horizontal"
android:weightSum="3">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:orientation="horizontal"
android:weightSum="3">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:orientation="horizontal"
android:weightSum="3">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:orientation="horizontal"
android:weightSum="3">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:orientation="horizontal"
android:weightSum="3">
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.v4.widget.NestedScrollView>
Now, for the java coding part: We use a ViewTreeObserver to get height at runtime (observer gives us a callback when views are about to be drawn and their heights are calculated so, we need that). There, we set height to each of our horizontal LinearLayout:
final LinearLayout linearLayout = (LinearLayout) findViewById(R.id.rowContainerLL);
ViewTreeObserver viewTreeObserver = linearLayout.getViewTreeObserver();
viewTreeObserver.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
#Override
public boolean onPreDraw() {
linearLayout.getViewTreeObserver().removeOnPreDrawListener(this);
View child;
LinearLayout.LayoutParams params;
final int viewHeight = linearLayout.getHeight() / 4;
for (int i = 0; i < linearLayout.getChildCount(); i++) {
child = linearLayout.getChildAt(i);
params = (LinearLayout.LayoutParams) child.getLayoutParams();
params.height = viewHeight;
child.setLayoutParams(params);
}
return false;
}
});
Ok i am trying to split screen size to horizontally equally and vertically 3 each part
Android studio on windows 8.1 api 9
Here image how i want
each image is exactly those sizes and i want them to proportionally scaled according to the lower resolutions
here my code that i tried and failed
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".Pokemon"
android:background="#color/background_floating_material_dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_1"
android:background="#null"
android:src="#drawable/bg_monstermmorpg_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_2"
android:background="#null"
android:src="#drawable/Register_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_monstermmorpg"
android:background="#null"
android:src="#drawable/Login_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_1"
android:background="#null"
android:src="#drawable/bg_pokemonpets_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_2"
android:background="#null"
android:src="#drawable/Register_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_pokemonpets"
android:background="#null"
android:src="#drawable/Login_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
</LinearLayout>
I think simply you can use a GridView
in the layout aspect
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".Pokemon"
android:background="#color/background_floating_material_dark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightsum="2"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation:vertical
android:weightsum="3"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_monstermmorpg_1"
android:background="#null"
android:src="#drawable/bg_monstermmorpg_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_monstermmorpg_2"
android:background="#null"
android:src="#drawable/Register_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/login_monstermmorpg"
android:background="#null"
android:src="#drawable/Login_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation:vertical
android:weightsum="3"
android:layout_weight="1">
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_pokemonets_1"
android:background="#null"
android:src="#drawable/bg_pokemonpets_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/register_pokemonets_2"
android:background="#null"
android:src="#drawable/Register_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/login_pokemonpets"
android:background="#null"
android:src="#drawable/Login_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_1"
android:background="#null"
android:src="#drawable/bg_monstermmorpg_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_monstermmorpg_2"
android:background="#null"
android:src="#drawable/Register_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_monstermmorpg"
android:background="#null"
android:src="#drawable/Login_monstermmorpg_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_1"
android:background="#null"
android:src="#drawable/bg_pokemonpets_button_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/register_pokemonets_2"
android:background="#null"
android:src="#drawable/Register_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/login_pokemonpets"
android:background="#null"
android:src="#drawable/Login_pokemonpets_land"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
/>
</LinearLayout>
</LinearLayout>
The trick here is to use one LinearLayout as parent with a weightSum of 4 and orientation vertical. Then use 3 LinearLayout childs with a weightSum of 2, orientation horizontal and a weight of 2 for the first one and 1 for the second and third one. Inside these LinearLayout put 2 ImageButton with weight of 1.
If you want an example tell me but i think that i was clear.
P.s. all the layout_width and layout_height have to be match_parent
First you need a horizontal LinearLayout with a weight sum of 2.
Inside it, should be 2 vertical LinearLayouts with weight sums of 4, and weights of 1 each.
Inside those two layouts, add your 3 image buttons. Top has a weight of 2, others have a weight of 1
Using layout weight can be a good solution.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button05"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button04"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/Button03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I need to do an layout in which 4 images are shown in a box in different sizes using XML.
The box is a linearLayout with a fixed height 300dp and fill_parent in the width. It is not a Requirement to do this using a LinearLayout.
I tried to do it using weights and weightsum, but there was no success.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_margin="10dp" >
<ImageView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/image1" />
<ImageView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:src="#drawable/image2" />
<ImageView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:src="#drawable/image3" />
<ImageView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="2"
android:src="#drawable/image4" />
</LinearLayout>
Here an example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="2">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:weightSum="2">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView3"
android:layout_weight="1" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView4"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I am developing simple Android application. Here is the mockup of the layout I want to create (just to give you an idea).
On both sides there will be 4 pictures with words.
What would be the best way to do that? Here is what I have so far. Is that OK or is there any better way to do that?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#B36E106F"
android:orientation="horizontal"
android:baselineAligned="false"
tools:context=".AddRoute" >
<RelativeLayout
android:id="#+id/add_left_column"
android:layout_width="0dip"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#0098FF" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/abc" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_toRightOf="#+id/imageView1"
android:text="From" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_marginTop="48dp"
android:layout_toLeftOf="#+id/textView1"
android:src="#drawable/abc" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:layout_marginTop="54dp"
android:src="#drawable/abc" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView3"
android:layout_marginTop="47dp"
android:src="#drawable/abc" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/add_right_column"
android:layout_width="0dip"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:layout_margin="5dp"
android:background="#0098FF" >
</RelativeLayout>
</LinearLayout>
you will love this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/left"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="fill_parent"
android:background="#drawable/abc_menu_dropdown_panel_holo_light">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:background="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
<TextView
android:text="hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:background="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
<TextView
android:text="hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:background="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
<TextView
android:text="hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:background="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
<TextView
android:text="hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="fill_parent"
android:background="#drawable/abc_spinner_ab_focused_holo_dark">
</LinearLayout>
</LinearLayout>
I am using the layout_weight trick to make the left linearLayout and right linearlayout to be the same width.
what you need to do is modify the style, backgournd, margin and padding.
reading the google android docs won`t get you pregnant,so do more reading.
google design guide for linearLayout and layout_weight
i would do it like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#B36E106F"
android:baselineAligned="false"
android:orientation="horizontal"
tools:context=".AddRoute" >
<LinearLayout
android:id="#+id/add_left_column"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="0.5"
android:background="#0098FF"
android:orientation="vertical" >
<!-- Images here -->
</LinearLayout>
<LinearLayout
android:id="#+id/add_right_column"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="0.5"
android:background="#0098FF"
android:orientation="vertical" >
<!-- Images here -->
</LinearLayout>
</LinearLayout>
LinearLayout is a lot faster than RelativeLayout, at least if you use relative layouts features like alignToRightOf and similar methods.
But as your not using any features, why using it at all?
besides that you should change your weight to 0.5 as you want them to split the space equally. 100% => 1 except if you set a different weightSum
Since the number of the pictures on the both sides are determined. You can use a Horizontal LinearLayout with two Vertical LinearLayout inside it. And use the layout_weight attribute to let them split the parent layout equally. Like this:
<?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="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Put your image and textView in the 8 horizontalLinearLayout.
Then if the number of images is determined during the runtime, you can try staggereGridView.
In my android application I want to design the layout like blow
I have the four separate images like below
please anyone help me in this how to design this layout. Thanks in advance
You can try this..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image2" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image4" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image3" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
// try this
<?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="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.75">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
To achieve this you need to have 5 set of image. One is default and other four will be like
So onclick of the image you need to switch the image with animation.