I'm trying to support rtl view in a layout that has an imageView and textView (so in rtl devices the image will be at the right side of the text, see pic below)
in order to accomplish that I:
created v17 layout (see below).
added android:supportsRtl="true" in the manifest
the layout code:
<RelativeLayout
android:id="#id/asked_by_container"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="34dp"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="34dp"
android:layout_height="34dp"
android:id="#+id/profile_imageview"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:background="#drawable/question_profile_icon_corner_radius"
android:scaleType="centerCrop"
android:src="#drawable/anonprofile01" />
<com.theapp.widget.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/asked_textview"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/profile_imageview"
android:layout_marginStart="8dp"
android:textSize="14sp"
app:ttf_name="fonts/merriweather_sans/MerriweatherSans-Regular.otf"/>
</RelativeLayout>
<com.theapp.widget.CustomTextView
android:layout_below="#id/asked_by_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/question_textview"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:ttf_name="fonts/merriweather_sans/MerriweatherSans-Regular.otf"/>
the preview shows that it should work:
android studio regular and rtl preview
To be sure I added rootView.setLayoutDirection(View.LAYOUT_DIRECTION_RTL); in the adapter holding the RelativeLayout.
It didnt work so I made sure the app is actually using the v17 version (by adding a dummy button in the v17 version).. still not working.. any help?
I also checked Force RTL layout direction not working for app but it wasn't useful to me..
Once set layoutDirection opposite to the textDirection
and once set layoutDirection same as the textDirection
to see which one could help you in your situation.
Related
I'm trying to put three items in horizontal align using this code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="10dp"
android:src="#drawable/address"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="#string/lbl_address"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/txtAddress" />
</LinearLayout>
The problem is gravity never worked, the ImageView always starts from the left and other items follows in the same order.
I have tried to reverse item orders in the code which will work on none RTL languages, but my application targets both, so it shows wrong on RTL supported devices.
Also I have tried RelativeLayout but items come over each other.
Note: All languages should start from right to left, this is my desired behavior
Add this attribute to your root LinearLayout tag:
android:layoutDirection="rtl"
This will make your view lay out as though the user had chosen a right-to-left language, regardless of what language they've actually chosen.
Try to use this code in AndroidManifest.xml
android:supportsRtl="true"
For support languages that start from right in app.
Because you use android:layout_width="0dp" android:layout_weight="1" in your code .The TextView will use the rest of space .So the left image will on the left .So you can remove android:layout_weight="1" and change the width of TextView .
You can change
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/txtAddress" />
to
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/txtAddress" />
Note
If you want to change the location of the LinearLayout's item .You can use android:gravity="right" .
If you want to change the location of the LinearLayout ,you can use android:layout_gravity="right" .
And you code is android:layout_width="match_parent" , so the android:layout_gravity="right" has no effect .
And you can use android:layoutDirection="rtl" in your LinearLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:layoutDirection="rtl"
xmlns:android="http://schemas.android.com/apk/res/android">
When you switch the order of the elements, place Button after ImageButton, the z-index is not affected. I tried with other types of Views and they are positioned correctly on top of one another depending on their order in the parent FrameLayout.
I tried programmatically with View.bringToFront() without success.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</FrameLayout>
I tried to reproduce the issue: it is reproduced for me on Lollipop+ devices and isn't reproduced on pre-Lollipop.
Could you please check this?
If it is exactly the case, then the solution might be to use android:translationZ attribute (which is available since Lollipop)
Something like:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp"
android:translationZ="1dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:translationZ="2dp"/>
</FrameLayout>
And that fact that translationZ isn't available on pre-Lollipop would not matter (and attribute would be ignored), as there is no such issue.
Hope it helps
I put two android.support.v7.widget.AppCompatButton in a linear layout. They show and work fine in Android versions 4.x and 5.x, but do not show up on Version 6 (The phone is S7 Edge).
<android.support.v7.widget.AppCompatButton
android:id="#+id/btnAsk"
android:textSize="16sp"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/btn_ask"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:textStyle="bold"
android:background="#drawable/round_shape_btn"
android:textColor="#color/white"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/btnBuy"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="16sp"
android:layout_height="wrap_content"
android:text="#string/btn_buy"
android:layout_marginLeft="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:textStyle="bold"
android:background="#drawable/round_shape_btn"
android:textColor="#color/white" />
</LinearLayout>
I googled it and checked SOF for a possible solution but could not find anything working.
Any help is appreciated!
You can simply use Button in your layout instead of specifying AppCompatButton as according to the docs for AppCompatButton:
[AppCompatButton] will automatically be used when you use Button in your layouts. You should only need to manually use this class when writing custom views.
I don`t know exactly how that happened but I changed the layout from
LinearLayout to RelativeLayout
and the buttons showed up. Weird!
I believe your problem is that the Orientation property from the LinearLayout was not set, the default is horizontal which causes the views not to show specially if there's a first view with MATCH_PARENT width.
My app was first developed for Android 2.3, but has been updated many times and currently targets V21. So I was surprised when my Nexus 5 received the Marshmallow update and found that a critical feature of my app was broken. I have a screen with a line at the top where I want two buttons at the far right and an EditText box (for search text) filling up the remainder of the screen to the left. This was my first app and I was unclear about various layout techniques, but from Android 2.3 to 5.1 this code has continued to work:
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/upper_detail_section"
android:elevation="#dimen/upper_elevation"
>
<Button android:id="#+id/sort"
style="#style/large_cust_btn"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/sort"
/>
<Button android:id="#+id/clear"
style="#style/large_cust_btn"
android:layout_toLeftOf="#+id/sort"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:text="#string/clear"
/>
<EditText android:id="#+id/lookup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/clear"
android:layout_alignBaseline="#+id/clear"
android:singleLine="true"
android:hint="#string/item_search_hint"
android:scrollHorizontally="true"
android:textSize="16sp"
android:inputType="textFilter"
/>
</RelativeLayout>
Bringing this screen up in Android 6.0, the buttons are there but the EditText field completely disappears! Knowing what I know now it turned out to be a simple fix using a LinearLayout and weighting:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/upper_detail_section"
android:orientation="horizontal"
android:elevation="#dimen/upper_elevation"
>
<EditText android:id="#+id/lookup"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:singleLine="true"
android:hint="#string/item_search_hint"
android:scrollHorizontally="true"
android:textSize="16sp"
android:inputType="textFilter"
/>
<Button android:id="#+id/clear"
style="#style/large_cust_btn"
android:text="#string/clear"
android:onClick="clearClicked"
/>
<Button android:id="#+id/sort"
style="#style/large_cust_btn"
android:text="#string/sort"
android:onClick="sortClicked"
/>
</LinearLayout>
So all is well now and I'm updating the store with a new APK, but I thought I'd warn people that some layout tricks that used to work may now be broken.
If I'm understanding and reproducing your problem correctly, it's quite simple to fix your issues with RelativeLayout as well. Marshmallow only handles a width of match_parent differently. So just set it to something else like with the LinearLayout and alignParentLeft to true:
<EditText android:id="#+id/lookup"
android:layout_alignParentLeft="true"
android:layout_width="0dp"
[...] />
This yielded the same layout for me like in pre Marshmallow.
Need some enlightenment if this is different Android version issue (v18 SDK and before).
Below is the layout we have, in particular the txt_subitem should be align bottom of img_picture. The code below works fine for v19 and later (since Kit-Kat), but not for v18, as shown in picture beneath.
<RelativeLayout
android:id="#+id/img_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_picture"
android:layout_width="100dp"
android:layout_height="80dp"
android:src="#0f0"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="20dp"/>
<TextView
android:id="#+id/txt_subitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/img_picture"
android:text="testing"
android:layout_alignBottom="#+id/img_picture"
android:background="#00f"
/>
</RelativeLayout>
The below shows what v19 SDK display. E.g. the blue color is aligned with the green box, which is expected due to android:layout_alignBottom="#id/img_picture"
However, for v18 SDK and before (tested on v17 and v16 through emulator and real devices), the image is layout where the blue color box is not aligned as expected, but alignment extend to the margin (20dp) of #+id\img_picture.
Could someone shed some light if this is the Android v18 SDK issue or I have missed something. Thanks!
For API 18 and earlier, the margin is being applied after the alignment so if the margin in the ImageView is greater than 0 you will get your textview moved. You can check this setting the margin to 0.
If you want to add a margin from his parent, try this:
Keeping android:layout_margin="20dp", add android:layout_marginTop="10dp" to your TextView
Not keeping android:layout_margin="20dp", use padding in the parent view (like the example).
<RelativeLayout
android:id="#+id/img_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp">
<ImageView
android:id="#+id/img_picture"
android:layout_width="100dp"
android:layout_height="80dp"
android:src="#0f0"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/txt_subitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/img_picture"
android:layout_alignLeft="#id/img_picture"
android:text="testing"
android:background="#00f"/>
</RelativeLayout>
#Courtesy to Frank N. Stein
<RelativeLayout
android:id="#+id/img_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_picture"
android:layout_width="100dp"
android:layout_height="80dp"
android:src="#0f0"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="20dp"/>
<TextView
android:id="#+id/txt_subitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/img_picture"
android:text="testing"
android:layout_alignBottom="#id/img_picture"
android:background="#00f"
/>
</RelativeLayout>
you can use FrameLayout instead of RelativeLayout. that will suitable for your requirement.In FrameLayout you can move your TextView with simply using gravity.