how to join 4 images to one image button (android) - android

Hello I need to join 4 separate images into one ImageButton
I want to attach the images Which should look like that on one image button Thanks for you help.
How can I do it ?
Img1 on top
Img2 img3 at the middle
Img4 at bottom
Like a pyramid

You can do this with Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_back"
android:drawableLeft="#drawable/bd_logo"
android:drawableRight="#drawable/btn_close"
android:drawableBottom="#drawable/btn_ok"/>
Left Img:
yourButtonId.setCompoundDrawablesWithIntrinsicBounds( R.drawable.smiley, 0, 0, 0);

There is a nice article on merging 2 pictures.
Take a look, and then try to connect 4 of them
http://android-er.blogspot.dk/2013/08/merge-two-image-overlap-with-alpha.html

Actually you don't have to use an imageButton for that. You can create a new LinearLayout, and assign a setOnClickListener method to that LinearLayout. So that it behaves like a button and you can locate as many images the way you wanted. For example;
The XML code for LinearLayout;
<LinearLayout
android:id="#+id/imagebutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<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="center_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Declaration in your Activity;
LinearLayout imageButton = (LinearLayout) findViewById(R.id.imagebutton);
Handling click events;
imageButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//TODO
}
});

Related

Smaller down the image source inside imageview

So I have an image source inside the ImageView. I tried to smaller down the size of source by writing android:padding="25dp".
But when I captured the image and display the imageView, it become like this. The captured image does not fit into ImageView.
Is there a way I can smaller down the source in ImageView but allow the captured image fit into the ImageView ? Here my code:
<ImageView
android:layout_height="150dp"
android:layout_width="150dp"
android:background="#color/light_gray"
android:padding="25dp"
android:src="#drawable/camera"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:id="#+id/imageView" />
Is there a way to remove the captured image but not remove the source? I used code below but it remove everything including the source.
imageView.setImageDrawable(null);
Edit
Trying to place button in the center of imageView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_below="#+id/toolbar"
android:layout_height="fill_parent">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/imageView1"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="42dp"
android:layout_marginEnd="42dp" />
<Button
android:layout_width="40dp"
android:background="#drawable/camera"
android:layout_height="40dp"
android:id="#+id/imageButtonOne"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/imageView1"
android:layout_marginStart="25dp"
android:layout_marginLeft="25dp" />
</RelativeLayout>
Use a Button to invoke the gallery or camera:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_below="#+id/toolbar"
android:layout_height="fill_parent">
<ImageView
android:layout_width="100dp"
android:layout_height="120dp"
android:id="#+id/imageView1"
android:layout_marginRight="42dp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="40dp"
android:background="#mipmap/ic_launcher"
android:layout_height="40dp"
android:id="#+id/imageButtonOne"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/imageView1"
android:layout_marginStart="25dp"
android:layout_marginLeft="25dp" />
<ImageButton
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/your_delete_button_id"
android:background="#mipmap/ic_launcher"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignStart="#+id/imageView1"
android:layout_marginStart="35dp" />
</RelativeLayout>
Use code for that:
// buttons to access camera or gallery for input images
Button imageButtonOne = (Button) findViewById(R.id.imageButtonOne);
imageButtonOne.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//invoke camera or gallery
}
});
// image upload camera button are visible at first
imageButtonOne.setVisibility(View.VISIBLE);
After image is selected and ready to be placed in ImageView, use this in your onActivityResult():
imageButtonOne.setVisibility(View.GONE);
Delete button to delete image only:
// image-delete button
ImageButton buttonDelete1 = (ImageButton) findViewById(R.id.your_delete_button_id);
buttonDelete1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (your_imageView != null) {
// delete image from your_imageView
your_imageView.setImageBitmap(null);
// enable your camera_button again
imageButtonOne.setVisibility(View.VISIBLE);
} else {
//say something
}
}
});

Android XML Layout - a picture with a TextView on it

I'm working on an XML layout in my app and what I want to do is to make an ImageView have a piece of text on it (I want to have a TextView on it). Anyway, less words and more examples. What I want is something like this:
I would like to know what is the best way to make it (with an opaque strip and preferably with text that will stretch or shrink depending on the length of name. Though I think I might figure the stretching out by myself).
You can create a RelativeLayout with the ImageView and TextView as its two children
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="150dp"
android:layout_height="75dp"
android:src="#drawable/myImage" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageView"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/myImageView"
android:background="#drawable/myBackground"
android:gravity="center" />
</RelativeLayout>
Building on what Chris Stillwell said, set the Alpha property to less than 1:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="150dp"
android:layout_height="75dp"
android:src="#drawable/myImage" />
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageView"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/myImageView"
android:background="#drawable/myBackground"
android:gravity="center" />
</RelativeLayout>
Then in your onCreate()
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.yourlayout);
ImageView imageView = (ImageView)findViewById(R.id.myImageView);
TextView textView = (TextView)findViewById(R.id.myTextView);
textView.setText("Your Text");
textView.setAlpha(.6f);
}

FrameLayout content order

I'm learning Android and I was trying out FrameLayout containing ImageViews, I tried to do a little app that switchs between two images when you click on them the code is the following:
My xml looks 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"
tools:context=".Hola" >
<ImageView
android:id="#+id/segunda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="metodosegunda"
android:scaleType="fitCenter"
android:src="#drawable/img1" />
<ImageView
android:id="#+id/primera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="metodoprimera"
android:scaleType="fitCenter"
android:src="#drawable/img2" />
</FrameLayout>
And my main program:
public class Hola extends Activity {
ImageView primera;
ImageView segunda;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.teta_layout);
primera = (ImageView) findViewById(R.id.primera);
segunda = (ImageView) findViewById(R.id.segunda);
}
public void metodoprimera (View view){
primera.setVisibility(View.GONE);
segunda.setVisibility(View.VISIBLE);
}
public void metodosegunda (View view){
segunda.setVisibility(View.GONE);
primera.setVisibility(View.VISIBLE);
}
}
This program should show an image and as soon as you click on it it should hide that image and show the other and so on.
The thing is that this won't work , but as soon as I switch the imageview order in the xml, it works, and i don't really understand why it should not work this way.
Thank you guys in advance
Try adding:
android:visibility="gone"
to the XML for one of the ImageView's.
I'll try to go more explicit with the explanation, here is the thing:
If I have the XML like this it will show the images (depending on visibility) but the oClick thing will not work:
<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"
tools:context=".Hola" >
<ImageView
android:id="#+id/segunda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="metodosegunda"
android:scaleType="fitCenter"
android:src="#drawable/img1"
android:visibility="gone" />
<ImageView
android:id="#+id/primera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="metodoprimera"
android:scaleType="fitCenter"
android:src="#drawable/img2"
android:visibility="visible" />
</FrameLayout>
If I swap the ImageView's order in the XML It will work perfectly:
<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"
tools:context=".Hola" >
<ImageView
android:id="#+id/primera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="metodoprimera"
android:scaleType="fitCenter"
android:src="#drawable/img2"
android:visibility="visible" />
<ImageView
android:id="#+id/segunda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="metodosegunda"
android:scaleType="fitCenter"
android:src="#drawable/img1"
android:visibility="gone" />
</FrameLayout>
It's not about the visibility of each Imageview since it does not matter what value I put on them It won't work the first way but i will work the second way.
Seems like a weird issue since the oder of the imageviews should not matter if you set them visible or gone ...

Image button formatting

Above is my desired designed to build on my activity, in which I want to place the image of button just left to button text and want this on centered.
can anyone tell me how to make this thing???
Here is the code to divide buttons width to 50% 50%
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0" >
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight=".50"
android:background="#android:color/transparent"
android:drawableLeft="#drawable/icon_settings"
android:text="#string/search" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:src="#drawable/menu_separator" />
<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight=".50"
android:background="#android:color/transparent"
android:drawableLeft="#drawable/icon_settings"
android:text="#string/profile" />
</LinearLayout>
To place the image as in your screenshot, use drawableStart instead of drawableLeft.
You can also use this code for imageButtons.`
<ImageButton android:layout_width="wrap_content"
android:src="#drawable/backicon" android:layout_height="wrap_content"
android:id="#+id/imageButton1" android:background="#drawable/backicondn"></ImageButton>
Change image by programe
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageButton imageButton;
imageButton = (ImageButton) findViewById(R.id.imageButton1);
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
imageButton.setImageBitmap(bm);
}

How do I add a graphic overlay on an activity? Android

I am trying to have a picture show up in the middle of the screen guiding people what to press (eg an arrow to a button). What do I use so that the arrow design will show up at the appropriate spot and dissapear after I do something (like press the screen)
Thanks!
EDIT
Here is the xml layout for one of my activities, note the imageview at the bottom, it shows the picture in the front
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="45dp" android:background="#drawable/mytitlebackground" android:id="#+id/relativeLayout1">
<ImageButton android:id="#+id/btnAddFriends"
android:layout_width="wrap_content" android:src="#android:drawable/ic_input_add"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentRight="true"></ImageButton>
<TextView android:id="#+id/textView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="#string/imTracking" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_centerVertical="true" android:layout_centerHorizontal="true"></TextView>
</RelativeLayout>
<Button android:id="#+id/btnUpdateLocation" android:text="Update Location"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"></Button>
<ImageButton android:src="#drawable/mapbutton"
android:layout_width="wrap_content" android:id="#+id/btnMaps"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" android:layout_alignTop="#+id/btnUpdateLocation"></ImageButton>
<ImageButton android:text="Refresh"
android:src="#android:drawable/stat_notify_sync" android:layout_width="wrap_content"
android:id="#+id/btnRefresh" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"></ImageButton>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="#+id/relativeLayout1"
android:layout_alignParentLeft="true" android:layout_above="#+id/btnUpdateLocation" android:id="#+id/linearLayout1">
<ListView android:id="#+id/imtrackinglistview"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:layout_weight="1"></ListView>
</LinearLayout>
<ImageView android:id="#+id/iVImtrackingpopup" android:layout_width="300dp" android:layout_height="330dp" android:src="#drawable/imtrackinghelp_en" android:layout_centerVertical="true" android:layout_centerHorizontal="true"></ImageView>
When I try to "click" the relative layout to make the image invisible, it doesn't work unless I click the top of the layout
RelativeLayout Imtrackingrelativelayout=(RelativeLayout) findViewById(R.id.relativeLayoutImtracking);
Imtrackingrelativelayout.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
ImageView imtrackingoverlay=(ImageView) findViewById(R.id.iVImtrackingpopup);
imtrackingoverlay.setVisibility(View.INVISIBLE);
}
});
make the image centre aligned and put click listener over root layout and on click make this image invisible......Better to use relative layout for this.....
Have you tried using the ShowcaseView library? It offers a more cleaner approach to what you are trying to achieve
Check out the project here:-
https://github.com/amlcurran/ShowcaseView

Categories

Resources