Can someone help me make the title of my activity editable? I have this note taking app where I want to be able to add a title to the specific note that I want to add. I have tried using the id of the EditText from the menu as label in the Manifest.xml but it doesn’t work.
Sample code for the menu
<?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="Ok"
android:icon="#drawable/ic_done_white_48dp"
android:id="#+id/note_details_save"
app:showAsAction="always"/>
<item
android:title="back"
android:icon="#drawable/ic_back_button"
android:id="#+id/note_details_back"
android:orderInCategory="0"
app:showAsAction="always"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/note_details_title"/>
</menu>
Use setTitle("My title") by itself in your activity.
"My title" should be the content of your editText.
String title = et.getText().toString();
styles.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:background="#color/colorPrimary"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:elevation="8dp" app:elevation="8dp">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textPersonName"
android:paddingLeft="10dp"
android:text="#string/app_name"
android:ems="10"
android:id="#+id/editText2"
android:layout_weight="1" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
#Mel
I have no idea why no one has answered this properly. Here is the solution:
in the layout file of the activity(where u want the editable title). Add a editText inside your toolbar tag. It should look something like this(using support-library):
(Important: What's important to notice here is the editText inside your toolbar, don't worry too much about the attributes of the other tags).
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/yourId"
android:hint="yourHint"
android:background="#android:color/transparent"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Now on the onCreate method of said activity disable the default uneditable title:
getSupportActionBar().setDisplayShowTitleEnabled(false);
If u want control the positioning of the editText inside the toolbar, you can wrap it in a ConstraintLayout or RelativeLayout.
That's it... good luck to you all
Related
I am developing android app and I want to add switch inside toolbar it is not showing
below is my xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Switch
android:id="#+id/switch1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Switch" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
following screen current ui
I want to know how to achieve that kind of ui what I have to do
Simply Change AppTheme to NoActionBar from styles.xml
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
Now run your app, switch will show on the top in Toolbar.
You need to use custom toolbar which you are already using in your xml file but you need to remove your default toolbar by calling getSupportActionBar().hide(); in activity onCreate(). and set the color of toolbar in xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:elevation="#dimen/margin_large"
android:background="#color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Switch
android:id="#+id/switch1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Switch" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
So I am implementing a SearchView and right now I have two items in the layout. The back button and the search view.
I would like to know how can I make sure the back button appears on the left side of the screen before the search view, instead of the opposite.
This is the layout file:
<?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:id="#+id/back_btn"
android:title="#string/search"
app:icon="#drawable/ic_action_back_black"
android:icon="#drawable/ic_action_back_black"
app:showAsAction="ifRoom|collapseActionView"/>
<item android:id="#+id/search"
android:title="#string/search"
app:icon="#drawable/ic_search_black_24dp"
android:icon="#drawable/ic_search_black_24dp"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView"/>
</menu>
I tried to put the back button before the search view, and it works fine until I click on the search box.
The Search view expands and the back button stays on the right side of the screen.
Question : Is there a way to make sure the back button will stay on the left side even when the search box expands?
This is the toolbar I am using:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/PopupMenuStyle"
android:id="#+id/my_awesome_toolbar"
android:layout_width="fill_parent"
android:layout_height="?android:attr/actionBarSize"
app:titleTextColor="#android:color/black"
android:layout_alignParentTop="true"
android:gravity="right"
android:elevation="5dp">
</android.support.v7.widget.Toolbar>
Hope this will help someone
First, make sure your activity not have an ActionBar
<item name="windowActionBar">false</item>
Second, add this code to your .xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/my_appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:padding="#dimen/margin_small">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-9dp"
android:layout_weight="6" />
<android.support.v7.widget.SearchView
android:id="#+id/my_search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/md_white_1000"
android:clickable="true"
android:focusable="true"
android:iconifiedByDefault="false" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
Last, set your back arrow programmatically
Display Back Arrow on Toolbar
inside search view tag add this attribute android:maxWidth
I have white toolbar with menu item showed as action that is a black vector asset from material icons. There is no ripple effect on menu item click because ripple effect is also white. If toolbar background is changed to other color e.g blue, ripple appears. How to change menu item ripple color so it will be visible on white background? I was trying to change colorControlHighlight in AppTheme but it hasn't changed menu item ripple color.
Style
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#ffffff</item>
</style>
Layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
Menu
<?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:id="#+id/menu_action_read_all"
android:icon="#drawable/ic_done_all_black_24dp"
android:title="#string/menu_notifications_read_all"
app:showAsAction="ifRoom" />
</menu>
Activity
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_notifications, menu);
return true;
}
In your styles:
<style name="MyToolbarTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
Apply this theme to your toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/MyToolbarTheme"/>
Result:
EDIT
For the action item:
<style name="MyAppBarLayoutTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/MyAppBarLayoutTheme">
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.AppBarLayout>
Result:
Even I faced similar issue due to AppTheme. I was using Theme.MaterialComponents.NoActionBar as default theme for App and only for toolbar the ripple effect was not working. However I solved it using app:theme.
Please try adding a app:theme="#style/Theme.AppCompat.Light.NoActionBar" to your toolbar. This is test with androidx.appcompat.widget.Toolbar it is working for me.
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
app:layout_collapseMode="pin"
android:elevation="4dp"
app:theme="#style/Theme.AppCompat.Light.NoActionBar"
android:stateListAnimator="#animator/appbar_elevation"
tools:targetApi="lollipop">
If your view doesn't ripple by default then, all you have to do is add android:background="?attr/selectableItemBackground" to your view to get that ripple/touch effect.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="?attr/selectableItemBackground"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher" />
path : drawable/action_item_ripple
action_item_ripple.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/white"
android:radius="20dp">
</ripple>
use
<com.google.android.material.appbar.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextAppearance="#style/TextAppearance.Widget.Event.Toolbar.Title"
app:titleTextColor="#android:color/white">
<TextView
android:id="#+id/textViewTitleToolbar"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/app_name"
android:textColor="#android:color/white" />
<androidx.appcompat.widget.AppCompatImageButton
android:id="#+id/imageViewToolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#drawable/action_item_ripple"
android:src="#android:drawable/ic_delete"
android:visibility="invisible" />
</androidx.appcompat.widget.Toolbar>
hello i have project that use multiple activity and xml one of this xml is navigation drawer it's easy to change backgournd color of actionbar/toolbar but when i change it on the other layout/xml background actionbar/tooolbar not change how to change all of them it's
Screenshot
screenshot
on this change
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context="ir.diamonddesign.tajrobi96.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/holo_red_dark"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
on this not change
/*
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="ir.diamonddesign.tajrobi96.Questionsactivity"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:textAppe``arance="?android:attr/textAppearanceLarge"
android:text="#string/kharej_text"
android:id="#+id/textView2"
android:textDirection="rtl"
android:layout_alignTop="#+id/textView3"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/dakhel_text"
android:textSize="15dp"
android:id="#+id/textView3"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="false"
android:textDirection="rtl" />
</RelativeLayout>*/
Find the file named styles.xml in your res folder.
You should have defined a theme for your project which looks something like below code
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/text_description</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/theme_teal</item>
</style>
Here, colorPrimary defines the color of your actionBar. This color must have been set to blue acc to the screenshot.
Try changing the colorPrimary value to the desired color that you want.
Change style.xml:
<item name="colorPrimary">#color/colorPrimary</item>
to :
<item name="colorPrimary">#android:color/holo_red_dark</item>
The problem i'm facing is, that when the SearchView gets the focus, the parent ActionBar enlarges nearly to the top of the keyboard (like in the screenshot below). The effect only occures if both, the android:fitsSystemWindow attribute of the Toolbar and the android:windowTranslucentStatus style property are set to true. If one of them is false, the problem doesn't exist anymore.
What am i doin wrong? Did i miss any configuration?
I have the following simple layout in my activity:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:focusableInTouchMode="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:fitsSystemWindows="true"
android:height="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<ScrollView
android:id="#+id/search_result_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
My styles.xml looks like this:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
The menu_main.xml looks like this:
<menu 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"
tools:context=".MainActivity">
<item
android:id="#+id/action_search"
android:icon="#android:drawable/ic_menu_search"
android:title="#string/search_button"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView"/>
</menu>
Screenshot of the 'bug':
Did you try to limit the toolbar's height like
<android.support.v7.widget.Toolbar
...
android:layout_height="?attr/actionBarSize" />
? Instead of using wrap_content?
(?attr/actionBarSize causes the system to choose the standard toolbar height for the current configuration, e.g. 56dp for portrait on mobile phone)