Pinterest Style in Displaying Images with UIL - java

Pinterest Style of Displaying Images is exceptional, and this adds beauty to your app. After a couple of research I found out that there are great libraries out there that can display images like Pinterest do but not sure if this is compatible with UIL.
I am using the Universal-Image-Loader in displaying my images. In the image shown below I got my images displayed in that manner with some views together with it. It is undeniably true that UIL library handles phone memory greatly in displaying a lot the images. I'd like to know if it is possible to display my images like the Pinterest's but still using UIL as the generator. What are the possible resolve to this approach? Or maybe another library that only handles the display and compatible with UIL.
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:horizontalSpacing="4dip"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="4dip"
android:padding="4dip" />
Update:
I tried using the StaggeredGridView but the layout can't be cast to GridView.
<com.origamilabs.library.views.StaggeredGridView
xmlns:tools="http://schemas.android.com/tools"
xmlns:staggered="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
staggered:numColumns="3"
staggered:drawSelectorOnTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Hey Check out my implementation of Pinterest type view using Staggered GridView and Universal-Image-Loader here.

Related

Why does ImageButton quality blurs or reduces to worst?

My app has a ImageButton whose quality is too bad. The actual image dimensions are 4176*4176 (4176pixels) which looks completely fine when opened separately. But when I import this to android studio and assign it to a ImageButton, the quality of the image downgrades. I have been trying a number of ways to fix this but haven't succeeded yet. I'm completely new to Android Programming.I go to res/drawable then right click to create a new Image Asset and then specify the location which imports the png file.
Actual image:
Image inside studio:
Here is the code in activity_main.xml:
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="#+id/police"
android:layout_width="317dp"
android:layout_height="295dp"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:background="#drawable/custom_button"
/>
</LinearLayout>
Custom button code which calls the image:
<item
android:state_pressed="true"
android:drawable="#mipmap/pressed" />
<item
android:drawable="#mipmap/defaultt" />
</selector>
You are actually referencing the image like Launcher icon in /mipmap directory.
I suggest reducing the image size which you are only using it for ImageButton and placing it inside /drawable with the quality you want or maybe smaller than the current one instead of placing it inside /mipmap directory.
Also, I don’t actually see the reason of how scaleType helps in ImageButton. You may wanna remove that line too.
I'd start by reviewing density independent pixels on Android. This is a good blog that covers the concept: https://www.captechconsulting.com/blogs/understanding-density-independence-in-android
The main issue is that your image (which is very high res) is getting compressed to fit inside of the image button. Typically, you would want to include image assets for different densities via different drawable resource directories (e.g., drawable-hdpi, drawable-xhdpi, drawable-xxhdpi).
However, these days, you can use vector drawables, which will reduce the need for having multiple assets for each density bucket, assuming you have the ability to generate SVG asset files: https://developer.android.com/guide/topics/graphics/vector-drawable-resources

Android Dash Lines Not Showing

Just note, I did reference the creating a dash line issues here on SO and with various searches via Google... Anyway, the issue is just that. I am not able to draw dash lines via xml (Can with DashPathEffect but don't want to keep doing this). Here is the dash drawable I use (dash_line.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:color="#color/whiteColor"
android:dashWidth="10dp"
android:width="10dp"
android:dashGap="4dp"/>
</shape>
Now, then the implementation in xml for the imageview:
<ImageView
android:id="#+id/dash_test"
android:layout_width="200dp"
android:layout_height="10dp"
android:background="#drawable/dash_line"/>
I am working with Android API 18. I even disable Hardware Acceleration in the manifest and even on the view itself by setting the layer type (both tried in xml and programmatically). I verified by taking the view, dashView.isHardwareAccelerated() and it is false. Any thoughts as to what I am missing?
Edit:
I can draw solid lines by the way so I know its not a layering issue.
Edit:
One work around is to use PathDashEffect. Although then you get into the issue of not being able to draw on top of images (which I would need to do). So... still would like an xml solution.
Try setting software as a layerType in your ImageView:
<ImageView
android:layerType="software"
...
/>

Is it possible to add a text overlay to videos?

I am an iOS developer and I have written an app for a client, it is a fitness (Crossfit) timer app, it films you on your workout and adds real time overlays and rep counts to the finished video. It was a fairly challenging project to complete and I was just wondering if the same thing would be possible on Android?
Essentially what I need to know is, is it possible to overlay text that changes (e.g a timer counting up in seconds) onto a recorded video?
If anyone has written an app that does this I would be grateful to see code snippets as Java is not my forte!
Thanks!
If you want to just display text over video and not add it into video file, it's really easy using FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<VideoView
android:id="#+id/VideoView"
android:layout_height="match_parent"
android:layout_width="match_parent" />
<TextView
android:text="TEXT"
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
and text will be displayed over video.
If you want to add text into original video file, it will not be that simple. You need external tools to handle this, for example FFMPEG. this links give you more info about this topic: How to add text on video recording? and How to embed text while recording video in Android?
Yes it is possible, I have followed this tutorial and it is pretty efficient :
http://www.wowza.com/forums/content.php?432-How-to-add-graphic-overlays-to-live-streams-with-Wowza-Transcoder
That is for live stream and for videos you can use those softwares: Openshot or Kdenlive.

Load partial XML layout into ready layout for android

I am attempting to create a program with a set of dynamically loaded layout "pages". I have the base layout created with a minimal default skeleton of the Views common to each page. For each page I was going to hard code all the views to be swapped (:facepalm). My next thought was to create a text file and put the necessary data in a well formatted design. Only then I realized that's exactly what the XML files are. So what I would like to do is create an XML file of the pages with the data exactly as it would appear in the original layout file. Then as each page is loaded (possibly unload another page), pull the XML data for that page and insert it into the current base layout structure.
My page data
<?xml version="1.0" encoding="utf-8"?>
<pageList>
<page:1>
<Button .../>
<EditText .../>
</page>
<page:2>
...
</pagelist>
The base XML layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent" android:weightSum="1">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_weight="1.00" android:weightSum="1">
<EditText android:id="#+id/editText1" android:inputType="textMultiLine"
android:layout_width="0dp" android:layout_weight="0.30"
android:layout_height="match_parent"></EditText>
<RelativeLayout android:layout_width="0dp"
android:id="#+id/orientationLayout" android:layout_weight="0.70"
android:layout_height="match_parent">
<dynamically insert my PAGE here>
I am new to Android programming and have only a little experience in generating interfaces from XML. In programming C# and XML for a previous job, I would have to pull the data directly from an embedded XML file and use that to create the Button or TextBox myself. Do I need to do similar in this case or is there a way to automatically load it?
I have looked this up for a while and most answers I found on this site and other places are from months ago or longer. Those answers tend to range from IMPOSSIBLE to do it yourself. I'm hoping maybe in the past few months there might have been a change to the system I have yet to find.
You are probably looking for a ViewStub.
A ViewStub is an invisible, zero-sized View that can be used to lazily
inflate layout resources at runtime. When a ViewStub is made visible,
or when inflate() is invoked, the layout resource is inflated. The
ViewStub then replaces itself in its parent with the inflated View or
Views. [...]
You can use this like a normal view in your layout and use findViewById() to reference it in code. After that use ViewStub.setLayoutResource() to set layout that you want to show and call ViewStub.inflate() to show it. This way you can write a normal XML
layout file for every (sub-)page you need.
Also see this article.
Edit: Or probably not, I have to mention that the stub gets removed from the view hierachy after inflating. So, depends on your actual use case if this is helpful.

Help making a "launcher screen" for my app, and making it look right across devices

I posted a question here before: Good way to make a launcher screen for sub-apps within your app?, and then started working on other parts of the app, and now I'm back to the same thing.
I want to make a nice screen with icons that the user can press, with room for more icons at a later date. Or maybe something different, I'm not sure.
Here's a current screenshot of what it looks like:
It looks pretty bad there, on my phone it looks better, with less space between the apps (this is a friend's phone), but ideally I want it to look good on all devices.
My XML code for this is as follows:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="20dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:background="#FF6699FF"
/>
Any tips/suggestions are appreciated, I want to make this look good.
I'm not sure what format to store the icons in, right now they're just large (400x400 or so) png files.
If your icons are just squares you might want to use a compressed format like jpg or gif to reduce your app's file size.

Categories