Develop Reference

Android - Cycling through Images component

I'm looking for a component like this:
If you have used Tinder, i want something like when you view a profile, how you can cycle through their pictures.
I'm pretty sure i can implement this manually, but was wondering if something already exists, and i don't really know how to look it up.
Thanks!
Edit: Also sorry for the bad title, didn't really know how to name these types of questions.

You can do your own implementation or could use some libraries. For you own implementation I would suggest using either ViewPager passing Views instead of fragments or PageTransformer if you want something more elaborate.
If you prefer libraries, I would recommend InfiniteCycleViewPager, sayyam's carouselview or you can go in a tour here: https://android-arsenal.com/tag/154, there is a lot of libraries with different implementations.
Example of implementation of an image slider using ViewPager:
First create your activity's xml with a ViewPager component:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.stackoverflow.imageslider.MainActivity">
</android.support.v4.view.ViewPager>
Then in your activity's onCreate method instantiate the ViewPager and create an adapter for it:
ViewPager viewPager = findViewById(R.id.view_pager);
ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageList);
viewPager.setAdapter(adapter);
In the ViewPagerAdapter class (that should extend PageAdapter), you will control the images overriding the method instantiateItem():
#NonNull
#Override
public Object instantiateItem(#NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
imageView.setImageDrawable(imageList.get(position));
return imageView;
}
In this example imageList would be an List that is fulfilled somewhere else.
This example is based in a tutorial from codinginflow.com, and you can also take a look there.
Now let's see a simpler implementation, that would do just like you asked, touching the image sides instead of sliding.
Example of simpler implementation:
Create a layout with an ImageView and two buttons overriding it, one for next image on the right and one for previous image in the left:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/buttonPrevious"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent" />
<Button
android:id="#+id/buttonNext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent" />
</LinearLayout>
</FrameLayout>
Then set the onClick of each button to get the images from a list and set in the ImageView.
final ImageView imageView = findViewById(R.id.imageView);
Button next = findViewById(R.id.buttonNext);
next.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
currentPosition ++;
imageView.setImageDrawable(drawableList.get(currentPosition));
}
});
Button previous = findViewById(R.id.buttonPrevious);
previous.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
currentPosition --;
imageView.setImageDrawable(drawableList.get(currentPosition));
}
});
drawableList would be a Drawable that is fulfilled somewhere else. You could also change to a different kind of image list, doesn't matter. current position would be and int that starts at 0.
For PageTransformer I would recommend Bincy Baby's answer and phantomraa's answer.
In case the link gets broken I'll leave Bincy Baby's code here:
viewPagerMusicCategory.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
Log.e("pos",new Gson().toJson(position));
if (position < -1) {
page.setScaleY(0.7f);
page.setAlpha(1);
} else if (position <= 1) {
float scaleFactor = Math.max(0.7f, 1 - Math.abs(position - 0.14285715f));
page.setScaleX(scaleFactor);
Log.e("scale",new Gson().toJson(scaleFactor));
page.setScaleY(scaleFactor);
page.setAlpha(scaleFactor);
} else {
page.setScaleY(0.7f);
page.setAlpha(1);
}
}
}
);
I think you could also mix PageTransformer with the examples I gave.
The libraries each one already have a good documentation, if not in the android arsenal you can find it in GitHub, and even if I post some code here, if the library closes, gets outdated or something like that, the code will not be useful anymore.

How to move ImageView to another ImageView Android Animation

Anyone know how i can move an imageview to another imageview ?
im thinking at this kind of method, or maybe is another one that i dont know... no problem, im glad to learn it
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/linear_interpolator">
<translate
android:duration="800"
android:fromXDelta="0%p"
android:toXDelta="75%p" />
i know that fromXDelta (is the starting position) and the toXDelta is the possition where should arrive.. but? how i can know what is my starting position and arrive position looking at my picture example?
Added details:
There are 4 different layouts in here, but only 3 are with weight value.
The bar from top where are buttons is a layout but not have weight like the rest.
So laying cards from up are in the layout1
My desired position to arrive are in the layout2
Playing cards from down are in the layout3
Also i use onClick methods in xml not onClickListeners. Thanks

You can do this programmatically like this :
#Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final View target = findViewById(R.id.target);
final View viewToMove = findViewById(R.id.viewToMove);
viewToMove.setOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
translate(viewToMove, target);
}
});
}
private void translate(View viewToMove, View target) {
viewToMove.animate()
.x(target.getX())
.y(target.getY())
.setDuration(1000)
.start();
}
Here the XML :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="#+id/activity_main"
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/target"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:background="#color/colorAccent"/>
<ImageView
android:id="#+id/viewToMove"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#color/colorPrimary"
android:src="#mipmap/ic_launcher"/>
</FrameLayout>

Finnaly i have succeded with the help of user Francois L.
Was a lot of work to do, i don't say no, because i needed to redesign all my layouts, but this is no problem cause i learned something new and i appreciate all the help i can receive.
If anyone want to move a view (any type of view, imageview, buttonview, textview etc ) to another view it is necessary that both views to be in the same layout, that is the most important part.
And the code to achieve this is:
//here is the part of initialization
ImageView poz1Inamic = (ImageView) findViewById(inamic_pozitia1);
ImageView poz1InamicSpateCarte = (ImageView) findViewById(inamic_pozitia1spatecarte);
//other code
poz1InamicSpateCarte.setVisibility(View.INVISIBLE);
//here is the initialization of the arrive position
ImageView cartePusaInamic = (ImageView) findViewById(R.id.cartePusaInamic);
//the code for moving from start position to arrive position
poz1Inamic.animate()
.x(cartePusaInamic.getX())
.y(cartePusaInamic.getY())
.setDuration(333)
.start();

Android app splash screen from file on device

I want to display a splash screen for x seconds at the app launch from a PNG file on the device.
I have tried android:windowBackground in the theme however that cannot be taken from a file and only predefined Drawable
The file may change at anytime so at next app launch it will be different.

Below is the code to set timer for Splash Screen activity. Also, do not forget to include the activity in manifest.
splash_screen.java
public class Splash extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.splash_screen);
Thread timerThread = new Thread(){
public void run(){
try{
sleep(5000); //Change the timing of the Screen
}catch(InterruptedException e){
e.printStackTrace();
}finally{
Intent intent = new Intent(SplashScreen.this,MainActivity.class);
startActivity(intent);
}
}
};
timerThread.start();
}
}
Make your layout, full screen, remove action bar. Here's the code for splash_screen.xml
<?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:background="#drawable/splashscreen"
android:orientation="vertical">
</LinearLayout>
Change the image of splashscreen, when you need, in your case, each time app is launched. HTH.

You can use ImageView.
Set scale image to fit the screen.
Make window fullscreen with no titlebar. By this you can set drawable different every time.
<?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:background="#drawable/splashscreen"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/image2"
/>
</LinearLayout>
Access this ImageView in splash screen activity by..
ImageView img = (ImageView) findviewbyId(R.id.imageView);
Bitmap bitmapImage = BitmapFactory.decodeFile(imagePathFromSDCard);
Drawable drawableImage = new BitmapDrawable(bitmapImage);
img.setBackgroundDrawable(drawableImage);

Passing from a listview to a gridview

I have an activity with a list, whose items are made of an image+text. I need to allow the user to change the view and have a gridview instead of it (whose elements are still made of the same image+text).
The user can do it through an icon menu:
public boolean onOptionsItemSelected(MenuItem item)
{
if(item.getItemId()== R.id.change_view)
{
// ?
}
}
I tried to just set the new adapter(see below) but it doesn't work..do I have to create a new activity to do that?
if(item.getItemId()== R.id.change_view)
{
setContentView(R.layout.grid_view);
gridViewAdapter = new GridViewAdapter(this,R.layout.bookmark_list_item,MyApp.getItems().findAll());
list.setAdapter(gridViewAdapter);
list.setVisibility(View.VISIBLE);
}

There are several ways you could achieve that.
One solution is to have both the ListView and GridView stacked in a FrameLayout, and when you want to switch between these views, set the visibility GONE to one view and VISIBLE to another, then viceversa.
Put both the ListView and GridView in a ViewFlipper
Or, use a ViewSwitcher
And finally, use just a GridView, but when you want to transition to a list view, set programmatically the number of columns to 1.

I finally resolved with something like this:
For the layout of my activity i have:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ViewStub android:id="#+id/list"
android:inflatedId="#+id/showlayout"
android:layout="#layout/list_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
<ViewStub android:id="#+id/grid"
android:inflatedId="#+id/showlayout"
android:layout="#layout/grid_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
</merge>
then i've defined the layout for the list and the grid (and also for their items), and managed the passage between them inflating the layouts and then by this method:
private void changeView() {
//if the current view is the listview, passes to gridview
if(list_visibile) {
listview.setVisibility(View.GONE);
gridview.setVisibility(View.VISIBLE);
list_visibile = false;
setAdapters();
}
else {
gridview.setVisibility(View.GONE);
listview.setVisibility(View.VISIBLE);
list_visibile = true;
setAdapters();
}
}
the complete code is available in this article: http://pillsfromtheweb.blogspot.it/2014/12/android-passare-da-listview-gridview.html

first click on linearlayout doesn flash background click color, it just flash for second and next click

I try to get the effect click background color for linear layout. I've set clickable to linear layout. and from the code also I've put the click listener the setBackgroundResource.
Here it is the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/llinsertmem"
android:clickable="true"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50px">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="PUSH it"
/>
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
/>
</LinearLayout>
and the java code:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout linearInsertMem = (LinearLayout)findViewById(R.id.llinsertmem);
linearInsertMem.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
v.setBackgroundResource(android.R.drawable.list_selector_background);
Toast.makeText(testdoank.this, "succeded", Toast.LENGTH_SHORT)
.show();
}
});
}
When first time click the clickable linearlayout, the toast text is displayed but the background color click effect doesn't. The flash background click color is only work from the second click.
any idea what the problem is?

Is not necessary do anything in JAVA code.
You can only add this as attribute:
android:background="#android:drawable/list_selector_background"
And it works for me (on Android 2.2 device)

After try and error, somehow it's work.
just put the setBackgroundResource also on the onCreate.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout linearInsertMem = (LinearLayout)findViewById(R.id.llinsertmem);
linearInsertMem.setBackgroundResource(android.R.drawable.list_selector_background);
linearInsertMem.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
v.setBackgroundResource(android.R.drawable.list_selector_background);
Toast.makeText(testdoank.this, "succeded", Toast.LENGTH_SHORT)
.show();
}
});
}
Don't know the logic explanation. if you have a thought, please.

In the onClick method you are using v as the View which is passed, but that view may not be the LinearLayout which you want to change the background.
Thus you need to create a class level variable or a final varibale and pass the handle for the LineraLayout to the onClick method.
Remove/cut from onCreate:
linearInsertMem.setBackgroundResource(android.R.drawable.list_selector_background);
and paste it into onClick or change v. into linearInsertMem.
I think that Exlipse will then demand that linearInsertMem must be final like:
final LinearLayout linearInsertMem = (LinearLayout)findViewById(R.id.llinsertmem);
Or you can define this object above onCreate like this:
LinearLayout linearInsertMem;
then in onCreate you state:
linearInsertMem = (LinearLayout)findViewById(R.id.llinsertmem);
then onClick method will know exactly which view you want to change if you use linearInsertMem.setBackgroundResource...