I'm building an app with the Fresco library, by Facebook.
I'm having issues trying to understand how I should implement a view using Fresco, if my App will be usable among different devices. As you can see in the images attached, I have a Nexus6, a NexusOne and a Nexus7.
All of them have the same Fresco Drawee, (200dp x 200dp). As I've read through the documentation of Fresco, it is necessary, and mandatory, to fix the image size. However I'm having trouble understanding how can I achieve something as simple as having an ImageView using 50% of the image width using Fresco.
The desired result would be to have an image that uses half of the screen (in terms of width), and leave the rest of the space for the different texts (title+descriptions shown).
Normally I would do this using weight's, however I'm not sure how to achieve this with the library, or what the best practices would be.
Based on this question (and documentation), I'm not sure if adding a listener is the best option. I'm just failing to understand how Facebook or other applications who use this library, do it for different devices.
Thanks in advance
The code shown of this images is basically the following:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="200dp"
android:layout_height="200dp"
fresco:actualImageScaleType="focusCrop"
fresco:backgroundImage="@drawable/user_icon"
fresco:fadeDuration="300"
fresco:placeholderImage="@color/common_action_bar_splitter"
fresco:placeholderImageScaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_toRightOf="@+id/my_image_view">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="@color/menu_color"
android:text="Description 1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Title 2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="@color/menu_color"
android:text="Description 2" />
</LinearLayout>
</RelativeLayout>
UPDATE:
I also don't know how to get a full-screen image. If we must either specify the dimensions, or use match_parent, but using match_parent on both would use the whole parent, how can I get something like the image showing the Facebook image?.
I believe @Gueorgui Obregon's is a good idea, however I'm still wondering if the problem is the design pattern of using 50% of the screen for a picture. For instance, take 2 cell phone models with the same dimensions (MDPI for example), but one of them is a little bit wider than the other. Using the dimensions approach I'd get than on one mobile it takes half of the screen, but on the other one, it would take a little bit more/less.
In summary: Where is the problem? Is thinking in percentages a bad idea when designing views? Should I tell my designer that it's a bad design idea for android to use percentages? More importantly, how can Facebook achieve something like the last photo (where the pictures use a ~33% of the screen)?
