android- half image background gets black - android

i have image views in my Dialog Layout, But Half of Two Of Them Gets Black when running (All Images Are png Format)
Here Is the XML layout Code for this part:
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="#dimen/_40sdp"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/_72sdp"
android:divider="#drawable/linearspace"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:showDividers="middle" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/staroff" />
<ImageView
android:id="#+id/star1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/staron" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/staroff" />
<ImageView
android:id="#+id/star2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/staron" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/staroff" />
<ImageView
android:id="#+id/star3"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:src="#drawable/staron" />
</RelativeLayout>
</LinearLayout>
the code for all 3 images are the same but just one of them looks fine.

Related

3 images next to each other

I got in my android app, 3images put like this.
first image and second image below each other, and third image next to them.The problem I have is i get from server side different images, and different sizes. How can I organize them, so that they look nicely on screen.
<LinearLayout
android:paddingTop="5dp"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image1"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<View android:background="#android:color/white"
android:layout_width="2dp"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image2"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<View android:background="#android:color/white"
android:layout_width="2dp"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image3"
android:src="#drawable/logo"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Screenshot edited as some wanted to take a look:
1 and 2 images on left, 3rd on side.
https://s30.postimg.org/bs6m2vtfl/Screen_Shot_2017_02_07_at_4_55_25_PM.png
As your question not clear about the layout and responsive design. The answer as per your added image:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_spare_request"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/imageView"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:scaleType="centerCrop"
android:src="#drawable/bob"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="5dp"
android:id="#+id/imageView2"
android:scaleType="centerCrop"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:src="#drawable/bob"
android:layout_alignParentTop="true"
android:layout_toStartOf="#+id/imageView" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="5dp"
android:id="#+id/imageView3"
android:layout_marginEnd="5dp"
android:layout_marginStart="5dp"
android:src="#drawable/bob"
android:scaleType="centerCrop"
android:layout_below="#+id/imageView2"
android:layout_toStartOf="#+id/imageView"
android:layout_alignBottom="#+id/imageView"/>
</RelativeLayout>
Output:
you can try simple layout, Layout nesting is not really a good approach you should use like this
<LinearLayout android:paddingTop="5dp"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:weightSum="3"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/image1"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/image2"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/image3"
android:layout_weight="1"
android:src="#drawable/logo"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

I am adding three image button and I want it to be in bottom center so that it suitable for all device

I have three ImageButton objects. I don't know how to make it suitable for
all device when I'm using in big screen phone the button coming in
left side please help. I want to set it in bottom and in the middle for all small and big device
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.nmohdibraralam.mainmenu.Drawer"
tools:showIn="#layout/app_bar_drawer">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/img"
android:background="#drawable/niral13"/>
<ImageView
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_marginLeft="60dp"
android:layout_marginTop="30dp"
android:id="#+id/img1"
android:layout_gravity="top"
android:background="#drawable/niral1"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="30dp"
android:gravity="center_vertical"
android:layout_alignParentBottom="true"
android:weightSum="3" >
<ImageButton android:layout_width="90dp"
android:layout_height="90dp"
android:scaleType="fitXY"
android:background="#drawable/round"
android:id="#+id/abtus"
android:src="#drawable/abuot"
/>
<ImageButton android:layout_width="85dp"
android:layout_height="85dp"
android:scaleType="fitXY"
android:background="#drawable/round"
android:id="#+id/menu"
android:src="#drawable/menu"
/>
<ImageButton android:layout_width="90dp"
android:layout_height="90dp"
android:scaleType="fitXY"
android:background="#drawable/round"
android:id="#+id/reg"
android:src="#drawable/rgtr"
/>
</LinearLayout>
</RelativeLayout>
You are using linearlayout and you can achieve this using weight.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
tools:context="com.example.nmohdibraralam.mainmenu.Drawer"
tools:showIn="#layout/app_bar_drawer" >
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/niral13" />
<ImageView
android:id="#+id/img1"
android:layout_width="190dp"
android:layout_height="190dp"
android:layout_gravity="top"
android:layout_marginLeft="60dp"
android:layout_marginTop="30dp"
android:background="#drawable/niral1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:gravity="center_vertical"
android:weightSum="3" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageButton
android:id="#+id/abtus"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
android:background="#drawable/round"
android:scaleType="fitXY"
android:src="#drawable/abuot" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageButton
android:id="#+id/menu"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_centerInParent="true"
android:background="#drawable/round"
android:scaleType="fitXY"
android:src="#drawable/menu" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageButton
android:id="#+id/reg"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_centerInParent="true"
android:background="#drawable/round"
android:scaleType="fitXY"
android:src="#drawable/rgtr" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

Android - Fitting 6 ImageButtons to layout

I've been having a huge problem with fitting 6 image buttons to one screen.
I have tried Intellij and ADT but came up with nothing. I've also used two methods and played around them. One of them was inserting linear layouts to relative layout and inserting the image buttons inside them. This seemed well in the first place, however, i got bad results on big screens. The other method was to use regular alignment methods in xml but this gave me a lot worse results and I'm really stuck right now. I think I'm going to go with the first method but I want to get a good result since this is my senior project. You can find the two methods below. Can you help me what I'm doing wrong? Thank you very much.
---EDIT---
My intent is 3 lines, 2 buttons at each line. And screenshots are below. I have nexus 7 2013 and galaxy s2, and the results are similar to the ones below, so I assume the results below are correct.
This is the picture for 1st method:
This is the picture for 2nd method:
---END OF EDIT---
First method (inserting image buttons to 3 linear layouts in relative layout):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="390dp"
android:layout_alignParentBottom="true" android:layout_alignParentStart="true">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/apu"
android:scaleType="fitCenter"
/>
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/lms"
android:scaleType="fitCenter"
/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" android:layout_alignParentStart="true"
android:layout_marginTop="140dp" android:layout_marginBottom="255dp" android:id="#+id/linearLayout">
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/mail"
android:scaleType="fitCenter"/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/sca"
android:scaleType="fitCenter"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="119dp" android:layout_alignTop="#+id/linearLayout"
android:layout_alignParentStart="true" android:layout_marginBottom="140dp" android:id="#+id/linearLayout2">
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/library"
android:scaleType="fitCenter"/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/rating"
android:scaleType="fitCenter"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignTop="#+id/linearLayout2" android:layout_alignParentEnd="true"
android:layout_marginTop="127dp">
</LinearLayout>
Second method (using alignments):
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/apu"
android:scaleType="fitCenter"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lms"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true" />
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/mail"
android:scaleType="fitCenter"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sca"
android:scaleType="fitCenter"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
<ImageButton
android:id="#+id/libraryButton"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/library"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rating"
android:scaleType="fitCenter"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
/>
// Try this way,hope this will help you to solve your problem...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/apuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/mailButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/scaButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>
Check out this code, please comment if it works
<LinearLayout
android:id="#+id/grd_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/apuButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/mailButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/scaButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="33"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
You'll want to use your first method with linear layouts and add in weights so that it doesn't become separated out like that. Here is the modified code of yours that should fix that issue (you'll want to create bigger images for each device so that it comes out looking a bit cleaner too).
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.test.MainActivity$PlaceholderFragment" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/apuButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/apu" />
<ImageButton
android:id="#+id/lmsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/lms" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/mailButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/mail" />
<ImageButton
android:id="#+id/scaButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/sca" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/libraryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/library" />
<ImageButton
android:id="#+id/ratingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/rating" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="127dp"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>

Android ImageView doesn't fit with larger screens

I'm new to the Android development. I tested my android programme from the (eclipse)android emulator but when I run the same program in the SAMSUNG phone that has large screen and from the tablet my ImageView doesnt fit with their screen.
<FrameLayout 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"
tools:context=".CompareActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/topbar" />
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#160203" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</TabHost>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/crdt" />
<ImageButton
android:id="#+id/registerbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="38dp"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:src="#drawable/green" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/savings" />
<ImageButton
android:id="#+id/blubutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/registerbutton"
android:layout_alignTop="#+id/imageView3"
android:layout_marginTop="18dp"
android:background="#android:color/transparent"
android:src="#drawable/blue" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView3"
android:adjustViewBounds="true"
android:src="#drawable/pl" />
<ImageButton
android:id="#+id/redbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blubutton"
android:layout_alignTop="#+id/imageView4"
android:layout_marginTop="17dp"
android:background="#android:color/transparent"
android:src="#drawable/red" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView4"
android:adjustViewBounds="true"
android:src="#drawable/homlons" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView5"
android:adjustViewBounds="true"
android:src="#drawable/fd" />
<ImageButton
android:id="#+id/orbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/redbutton"
android:layout_alignTop="#+id/imageView5"
android:layout_marginTop="26dp"
android:background="#android:color/transparent"
android:src="#drawable/orange" />
<ImageButton
android:id="#+id/pubutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/orbutton"
android:layout_alignTop="#+id/imageView6"
android:layout_marginTop="18dp"
android:background="#android:color/transparent"
android:src="#drawable/purple" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>
The Layout is set to wrap content which will leave empty space in the larger screen. Notify the layout such that it takes all the space.
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/crdt" />
<ImageButton
android:id="#+id/greenbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="38dp"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:src="#drawable/green" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:adjustViewBounds="true"
android:alignParentBottom="true"
android:src="#drawable/savings" />
</RelativeLayout>
use android:background="#drawable/savings"
You can change your imageView XML as the below:
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/crdt" />
or change it by code:
imageView.setScaleType(ScaleType.FIT_XY);

Implementing this Layout

I want to achieve this layout:
The nearest that i have been able to come to is this:
The layout so far is this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:baselineAligned="true"
android:orientation="vertical"
android:weightSum="4" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:paddingBottom="8dip" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#null"
android:scaleType="fitCenter"
android:src="#drawable/myimage" />
</LinearLayout>
</LinearLayout>
How to design the above layout ?
create three linearlayouts with orientation set to vertical and equal layout weights. the child views of each linear layouts must also have equal layoutweights. set gravity of the first and third linearlayouts to be center_vertical.
This layout actually works as per your expectations:
<?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"
>
<!-- Center layout -->
<LinearLayout
android:id="#+id/llCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_centerInParent="true"
android:paddingBottom="8dp"
android:orientation="vertical"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
<!-- Left layout -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#id/llCenter"
android:paddingBottom="8dp"
android:orientation="vertical"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
<!-- Right layout -->
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/llCenter"
android:paddingBottom="8dp"
android:orientation="vertical"
>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
</RelativeLayout>
Result:
Why don't you leave the unnecessary layouts...??
And use the following...
<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="horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="55dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="75dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="95dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="55dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="75dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="95dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="100dp"
android:layout_height="55dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="75dp"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="95dp"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
What about extending ViewGroup?
If you check the documentation there is an example of how you should create your custom children container.
Basically in your layout you have the following rules:
The gravity of the children is centered vertically
For the odd columns the middle element overlap with the line that goes from left to right centered vertically
For the even columns you have got n/2 elements over that line and the remaining ones (n/2) below the same one
If you are able to do that implementing a custom layout, at the cost of more time for development, you'll have a better result and it doesn't matter the number of elements that you want to add... you'll have a layout that can manage different situations.
I suggest you to have a look at custom attributes as well, in order to allow the integration of the attributes that you'll need directly into the XML declaration.

Categories

Resources