Saturday, November 26, 2011

Learn Cards 1.0 is on market!

Finally its here Learn Cards 1.0. ( links to be found here )


In this version I changed most of the look and fill of the program.
I also added support to another 7 languages!



And I also added 3 more galleries to choose from, learn cards is no longer all about Animals, now you can choose from Animals with sounds, Fruits, Shapes and Vehicles with sounds.



The award screen looks much better now, and it purpose changed, instead of reviling puzzle pieces you now win Golden Owls, and collect them till you get the golden trophy.


I couldn't done it without Yael Hasson help, you can see her work here, if you looking for a good designer, look no further.

Yael also created my new logo: (Yapp - yavji applications)

What do you think?

Monday, August 1, 2011

Tutorial: Custom gallery, circular, and selected item enlarged

In my last project I had to provide user with a way to pick an item from a selection. Every item is represented by an image, so I chose to use the android gallery.
But as you probably know the default android gallery view is not very encouraging.
So I surfed the web for interesting ideas, knowing I would find a nice working example of some custom gallery.
I was surprised though to find out that 90% of the posts merely explain the same sample from the android dev guide.
So after a certain time of  hard work and thank to some ideas I got from StackOverFlow, I finally got a nicely working result. It is nothing fancy but suits the purpose perfectly.
Here is a small tutorial that explains how it is done.

Before you read it, you can look at the images below taken on HTC Desire or download a sample apk to see how it will look on your device.



This video was taken from android emulator on my pc:

video



Lets get down to business. The first thing we have to do is to declare a class that extends Gallery:


public class YappsCircleGallery extends Gallery
{
...
}

Then we will have to add some constructors:

public YappsCircleGallery(Context context) 
{
super(context);
}
public YappsCircleGallery(Context context, AttributeSet attrs) {
super(context, attrs);
}
public YappsCircleGallery(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

Now we want to create an adapter for our Gallery:

public class ImageAdapterCircleGallery extends BaseAdapter 

It will have 2 members: a Context so we have the context we're working on, and an Int array with our drawable ids.

        private Context mContext;


private Integer[] mImageIds = {
           R.drawable.a,
           R.drawable.b,
           R.drawable.c,
           R.drawable.d,
           R.drawable.e
   };

In the constructor we save our context:

public ImageAdapterCircleGallery(Context c) {
       mContext = c;    
}

The easiest way to create a circular gallery is to make the adapter believe we have an endless (almost) number of items:

public int getCount() { 
       return Integer.MAX_VALUE; 
}

The trick is that we will tell the adapter our items go in a sequence of: 1,2,3.....n,1,2,3....n,1,2,3......n............... Then, at application start, we will present the item which is positioned in the middel of this sequence first, so the user will get the feeling of a circular gallery.
To calculate the image/view position out of the position we receive from the adapter, we will use the next function:

int getPosition(int position)
{
if (position >= mImageIds.length) { 
            position = position % mImageIds.length; 
        } 
        return position; 
}

And now we can override the rest of the adapter functions:

    public Object getItem(int position) { 
        return getPosition(position); 
    } 

    public long getItemId(int position) { 
        return getPosition(position); 
    } 

    public View getView(int position, View convertView, ViewGroup parent) 
    {
        ImageView i = new ImageView(mContext); 
        position= getPosition(position); 
        i.setImageResource(mImageIds[position]); 
        i.setLayoutParams(new Gallery.LayoutParams(200, 200)); 
        i.setScaleType(ImageView.ScaleType.FIT_XY); 
        return i; 
    } 

* The size I am using in the setLayoutParams will be the size of a regular (background) item, not the selected one.
Now we're finished with the adapter and can go back to extending the Gallery
We want to add the adapter and some new behavior to the Gallery.
So we will create a new function named initiateAdapter(Context) and call it from each of the 3 constructor we created previously.

private void initiateAdapter(Context context)
{
setAdapter(new ImageAdapterCircleGallery(context));
       
 //To select the xSelected one -> 0 is the first.
        int xSelected=0;
        //To make the view go to the middle of our 'endless' array
        setSelection(Integer.MAX_VALUE/2+(Integer.MAX_VALUE/2)%5-1+xSelected);
}

At this point a circular Gallery is ready. The only aspect left is to make the selected image larger then the background ones.
We will need to save the regular view before enlarging the item so we can revert it to it's previous state. That's why we're are adding a view member to our extended class:

View lastSelectedView=null;

and then we are adding a setOnItemSelectedListener to the initiateAdapter function:

this.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> arg0, View arg1,
int arg2, long arg3) 
{
if(lastSelectedView!=null)
lastSelectedView.setLayoutParams(new Gallery.LayoutParams(200, 200));
arg1.setLayoutParams(new Gallery.LayoutParams(250, 250));
lastSelectedView=arg1;
}
@Override
public void onNothingSelected(AdapterView<?> arg0)
{
}
});

Now all we have to do is to add our New Custom Gallery to the project.
In the Layout Xml we add:
<view  class="il.yapps.views.ciclegallery.YappsCircleGallery" 
android:layout_width="fill_parent" android:id="@+id/gallery" 
android:layout_height="250px" android:layout_margin="5dip"/>

* Once again the number 250 in android:layout_height="250px"  should match the same number 250 in the setLayoutParams method in setOnItemSelectedListener - this is the size of the selected image.

At last, we add it to the code:
       YappsCircleGallery yappsGallery = (YappsCircleGallery) findViewById(R.id.gallery);


If you liked this tutorial or have a suggestion to make please leave a comment :)

Saturday, July 23, 2011

Brick Tower is out of the Beta stage.

I am happy to announce that I have finished the work on Brick Tower.
As I have posted in an earlier post I was working to make Brick Tower look better, and with more fun stages.

The Brick Tower game is a simple Tap game.
You need to build a Brick Tower by tapping the screen avoiding skeletons and collecting smiles and hearts. And also you can only put a brick on top of another brick, or using a smiley.

Here some snapshots:




Barcode:

Saturday, June 4, 2011

Learn Cards is over 5000 downloads!


Remember the date 04.06.2011 :)
Today is the day! Lean Cards application was downloaded for the 5000th time.

And i am proud to present you the Android Market Statistics:

It's been a long 5 month for the app to get there.

After I will finish working on the new and better version of Brick Tower game, I will add few more features to Learn Cards:

*Enable the Move To SD option

*Unlock the Import feature in the free version.

*Add in app billing to remove ADS.

Tnank you all for downloading :)

Saturday, May 7, 2011

C++ College OOP Project


Hey, today I want to share my last project with you, which is a home work for my OOP class in college.


The task was to show our teacher (Vladimir Nodelman)  that we understand the basics of OOP, which includes classes, inheritance and polymorphism. We were asked to come up with a subject for the task and I decided to implement a paint-like application with a couple of minor enhancements, like editing, dragging and removing of the already placed shapes.

For UI we were asked to use WINAPI library that we covered last semester.


I started with creating a base class for a shape and a number of derived classes, like rectangle, which inherits to rectangle_fill (colored rectangle), and a button that I created myself, so i could draw an icon in it.

To accomplish the polymorphism I created a shape list, which contains Pointers to all shapes.
Important: for the polymorphism to work you need to created the function you want to call with the base class as virtual functions and to call them through base class pointer.

In the base class I created a couple of virtual functions, like draw(HDC) which gets the device context and draws on it.
WINAPI event handling is used to catch events of Left Mouse Button Pressed/Released, Mouse Movement, Window Creation and more. Each event is handled accordingly.






Enjoy.


Snapshot:


Code                 Exe

Saturday, April 16, 2011

Brick Tower Beta


Brick Tower game is inspired by a video game I saw in the mall.
The idea of the game is to create a brick tower that will reach the top of the screen.
To make it more interesting I've added some new bricks types; hitting a skeleton brick will end the game while hitting a smiley brick will grant a bonus.
It will remain a Beta version till I'll get new ideas for new stages (it has only 6 stages for now).
If you have any ideas for new stages or any other thoughts about how to improve it, you're welcome to contact me at: evgeni.shafran@gmail.com





Tuesday, March 8, 2011

Volume Control

Volume Control. 
I made this one mostly for personal usage. After one year of using my device, the volume controls (the + - on the side) of my desire starts to stuck, and sometimes do not work at all. So when i listen to music on the device and want to change the volume i need to go to Home -> Settings .... and it really annoying as some song are louder then other, and i need to do this change often.
The program i created gives you only the option to change the Volume, that is it :) it also have an notification option so you can launch it from the notification bar.

Pro version:
Free version


free version pro version

Monday, March 7, 2011

Learn Cards Update

Learn Cards 0.9.7 the free version


  • Volume controls now changing Media volume in the main screens
  • Added ads to the game screens
  • Opened the import option (up to 4 elements)

Thursday, January 13, 2011

Android screen size problem

When I started working on the Learn Cards application, one of the major problems I’d bumped into, was trying to get the exact window size of my layout.
The problem is that each Android method I tried returns the phone physical resolution (480-800 on my HTC Desire), but this 800 pix height also includes the android icons bar (the one with the clock and the battery icon) and the program tile bar (in my case a plain Learn Cards text).
When I presented a grid of images (2*3) and set their size so they fill the screen (height/3 and width/2), they exceeded the screen limits (for obvious reasons: wrong height calculation).
The only useful advice I found on the net was to override the onMeasure method (stackoverflow post), but it was tricky to implement in my project, as I don't have any custom views. I tried to create my own Layout, then override the onMeasure method and create the grid there and it actually worked on my Desire. However, when I tested this solution on HTC Wildfire, it calculated the size correctly, but didn't draw the grid (I still haven’t figured why).
The solution that worked for me was to calculate the height once at the application start via overriding the linerlayout, and then using this value in the rest of my project.
Here is a small example that implements the solution described above: (Sample code available for download Here )




First we need to create our LayoutMessure, which overrides the LinearLayout class:






        public class LayoutMessure extends LinearLayout




Then override the onMeasure method and save the needed values values for a future use:






        static public int windowW=0;
static public int windowH=0 ;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
{
// we overriding onMeasure because this is where the application gets its right size.
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
windowW = getMeasuredWidth();
windowH = getMeasuredHeight();
}






Now we need to add our new custom LayoutMessure to our main screen:
Add this code right after the first layout:






        <view
         class="il.yavji.screensize.LayoutMessure"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:id="@+id/customlayout"
         android:gravity="center"
        >




And close it right before you close the first (main) layout:



        </view>


Now each time the main screen is created, our custom class will measure the screen size and you will be able to get it later through LayoutMessure.windowW and LayoutMessure.windowH properties.




One last thing - this solution will work for all application screens except the first one, because the onMessure called only after  onCreate finished.
If you intend to use it on main screen too, just add another dummy screen that does nothing except for calling the main screen, and add the view to it. 

Tuesday, January 11, 2011

Pro version is on Market, and upgrade to the simple version released

Eventually i found some time to finish the work on the pro version!
Its available now on market.
The pro version has the import capability and you can download some theme samples from the blog to test it out.

Also in the simple release i added a reward puzzle screen, and improved the main menu.