Develop Reference

Android multiple and dynamically images aligned

Right now, I have a RecyclerView and multiple CardView to show my items.
My CardView have a RelativeLayout where I add some ImageViews (in this case 3, but can be more).
Each of my items will have a list of images to show, lets suppose #item1 have Facebook, Twitter and Youtube, but #item2 just have Facebook and Youtube images.
How should I align the images? If I just remove Twitter image, I need to update layout_toLeftOf of my Facebook image to Youtube image.
I think I shouldn't do this kind of logic to all my items, it will be over power...
Example image:
https://i.stack.imgur.com/uJZTi.png
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/card_height"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/coverImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
/>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end|top">
<ImageView android:background="#null"
android:id="#+id/facebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/facebook_icon"
android:layout_toLeftOf="#+id/twitter"/>
<ImageView android:background="#null"
android:id="#+id/twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/twitter_icon"
android:layout_toLeftOf="#+id/youtube"/>
<ImageView android:background="#null"
android:id="#+id/youtube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/youtube_icon"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:background="#android:drawable/screen_background_dark_transparent"
android:orientation="vertical">
<TextView
android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:textSize="#dimen/text_size"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</LinearLayout>

You should use LinearLayout with Horizontal Orientation !
<LinearLayout
...
android:orientation="horizontal">
//ImageViews in priority order
</LinearLayout>

It's better to work with LinearLayout in this case and use layout_alignParentRight and layout_alignParentTop="true" instead of android:layout_gravity="end|top" like below :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true">
<ImageView android:background="#null"
android:id="#+id/facebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/facebook_icon"
android:layout_weight="1"/>
<ImageView android:background="#null"
android:id="#+id/twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/twitter_icon"
android:layout_weight="1"/>
<ImageView android:background="#null"
android:id="#+id/youtube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/youtube_icon"
android:layout_weight="1"/>
</LinearLayout>

How to add a ScrollView without changing the visualization of the other elements?

Currently I am having 2 pictures per row (loaded via Picasso) with a checkbox at the top right corner of each of them. When I try to add a Scrollview, the position of the checkboxes get changed and there is an extra row that appears. how can I add it and keep the rest of the visualization in the correct order? here is my code so far (for a row):
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fadeScrollbars="false"
android:fillViewport="true"
android:orientation="vertical">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLay"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/img1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp" />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text=""
android:background="#android:color/white"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/img2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1" />
<CheckBox
android:id="#+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text=""
android:background="#android:color/white"/>
</RelativeLayout>
</LinearLayout>

Set the properties of your UI Elements as Right and Left of parent UI element.
android:layout_below="#id/name"
android:layout_toRightOf="#id/description"
android:layout_toLeftOf="#id/description"
Edit:
I make this Example Code for you: This is not the Exact, you can take idea from this.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:id="#+id/parentLayout"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="0dp"
android:layout_toRightOf="#+id/parentLayout"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:id="#+id/img1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="10dp" />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text=""
android:background="#android:color/white"/>
</RelativeLayout>
Check this Link: Layout File - Positioning Item to Right of Another Item (Android)

How to align the layouts properly in Android?

I want to align a scrollable TextView above a RelativeLayout) with 3 buttons at the bottom and a SeekBar above this buttons. The problem with my code is that the RelativeLayout takes the entire screen.
Here's my code:
<?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"
android:background="#drawable/images"
android:orientation="vertical"
tools:context="com.example.acer.aartisangrah.ekdanta">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView9"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:enabled="true"
android:focusable="true"
android:longClickable="true"
android:textIsSelectable="true" />
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/b9"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:onClick="decrease"
android:background="#drawable/zoomout1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:id="#+id/b10"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="increase"
android:layout_marginRight="10dp"
android:background="#drawable/zoomin1"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/button19"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/play"/>
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:layout_above="#+id/b9"
android:configChanges="orientation|screenSize"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/b10"
android:layout_alignRight="#+id/b10"
android:layout_alignEnd="#+id/b10"
android:layout_weight="1"/>
</RelativeLayout>
</LinearLayout>
Check this image

Change the height of the ScrollView to android:layout_height="wrap_content"
and remove the android:layout_weight="1"

The following layout should do the job. Firstly, there was a circular dependency in height among <RelativeLayout> and <SeekBar>, so I fixed the height of <SeekBar>. Secondly, the android:layout_alightParentBottom="true" was messing with the layout manager, so removed that. Finally, moved the <SeekBar> above the buttons to easily manage the layout description. Here's the updated code:
<?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"
android:background="#drawable/images"
android:orientation="vertical"
tools:context="com.example.acer.aartisangrah.ekdanta">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView9"
android:enabled="true"
android:focusable="true"
android:longClickable="true"
android:textIsSelectable="true" />
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<SeekBar
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/seekBar"
android:configChanges="orientation|screenSize"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/b10"
android:layout_alignRight="#+id/b10"
android:layout_alignEnd="#+id/b10"/>
<Button
android:id="#+id/b9"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:onClick="decrease"
android:layout_below="#id/seekBar"
android:background="#drawable/zoomout1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:id="#+id/b10"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:onClick="increase"
android:layout_below="#id/seekBar"
android:layout_marginRight="10dp"
android:background="#drawable/zoomin1"/>
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/button19"
android:layout_below="#id/seekBar"
android:layout_centerHorizontal="true"
android:background="#drawable/play"/>
</RelativeLayout>
</LinearLayout>

Your problem is you set ScrollView android:layout_height="0dp" and android:layout_weight="1"
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
and
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
so ScrollView takes nothing for hight
Edit
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
You can set android:layout_weight="1" as you want ratio between ScollView and RelativeLayout. Hare both will get half(1/2) of screen.

android layout center and bottom

In my layout i want to display two imagebuttons in the center and a my amountmeter below it on the bottom, all centered vertically, i have tried many ways but cant seem to find that perfect layout. all the component align vertically and center but it makes my amountmeter small and not full width of the screen.
How it should be
how it is now
updated code
current layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/purchase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/round_button"
android:src="#drawable/ic_cart" />
<ImageButton
android:id="#+id/sell"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/round_button"
android:src="#drawable/ic_sell" />
<com.example.mobile.view.AmountMeterView
android:id="#+id/mobileAmount"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center|bottom"
android:padding="4dp" />

COPY PASTE BELOW CODE
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/purchase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/sell"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/purchase"
android:layout_centerHorizontal="true"
android:src="#drawable/ic_launcher" />
<com.example.mobile.view.AmountMeterView
android:id="#+id/mobileAmount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/sell"
android:padding="4dp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
AFTER THAT
android:background="#drawable/round_button"
android:src="#drawable/ic_sell"
android:background="#drawable/round_button"
android:src="#drawable/ic_cart"
PUT THIS LINE TO YOUR TWO IMAGE BUTTONS SURELY IT WILL WORK FOR YOU

One Linear layout is enough for this. Do not put your AmountMeterView into it's own LinearLayout.
Just make one Linear layout (vertical), and put all three elements in there. Gravity center_horizontal for all elements.

Try in this way hope this will help you
<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="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/purchase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/round_button"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/sell"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/round_button"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical" >
<com.example.mobile.view.AmountMeterView
android:id="#+id/mobileAmount"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp" />
</LinearLayout>
</LinearLayout>

android linearlayout baseline align

I have 3 imageviews but since they overlap i wont make them clickable, i want make buttons on top of each imageview(but smaller).
I know in RelativeLayout there is easy way out using align_baseline but it is very important that i use LinearLayout for these images because they use layout_weight
And its important that button is connected with imageview, not just appearing on top of it
And here is my code it might help
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
...
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/twitter"
android:layout_alignParentLeft="true"
android:orientation="vertical"
android:weightSum="3"
android:layout_marginBottom="25dp"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imgDis"
android:layout_weight="1"
android:layout_width="300dp"
android:layout_height="120dp"
android:layout_marginBottom="-20dp"
android:background="#drawable/img1" />
<ImageView
android:id="#+id/imgCal"
android:layout_weight="1"
android:layout_width="300dp"
android:layout_height="120dp"
android:layout_gravity="right"
android:layout_marginBottom="-25dp"
android:background="#drawable/img2"
android:paddingLeft="25dp" />
<ImageView
android:id="#+id/imgDe"
android:layout_weight="1"
android:layout_width="300dp"
android:layout_height="120dp"
android:background="#drawable/img3" />
</LinearLayout>
...
</RelativeLayout>

put the image in another linear layout vertical and place that layout inside your mainlayout and give the wieght to this linearlayout instead of the image

Here is your answer, while using weight you must define 0dp to height/width to view as per case.
You want Button on every Imageview something like below?
I tried, check below xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="25dp"
android:orientation="vertical"
android:weightSum="6" >
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="0.5"
android:text="button first" />
<ImageView
android:id="#+id/imgDis"
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="1.5"
android:background="#drawable/logo" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="0.5"
android:text="button first" />
<ImageView
android:id="#+id/imgCal"
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_gravity="right"
android:layout_marginTop="5dp"
android:layout_weight="1.5"
android:background="#drawable/logo"
android:paddingLeft="25dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="0.5"
android:text="button first" />
<ImageView
android:id="#+id/imgDe"
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="1.5"
android:background="#drawable/logo" />
</LinearLayout>
</RelativeLayout>