Develop Reference

How to add 3D drawable effect to layout in GridView?

I'm building a GridView that fills itself (with 'tiles') by using a custom GridAdapter. Now I'm trying to add a effect to each tile, the effect is shown in the red circle:
This is what I have now:
The layout file, tile.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="180dp"
android:layout_height="180dp"
android:background="#drawable/tile_background"
android:id="#+id/frameItem"
android:layout_weight="1">
<ImageView
android:id="#+id/tile_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scaleType="fitXY"
android:src="#drawable/big_image"
android:gravity="start"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="#+id/tile_title" />
<ImageView
android:id="#+id/image_small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tile_arrow"
android:layout_alignParentBottom="true"
android:layout_below="#+id/tile_image"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:padding="5px"
android:layout_margin="8dp"
android:adjustViewBounds="false" />
<TextView
android:id="#+id/tile_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:maxLines="1"
android:text="Categorie"
android:layout_marginTop="10px"
android:layout_marginBottom="10px"
android:gravity="start"
android:textColor="#color/purple"
android:textSize="20sp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:padding="5px"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10px" />
</RelativeLayout>
I literally have no idea how to implement the '3D effect' and if it is even possible.
I tried it with adding an image to the layout file. But that didn't work out for me, I couldn't get it right. It also felt like it wasn't the right way to do it.
Can someone help me?

I fixed it using 9-patch files. Using this online Nine-patch generator.

how to set images inside a layout on screen?

I need to put two images one below the other in the center of the screen. They need to be in the center. the images will keep changing depending on the code so how do i get the images to work on all screens without moving or the size increasing or decreasing?
I tried using grid view but it seems too much code for two images. it works but is there anything more efficient?

For this type of design i always create a center point on screen,check below code -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_centerHorizontal="true"
android:layout_above="#+id/center_point" />
<View
android:id="#+id/center_point"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<ImageView
android:id="#+id/image2"
android:src="#drawable/ic_launcher"
android:layout_below="#+id/center_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
it will surely works.
All the best

If u have always only 2 images, you can set it in xml file like that:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
First image centers in parent and the second one centers horizontal and also aligns bottom of the screen.
Good luck.

Here this code may help you.You must create one LinearLayout and set him vertical orientation and layout_gravity = center horizontal.After that create two image views which are automatic position in center of the screen one below other.I hope this will help you.Happy coding :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/image_view_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/image_view_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>

Make a vertical Linear-layout that contains both of your ImageViews and then set an equal layout_weight for both of them. Set the layout_centerInParent true for your Linear_layout
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/lock_layout_keypad"
android:orientation="vertical"
android:layout_centerInParent="true"
android:layout_marginBottom="4dp">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</LinearLayout>
You can remove android:layout_weight.

Overlap views in horizontal LinearLayout

I need to design a layout with five ImageViews in horizontal orientation.
I can reach my idea with a basic LinearLayout, but I want a design pattern like the following image:
Note: All ImageViews are in oval design.
Any ideas?

you can overlap items in a LinearLayout using negative margins, but they won't stack in that order.
you could use a RelativeLayout instead. you'd lay out the items from outside to inside to achieve the desired stacking order.
here's an example with a fixed width:
<RelativeLayout android:layout_width="150dp" android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_centerVertical="true" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_centerVertical="true"
android:layout_marginLeft="25dp" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_centerVertical="true"
android:layout_marginRight="25dp" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerHorizontal="true" android:layout_centerVertical="true" />
</RelativeLayout>
if you don't have a fixed-width container, you'll have to calculate the margins in code with this approach.
of course, if you don't have a fixed width, you'll need code of some sort anyway as there's nothing built into android that's really meant for this sort of thing.

You can use a RelativeLayout for this task. Here's an example:
<?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/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img1"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img4"
android:layout_marginRight="-18dp"/>
<ImageView
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img3"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img2"
android:layout_marginRight="-18dp" />
</RelativeLayout>
Note that here, the last ImageView is the one that will be on top of all others.

You are looking for developing a Carousel kind of widgets. You can refer any Carousel implementation in android. Many are available, you can refer one here
https://code.google.com/p/carousel-layout-android/

Android: fill relative layout height (item layout) inside ListView

I'm not able to make a View that fill the height of a RelativeLayout, which is the layout of ListView items. Here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/fill_the_height_please"
android:layout_width="15dp"
android:layout_height="match_parent"
android:background="#color/red"/>
<TextView
android:id="#+id/delivery_list_item_dest"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/fill_the_height_please"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="2dp"
android:text="Destinatario" />
<TextView
android:id="#+id/delivery_list_item_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/delivery_list_item_dest"
android:layout_below="#id/delivery_list_item_dest"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:text="Location" />
<ImageButton
android:id="#+id/delivery_list_item_mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="0dp"
android:src="#drawable/map_location"
android:background="#null" />
View with id fill_the_height_please not fill the item height. In figure below you can see the result (nothing is shown):
I'd like something like this:
ù
I have also try to change view layout as follows but not works anyway:
<View
android:id="#+id/fill_the_height_please"
android:layout_width="15dp"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:background="#color/red"/>
Please can you help to achieve my goal? Thank you.

One suggestion would be add layout_alignTop="#+id/delivery_list_item_mapBtn" and layout_alignBottom="#+id/delivery_list_item_mapBtn" to the View and make it always fit the image height.

Try changing
android:layout_toRightOf="#id/delivery_list_item_statusBtn"
to
android:layout_toRightOf="#id/fill_the_height_please"
You don't have delivery_list_item_statusBtn. But i see red part even without changing this. Try it and if it doesn't help please post code of your adapter.

Looking here it seems RelativeLayout has a bug in version 17 and lower. So i have change my layout as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:id="#+id/fill_the_height_please"
android:layout_width="15dp"
android:layout_height="match_parent"
android:background="#color/red"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:orientation="vertical" >
<TextView
android:id="#+id/delivery_list_item_dest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Destinatario"
android:layout_marginBottom="5dp" />
<TextView
android:id="#+id/delivery_list_item_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location" />
</LinearLayout>
<ImageButton
android:id="#+id/delivery_list_item_mapBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="0dp"
android:src="#drawable/map_location"
android:background="#null" />
</RelativeLayout>
A little bit more complex but works. However i leave the question unresolved in case someone find a solution using only a RelativeLayout

how to set TextView on ImageView in Android

i'm at learning stage of android. i want to set TextView on ImageView. i'm not getting point. I'll be thankful. Here's is my XML code.
<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"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="380dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#drawable/wf" />
<TextView
// what should i add here so that it can be visible on image view//
/>
</LinearLayout>

Thanks to all, Finally i got solution. i used FrameLayout to handle it.
Here is the code
<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"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="380dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#drawable/wf" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:textSize="100sp"
android:layout_marginTop="120dp"
android:layout_marginLeft="160dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
</FrameLayout>

I think what you want is something like a photo caption therefore the Best way you can achieve that is by using a relative layout and your .xml layout would look like:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="69dp"/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView1"
android:layout_centerHorizontal="true"
android:text="TextView" />
Take note of the property of the textView
android:layout_below="#+id/imageView1"
That is the key.
If for any reason you prefer a linearlayout as the main layout , you can nest a relative layout in a table -row (or another linear layout) which is nested in the main linear layout
i hope that isnt complicating
PS:this is a beginner's advice

You can also use RelativeLayout as a parent, ImageView as the first child element and TextView as the second child element.

You can use a RelativeLayout like 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"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="380dp"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:background="#drawable/wf" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>