Android gallery: stretching and overlapping thumbnails - android

I'm doing an Android gallery and I need to have the ImageView which shows a picture in full screen, and on top of it -meaning that it has to overlap the ImageView- the Gallery.
The problem is that now the ImageView occupies the portion that is not occupied by the Gallery, but I don't know how to achieve this.
This is my layout:
<?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:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/GalleryImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:scaleType="fitXY" />
<Gallery
android:id="#+id/GalleryThumbnails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/GalleryImage" />
</RelativeLayout>
Thanks a lot in advance!

You can use layout_alignTop=[Reference] to achieve that effekt.
Makes the top edge of this view match the top edge of the given
anchor view ID.
<ImageView
android:id="#+id/GalleryImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:scaleType="fitXY" />
<Gallery
android:id="#+id/GalleryThumbnails"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/GalleryImage" />
Proof that it works

Related

Eclipse Android Layout: Without dp-values?

If I want to have a Picture in the Center of my layout, I easily use: "Center Vertically" and "Center Horizontally". But now I want a picture to have it in the Center of the left side. But I don't want to use marginLeft=..dp. I want to work without dp. Is there a possibility like "Center Vertically" etc? Here is the code with dp-values. What can I use instead of MarginLeft"38dp"?
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:layout_marginLeft="41dp"
android:src="#drawable/rosezwei" />
</RelativeLayout>
If I understood correctly you want the image center at 25% of your screen width...
Alas Android has no percentage in XML, to do that you must use a LinearLayout to split your screen
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:layout_gravity="center"
android:src="#drawable/rosezwei" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"/>
</LinearLayout>
use
android:layout_gravity="left|center_vertical"
Will work inside a LinearLayout view.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="left|center_vertical"
android:src="#drawable/rosezwei" />
</LinearLayout >
Note that the LinearLayout is horizontal, so views can choose its VERTICAL position.

Relative Layout containing FrameLayout and few other components

firstly excuse me for terrible naming with the subject.
I have the following layout setup:
<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=".PersonDetails" >
<FrameLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/default_cover">
</ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</FrameLayout>
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
What i am trying to achieve is to have a banner (much like facebook cover that spans across the top of the screen). And have a thumbnail photo at the corner left of the banner.
The height of the banner should only takes up about 1/4 of the height of the screen. Since i would need the rest of the space for other components.
Immediately below the banner i would like to have a TextView (on the leftside) and a button on the rightside.
So far i can only able to put the thumbnail on top of the banner, but i don't know how to place it on the lower left (i could set it using marginTop but, i believe this is not the correct way of doing it).
Does anyone know how to achieve this? Thanks.
EDIT #1:
Here is the UI
From your description i think you want to make something like this:
I used a linearlayout with 2 layouts as content. Using the android:layout_weight attribute we can make the top layout take up 1/4th of the space, while the bottom layout has the rest to use.
Then to position the icon in the top layout we use alignParentBottom to make it stick to the bottom.
<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=".PersonDetails"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/bannerLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/coverImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/default_cover"></ImageView>
<ImageView
android:id="#+id/thumbImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="fitStart"
android:src="#drawable/fingerprint_ic" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3"
android:layout_margin="10dp">
<TextView
android:id="#+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="40dp"
android:text="Large Text"
android:textColor="#55FF55"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</LinearLayout>

Android Gallery Full SIze

I am trying to implement scroll type gallery for my app.(Just like the full size image browser we get on default android gallery.)
What I am getting
instead I want the gallery image to be displayed on the entire screen.
main.xml
<?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:background="#android:color/white"
android:orientation="vertical" >
<ImageView
android:id="#+id/left_arrow_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dip"
android:src="#drawable/arrow_left_disabled" />
<Gallery
android:id="#+id/gallery"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_toLeftOf="#+id/right_arrow_imageview"
android:layout_toRightOf="#+id/left_arrow_imageview"
android:scaleType="fitXY"
android:spacing="20dip" />
<ImageView
android:id="#+id/right_arrow_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dip"
android:src="#drawable/arrow_right_enabled" />
</RelativeLayout>
Try to set the main relative layout to fill_parent and the ImageView to match_parent.

Place view on top and between two views

Trying to figure out to overcome this little problem.
Below, on the left side, is a sample of the view that I'm trying to implement for an app. On the right side is the view that I'm ending up with.
In my xml mock up I've decided to use a RelativeLayout but I can't get the TextView to be centered between the top and bottom views.
For reference here's a represenation of my xml code:
<RelativeLayout
android:layout_width:"match_parent"
android:layout_height:"wrap_content">
<ImageView
android:id="#+id/BlackImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_alightParentTop="true"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="#+id/RedImage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_below="#+id/BlackImage"
android:layout_centerHorizontal="true"/>
<TextView
android:id="#+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/BlackImage"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Any idea what I'm missing, or how to change to get what I want?
try below link hope it will help you :-
TextView above Image view in a layout
Android listview item display text over image using array adapter
how to put text under image view
<?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" android:background="#drawable/tmp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/uph"
android:layout_marginTop="-10dp"/>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/propfile"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</LinearLayout>

Views overlapping in app widget layout

I am building an app widget and the layout is going to have a View aligned at the bottom of the widget, to hold a TextView and a ImageView, then a View above it to hold the main text. The problem with what I have is that is seems the "top" View is overlapping with the bottom View:
UPDATE
Now I'm thinking the "top" view is not overlapping the bottom view, but that something is cutting off the top of the image. Here is another screenshot:
As you can see, the text is being cutoff at the top of the bottom view, but the image is getting cut of as well. Here is a screenshot with the image not being scaled to 18dp:
I'm extremely confused.
This is the code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widgetLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="#dimen/widget_margin">
<RelativeLayout
android:id="#+id/widgetBgLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/bg_widget"
>
<RelativeLayout
android:id="#+id/widgetStatusLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingTop="10dp"
>
<TextView
android:id="#+id/widgetStatus"
style="#style/WidgetStatus"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
/>
<ImageView
android:id="#+id/widgetIcon"
android:src="#drawable/icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_above="#id/widgetStatusLayout"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/widgetTitle"
style="#style/WidgetTitle"
/>
<TextView
android:id="#+id/widgetText"
style="#style/WidgetText"
/>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
I figured it out. I had to set the height of the icon to a higher number (28dp). I don't think the icon is a true rectangle (I had someone else make the icons for me), which probably caused issues with the aspect ratio.

Categories

Resources