Develop Reference

Centralise last row of GridView [duplicate]

This question already has answers here:
Center-align items in Gridview
(2 answers)
Closed 4 years ago.
I have a dynamic GridView which is supposed to display data fetched from the server. The length of this data is variable. I have set android:numColumns="4". Now, if the length of the data is divisible by 4, then my layout looks like:
which is how it's supposed to be. But, if the length of the data is not divisible by 4 but is even (of the form 4k+2), then the layout looks like:
I had a look at this StackOverflow question and a lot of people suggested insertion of dummy elements to trick the GridView into leaving empty space. This seemed like a hack but I did achieve the layout I wanted:
Now, the problem arises when the length of the data is odd. The layout I get by default looks like:
What I would like is to get something like this:
Notice that the previous workaround will not work here since there isn't a complete extra cell where a dummy could be inserted.
One solution I could come up with was to change the number of columns to 7 and replace every alternate cell with a dummy node, except for the last row where the first cell is a dummy too. This gave me something like:
Even after getting rid of the horizontalSpacing, these cells are too far apart, and the code readability has been severely compromised. Now, I am not looking for workarounds where the size of dummy cells could be reduced. Instead, I would like to get rid of the dummy cells as well because that's not an efficient way to do this, in my opinion.
I have gone through the documentation for GridView where I could not find anything related to my problem. I have also looked at this and this StackOverflow questions in addition to the one linked above but none of them seem to have a valid answer. I also found this GitHub repository where the author claims to have fixed this, but I could not reproduce it.
I would be happy to provide code snippets from my project, but I don't think they'll be useful because:
I'm looking for a generic solution, not specific to my particular case.
My project is not as simple as placing alphabets in a GridView and it includes a lot of extra details which are not relevant to this problem and hence have been removed in order to avoid confusion.

Below linear layout file dynamically changes like the grid layout. You can try this when grid layout is not supported for your requirement. You can find the pattern and create any kind of alignment with this weightSum and layout_weight attribute which are dynamically changing according to android devices.
**I removed some android:layout_width="match_parent"
android:layout_height="match_parent" attributes in this code because maximum word count exceeds. please put this two attribute in all missing places in linear layout tags.
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="6">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="5">
<!-- first row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="5">
<LinearLayout
android:orientation="vertical"
android:layout_weight="4">
<!-- second row -->
<LinearLayout
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="3">
<!-- third row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="vertical"
android:layout_weight="2">
<!-- fourth row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<!-- fifth row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="3">
<!-- 1st column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="A"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="B"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="C"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<!-- fourth column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="D"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<!-- sixth row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="2"
android:background="#color/colorPrimaryDark">
<!-- first column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="U"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#color/colorAccent">
<!-- second column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="V"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:background="#color/colorPrimary">
<!-- third column -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="W"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

ScrollView is not working inside the FrameLayout

The Below is my code i am not able to scroll the layout looking weird when i put scrollview
<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"
android:background="#0099cc"
tools:context="willapp.stpl.com.willapp.util.ActivityPrintView">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fillViewport="true"
android:orientation="horizontal">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rootLayout">
<LinearLayout
android:id="#+id/table1heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select executer's relationship"
android:id="#+id/txtHeading"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp"
android:id="#+id/mainactivity_layoutName"
android:layout_below="#+id/table1heading"
android:layout_centerVertical="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainactivity_txtLabelName"
android:text="Full Name:"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1">
</View>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainactivity_txtValueName"
android:text="Sssdadaad"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/mainactivity_layoutLine1"
android:padding="5dp"
android:layout_below="#+id/mainactivity_layoutName"
android:layout_centerVertical="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainactivity_txtLabelLine1"
android:text="Address Line1:"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1">
</View>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainactivity_txtValueLine1"
android:text="Sssdadaad"/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
</FrameLayout>

Inside ScrollView try to use LinearLayout instead of RelativeLayout.
Something like this:
<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"
android:background="#0099cc"
tools:context="willapp.stpl.com.willapp.util.ActivityPrintView">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fillViewport="true"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
// and here your main Relative layout
</LinearLayout>
</ScrollView>
</FrameLayout>

Linear Layout with Weights and Scroll View

I'm trying to create a responsive layout using weights but I also need to use a scroll view in this case.
This is my code at this moment:
<RelativeLayout 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=".EncyclopediaFragment">
<!--Linear Container-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<!--Title Box-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="20"
android:orientation="horizontal"
android:weightSum="100">
<!--Empty Space-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5">
</LinearLayout>
<!--Text Box-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="95">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/encyclopedia_mosntersLabel"
android:gravity="center"
android:textAlignment="viewStart"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40">
</LinearLayout>
</LinearLayout>
but it needs to be like this.
That layout is suppose to be responsive with weights but at the same time I need to make it possible to scroll.
So my question is: how can I create a layout responsive with weights and at the same time a layout that can scroll down, just like in the picture?

If you have a determined number of 6 Monsters and 8 Towers, here is how you should organize your layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Monsters"/>
<!-- the following LinearLayout should be repeated twice for 6 Monsters -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<MonsterView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Towers"/>
<!-- the following LinearLayout should be repeated twice for 6 Towers -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
...
<!-- attention here for two Towers in the last row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TowerView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>

The content inside your ScrollView should use wrap_parent, and if you want to stretch the content inside it set android:fillViewport="true". Try this:
<RelativeLayout 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=".EncyclopediaFragment">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Linear Container-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>

<RelativeLayout 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=".EncyclopediaFragment">
<!--Toolbar-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Linear Container With Weights-->
</RelativeLayout>
</ScrollLayout>
</RelativeLayout>

Remove Strange Space between RecyclerView Items

I am newbie to android development and learning it to my own. I have a very strange problem of having strange space that comes in between every item of my recycler view. I have the following:
My recycler view is vertical with grid view layout of 2 spans(columns). What I have been trying is:
Code for Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/size_five"
android:layout_marginRight="#dimen/size_five"
android:layout_marginTop="#dimen/size_fifteen"
android:background="#color/blackColor"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
<LinearLayout
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="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/lowerline"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="15"
android:background="#color/hotpinkColor"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/size_ten">
<TextView
android:id="#+id/album_title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="left"
android:text="Album Title"
android:textColor="#color/whiteColor"
android:textSize="#dimen/size_eight"
android:textStyle="bold"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/size_ten"
android:layout_weight="5"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/downloader"
android:layout_width="#dimen/size_thirty_six"
android:layout_height="#dimen/size_thirty_six"
android:layout_centerInParent="true"
android:src="#drawable/donwloaderimager"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/setteraswall"
android:layout_width="#dimen/size_fourty"
android:layout_height="#dimen/size_fourty"
android:layout_centerInParent="true"
android:src="#drawable/setteras"/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Screen Shot
The Black space is showing the extra strange space that I want to remove.

Change:
<LinearLayout
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="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
to
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="50">
<ImageView
android:id="#+id/album_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/blackColor"
/>
</LinearLayout>
That is change the height of the second parent linear layout to wrap_content

How can I achieve this layout in Android?

I want to create this layout where there are three equal ImageViews in a linear layout with layout_weight = 1.0 each. I just want to put two circular images on the inner edges aligned center vertically in android. Maybe I cant achieve this in XML or maybe yes. Please help me achieving this properly.

Try this way,hope this will help you to solve your problem.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:background="#android:color/white">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/black">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/white">
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="right">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="left">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#123456"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#654321"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="30dp"
android:src="#android:drawable/alert_dark_frame" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:src="#android:drawable/alert_light_frame" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
</FrameLayout>
</LinearLayout>