Languages

Menu
Sites
Language
How to make image height same as label?

Hi,

I have a horizontal box, which has LABEL and IMAGE next to each other.

I want the IMAGE to have the same height automatically as the LABEL (and keep the aspet ratio).

I cannot make it, IMAGE size always the min.size. of the image.

I want the image (smiley) have the same height as the label.

Current code:

        Evas_Object* boxLabel = elm_box_add(box);
        evas_object_size_hint_align_set(boxLabel, EVAS_HINT_FILL, 0.0);
        evas_object_size_hint_weight_set(boxLabel,EVAS_HINT_EXPAND,0.0);
        elm_box_align_set(boxLabel, 0.0, 0.0);
        elm_box_horizontal_set(boxLabel, EINA_TRUE);
        evas_object_show(boxLabel);

        Evas_Object* label = elm_label_add(boxLabel);
        elm_object_text_set(label, "hello world");
        evas_object_size_hint_align_set(label ,0.0,0.5);
        evas_object_size_hint_weight_set(label , 0.0, 0.0);
        evas_object_show(label );
        elm_box_pack_end(boxLabel,label );

        Evas_Object *image = elm_image_add(boxLabel);
        //Evas_Object *image = evas_object_image_filled_add(boxLabel); --> does not work
        elm_image_file_set(image, "............", NULL);
        evas_object_size_hint_min_set(image, 32, 32); // image always has this size
        evas_object_size_hint_align_set(image,0.0,0.5);
        evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);  //tried with _FILL, no change
        evas_object_image_filled_set(image, EINA_TRUE);  //this has no effect
        evas_object_show(image);
        elm_box_pack_end(boxLabel,image);

Is there a way to achieve this?
Basically, I don't want to specify size for the image, "evas_object_resize()", but the image height to be the same as the label height (which is based on the device resolution), and width should just adjusted according to the acpect ratio.

List

Responses

5 Replies
Mango Bar

You may try with table container where you can place ui component in a cell specified by row ,col.

According to documentation elm_box_homogeneous_set()  function is used for same height or width of box child object. Check the bottom of Handling the Element Size segment from the following link

https://developer.tizen.org/development/guides/native-application/user-interface/efl/ui-containers/box

Try the following code using Box container.

    Evas_Object* box = elm_box_add(ad->conform);   
    elm_box_horizontal_set(box, EINA_TRUE);
    elm_box_padding_set(box,50,64);
    elm_box_homogeneous_set(box,EINA_TRUE);
    evas_object_size_hint_align_set(box, EVAS_HINT_FILL, 0.0);
    evas_object_size_hint_weight_set(box,EVAS_HINT_EXPAND,0.0);
    elm_box_align_set(box, 0.0, 0.0);
    evas_object_show(box);


    Evas_Object *label = elm_label_add(ad->conform);
    elm_object_text_set(label, "Hello World");
    elm_object_scale_set(label,2.0);
    evas_object_size_hint_min_set(label,ELM_SCALE_SIZE(100),ELM_SCALE_SIZE(50));
    evas_object_size_hint_align_set(label,0.0,0.5); 
    evas_object_show(label);
    elm_box_pack_end(box,label);

    Evas_Object *image = elm_image_add(ad->conform);
    elm_object_scale_set(image,2.0);
    elm_image_file_set(image,image_path,NULL);
    evas_object_size_hint_min_set(image,ELM_SCALE_SIZE(100),ELM_SCALE_SIZE(41)); 
    evas_object_size_hint_align_set(image,0.5,0.5);
    evas_object_show(image);
    elm_box_pack_end(box,image);

 

To know more about scalling, check the following links

https://developer.tizen.org/dev-guide/2.3.1/org.tizen.guides/html/native/ui/multiple_screens_n.htm

https://developer.tizen.org/dev-guide/2.3.1/org.tizen.guides/html/native/ui/scalability_n.htm

Zoltan Puski 
        evas_object_size_hint_align_set(image,EVAS_HINT_FILL,EVAS_HINT_FILL);
        evas_object_size_hint_weight_set(image, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);

This one almost makes it: it will resize the image height to have the same as the label, but it will align to the midle of the 2nd half of the box, while I would like to align left, to touch the label's end.

Zoltan Puski

Looks like this:

So the size is OK now, but would be good if the image would be alligned to the left.
Btw, elm_box_homogeneous_set()  did not help.

Mango Bar

Following code will place them adjacent.

static void my_table_pack(Evas_Object *table, Evas_Object *child, int x, int y, int w, int h)
{
    evas_object_size_hint_align_set(child, EVAS_HINT_FILL, EVAS_HINT_FILL);
    evas_object_size_hint_weight_set(child, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
    elm_table_pack(table,child,x,y,w,h);
    evas_object_show(child);
}

static void
create_base_gui(appdata_s *ad)
{
	/* Window */
	/* Create and initialize elm_win.
	   elm_win is mandatory to manipulate window. */


	ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
	elm_win_autodel_set(ad->win, EINA_TRUE);


	if (elm_win_wm_rotation_supported_get(ad->win)) {
		int rots[4] = { 0, 90, 180, 270 };
		elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
	}

	evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
	eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);

    Evas_Object* box = elm_box_add(ad->win);
    elm_box_horizontal_set(box, EINA_TRUE);
    evas_object_size_hint_weight_set(box,EVAS_HINT_EXPAND,EVAS_HINT_EXPAND);
    elm_win_resize_object_add(ad->win,box);
    evas_object_show(box);

    Evas_Object *table = elm_table_add(ad->win);
    elm_table_homogeneous_set(table,EINA_TRUE);
    elm_table_padding_set(table, 20 * elm_config_scale_get(),30 * elm_config_scale_get());
    evas_object_size_hint_weight_set(table,EVAS_HINT_EXPAND,EVAS_HINT_EXPAND);
    elm_box_pack_end(box,table);
    evas_object_show(table);

	Evas_Object *label = elm_label_add(ad->win);
	elm_object_text_set(label, "Hello World");
	my_table_pack(table,label,0,1,1,1);

    char image_path[1000] = {0,};
    char *resource_path = app_get_resource_path();
    snprintf(image_path,1000,"%simages/img.JPG",resource_path);
    dlog_print(DLOG_INFO,"TAG","Path: %s",image_path);

    Evas_Object *image = elm_image_add(ad->win);
    elm_image_file_set(image,image_path,NULL);
    evas_object_show(image);
    my_table_pack(table,image,0,1,2,1);


	/* Show window after base gui is set up */
	evas_object_show(ad->win);
}

 

Zoltan Puski

Thanks, but this seems to (sort of) work for a specific case only.

If I want to add another image after the previous to have this:

This code does not work.

So it seems no simple solution for this.
The best would be if I could get the height of the label, and then just call evas_object_size_hint_min_set on the image. But this info is not available until screen is rendered...