Develop Reference

Fill the width in landscape mode with two imageviews

I have this recyclerview, and the background is made with imageviews. I have these two situations in portrait and landscape. How do I fill the white space there with a new imageview or something with the same color?
And this is my xml:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true" />
<ImageView
android:id="#+id/home_imageview_background"
android:contentDescription="Background image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
Tried several ways, but I'm just not able to make this work. #+id/home_imageview_superbackground this is the imageview I want to put on the left of each background imageview to fill that space in the landscape. Thank you for the help.

Please try this one
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="match_parent"
android:src="#mipmap/ic_launcher"
android:scaleType="fitXY"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/home_imageview_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:scaleType="fitXY"
android:contentDescription="Background image" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
</RelativeLayout>
You can also use android:scaleType="centerCrop".
Hope this will help you..If still you face problem please inform me...

<ImageView
android:layout_width="match_parent"
.... />
Also you can use scaleTypeattribute

First, the fill_parent is deprecated times ago, you should use match_parent instead. Then, you have also to use scaleType when you're working with ImagesView to define how the image looks on the screen. In your case, working with scaleType = "fitXY" solve your problem.
How your code should be :
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:layout_alignParentStart="true" />
<ImageView
android:id="#+id/home_imageview_background"
android:contentDescription="Background image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>

Try this code
<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/your_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:scaleType="fitEnd"
android:layout_alignParentStart="true"
android:background="#drawable/green_gradiant"
android:padding="10dp" />
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:text="Hello Three"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</FrameLayout>
And create this drawable file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient android:angle="0"
android:startColor="#64FFDA"
android:centerColor="#4464FFDA"
android:endColor="#0064FFDA"/>
</shape>
</item>
</selector>

Align pictures top center, bottom right and bottom left

I'm trying to align 3 pictures in a LinearLayout so that one is centered at the top, another is at the bottom aligned to the left side and the last is at the bottom aligned to the right side. Pretty much like a pyramid. How could I do this? Can you provide an example?
i.e
X
X X

Use this one:
<?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="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

It will be more flexible if you do it in RelativeLayout but if you want to do it in LinearLayout here is the solution:
<?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="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

You need a RelativeLayout, not a LinearLayout.
Image A must specify the attribute
android:layout_alignParentTop="true".
Image B must specify the attributes
android:layout_alignParentBottom="true"
and
android:layout_alignParentLeft="true".
Image C must specify the attributes
android:layout_alignParentBottom="true"
and
android:layout_alignParentRight="true"

Why doesn't my linear layout match my parent height in listview?

I have the following code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/list_view_layout_margin"
android:paddingRight="#dimen/list_view_layout_margin"
android:background="#color/yellow">
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/gameNameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/game_list_text_size" />
<TextView
android:id="#+id/gameCreationDateView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textSize="#dimen/small_text_size"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red"
android:orientation="horizontal" >
<Button
android:id="#+id/infoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<Button
android:id="#+id/deleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/delete" />
</LinearLayout>
</RelativeLayout>
The LinearLayout with id itemLinearLayoutView is the main layout that wrap everything in a row of listview. The problem I am having is that the second linear layout child does not take the height of the parent linear layout with id itemLinearLayoutView. Any solutions? or Problem with the code?

Your problem lies here:
android:layout_height="wrap_content"
This needs to be changed to "match_parent" in the LinearLayout which you want to be the parent's size. Also, you said
the second linear layout child does not take the height of the parent linear layout
These two layouts are not parents and children to one another. The parent is your RelativeLayout and both of your LinearLayouts are equivalent children of that RelativeLayout. Maybe this will help you debug any further problems you encounter.

just change the layout height to match parent . problem will be resolved.
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
// use match_parent instead of wrap_content
android:layout_height="match_parent"
android:orientation="vertical" >

the layout needs to be nested within the first linear layout to take the parameters of it, and the value of the layout height needs to be changed. Code as Follows.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/list_view_layout_margin"
android:paddingRight="#dimen/list_view_layout_margin"
android:background="#color/yellow">
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/gameNameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/game_list_text_size" />
<TextView
android:id="#+id/gameCreationDateView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textSize="#dimen/small_text_size"
android:textStyle="italic" />
<LinearLayout
android:id="#+id/LinearLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red"
android:orientation="horizontal" >
<Button
android:id="#+id/infoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<Button
android:id="#+id/deleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/delete" />
</LinearLayout>
</LinearLayout>

<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent" <!-- you should use match_parent here -->
android:orientation="vertical" >

// try this way i have used LinearLayout as parent rather than RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="#dimen/list_view_layout_margin"
android:paddingRight="#dimen/list_view_layout_margin"
android:background="#color/yellow">
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/gameNameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/game_list_text_size" />
<TextView
android:id="#+id/gameCreationDateView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textSize="#dimen/small_text_size"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="right"
android:background="#color/red"
android:orientation="horizontal" >
<Button
android:id="#+id/infoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<Button
android:id="#+id/deleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/delete" />
</LinearLayout>
</LinearLayout>

Unable to make all UI components appear in RelativeLayout

I want a RelativeLayout based android UI that looks like the below mock graphic:
Below is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- surface view that contains camera preview , and seats above #+id/linearLayoutToolbar -->
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- LinearLayout that contains toolbar that is divided into 3 sections horizontally -->
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/surfaceViewBarcodeScanner"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</RelativeLayout>
I used Eclipse GUI palette and my own editing , however the output was not what I expected, the SurfaceView seems to covering all the screen, the LinearLayout at the bottom does not appear.
Snapshot of my current result on Galaxy S3 device:
Any help will be appreciated, Thanks.

Could you please try out to modify your layout as the follows:
Define your SurfaceView and set it's layout_above value to the ID of the linear layout made in the previous step. Set the layout_alignParentTop to true.
Define your bottom linear layout and set the layout_alignParentBottom to true.
Smart code snippet with only the important parts:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/linearLayoutToolbar" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
I hope this will solve your problem.

you can use Linearlayout instead of Realtive Layout
<?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" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- inside elements -->
</LinearLayout>
</LinearLayout>
else you should use android:layout_above="#+id/linearLayoutToolbar" to your surfaceview
and remove android:layout_below attribute and add android:layout_alignParentBottom="true" to your toolbar view.

// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="2">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

How to add a scroll view to an entire activity?

I tried adding a scroll view around everything on an activity layout but it gave me an error saying it can only be placed around one thing.
My activity, has a title textview then an image, then a description text view, and you can not read the whole description because its to long and goes below the edge of my screen. How can I make the whoel thing scrollable?
My xml looks 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="vertical" >
<TextView
android:id="#+id/beerTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="40sp"
android:textStyle = "bold"
>
</TextView>
<ImageView android:id="#+id/image"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_margin="10dip"/>
<Button
android:id="#+id/buttonBrewery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
<Button
android:id="#+id/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="#+id/beerDEscriptionTitle"
android:textStyle = "bold"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="20sp"
android:text="Description"
></TextView>
<TextView
android:id="#+id/beerDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="15sp"
></TextView>
</LinearLayout>

Try this:
<?xml version="1.0" encoding="utf-8"?>
<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 and other stuff -->
</LinearLayout>
</ScrollView>

Wrap the LinearLayout (height is wrap_content) with SrollView (height is fill_parent).

The "one thing" is your LinearLayout. Just wrap that in a ScrollView and you will encapsulate the layout for the entire activity.
Additionally, if you want to wrap just one elemtnet in a ScrollView all you have to do is put that element in it's own layout, like a linear or relative layout, and then that becomes the one element of your ScrollView

just use this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/beerTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="40sp"
android:textStyle = "bold"
>
</TextView>
<ImageView android:id="#+id/image"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_margin="10dip"/>
<Button
android:id="#+id/buttonBrewery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
<Button
android:id="#+id/buttonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="#+id/beerDEscriptionTitle"
android:textStyle = "bold"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="20sp"
android:text="Description"
></TextView>
<TextView
android:id="#+id/beerDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textSize="15sp"
></TextView>
</LinearLayout>
</ScrollView>