Clash Royale CLAN TAG#URR8PPP

Prevent TextView overlap next element in Relative layout

I am creating a title bar as below, the "Home" & "Drawer" icon will set visible/gone base on cases.
How could I make the text view not overlap the "Home" / "Drawer" icon??

This is what it had for my code, I manually set the text view margin to the home & drawer icon, however, when in the case that the home/drawer icon is hidden, the text long still maintain like home button appears. How can I set the text view perfectly wrap base on the space available?

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageButton
android:id="@+id/actionbar_backbutton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_arrow_back_black_24dp" />

<TextView
android:id="@+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="105dp"
android:layout_toRightOf="@id/actionbar_backbutton"
android:background="?attr/actionBarItemBackground"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:text="@string/Easybook_com"
android:textColor="@color/colorBlackText"
android:textSize="20sp" />

<ImageButton
android:id="@+id/actionbar_homebutton"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/actionbar_drawerbutton"
android:layout_alignParentTop="true"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_home_black" />

<ImageButton
android:id="@+id/actionbar_drawerbutton"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_drawer" />

<ImageView
android:id="@+id/actionbar_reddot"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside" />


5 Answers
5

you can set the TextView to be in the space between the two buttons something like this:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageButton
android:id="@+id/actionbar_backbutton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_arrow_back_black_24dp" />

<ImageButton
android:id="@+id/actionbar_homebutton"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_toLeftOf="@+id/actionbar_drawerbutton"
android:layout_alignParentTop="true"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_home_black" />

<ImageButton
android:id="@+id/actionbar_drawerbutton"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_drawer" />

<TextView
android:id="@+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="105dp"
android:layout_toRightOf="@id/actionbar_backbutton"
android:layout_toLeftOf="@id/actionbar_homebutton"
android:background="?attr/actionBarItemBackground"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:text="@string/Easybook_com"
android:textColor="@color/colorBlackText"
android:textSize="20sp" />

</RelativeLayout>


Use both startOf,leftOf and endOf, rightOf in TextView.

android:layout_toRightOf="@id/actionbar_backbutton"
android:layout_toStartOf="@id/actionbar_backbutton"
android:layout_toLeftOf="@id/actionbar_homebutton"
android:layout_toEndOf="@id/actionbar_homebutton"


Try this..

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">


<ImageButton
android:id="@+id/actionbar_backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="@drawable/ic_arrow_back_black_24dp" />

<TextView
android:id="@+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="?attr/actionBarItemBackground"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:layout_toRightOf="@id/actionbar_backbutton"
android:text="@string/Easybook_com"
android:textColor="@color/colorPrimaryDark"
android:textSize="20sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:layout_toRightOf="@+id/actionbar_title"
android:orientation="horizontal">

<ImageButton
android:id="@+id/actionbar_homebutton"
android:layout_width="?attr/actionBarSize"
android:layout_height="wrap_content"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_home_black" />

<ImageButton
android:id="@+id/actionbar_drawerbutton"
android:layout_width="?attr/actionBarSize"
android:layout_height="wrap_content"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside"
android:src="@drawable/ic_drawer" />

<ImageView
android:id="@+id/actionbar_reddot"
android:layout_width="?attr/actionBarSize"
android:layout_height="wrap_content"
android:background="?attr/actionBarItemBackground"
android:scaleType="centerInside" />
</LinearLayout>


</RelativeLayout>


I think you are making it more complex. you can also perform your requirements using like this, you just have nothing to do with your activity xml.

now, In your Activity's onCreate :

setTitle("Your Title");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);


then, implement this two default methods for menu ,

@Override
public boolean onCreateOptionsMenu(Menu menu)
getMenuInflater().inflate(R.menu.menu_view, menu);
return super.onCreateOptionsMenu(menu);


@Override
public boolean onOptionsItemSelected(MenuItem item)
switch (item.getItemId())
case android.R.id.home:
onBackPressed();
break;
case R.id. actionbar_drawerbutton:
//your code
break;
case R.id. actionbar_reddot:
//your code
break;

return super.onOptionsItemSelected(item);



now you have to create a xml file in res/menu/menu_view.xml like this,

res/menu/menu_view.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:title="Drawer Button"
android:id="@+id/actionbar_drawerbutton"
android:icon="@drawable/ic_menu_camera"
app:showAsAction="always">
</item>
<item
android:title="Red Dot"
android:id="@+id/actionbar_reddot"
android:icon="@drawable/ic_favorite"
app:showAsAction="always">
</item>

</menu>


this will manage all your cases. try this. I'm sure you will get better output.

Replace TextView and use startOf and EndOf instead of LeftOf and rightOf

use startOf and EndOf instead of LeftOf and rightOf

<TextView
android:id="@+id/actionbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="105dp"
android:layout_toRightOf="@id/actionbar_backbutton"
android:layout_toLeftOf="@id/actionbar_homebutton"
android:background="?attr/actionBarItemBackground"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:text="@string/Easybook_com"
android:textColor="@color/colorBlackText"
android:textSize="20sp" />


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.