I would like how can do to have an image in my relative layout to be above (on top layer) my toolbar (in the same relative layout) and not below it. Any idea ?
The layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/splash"
android:adjustViewBounds="true"
android:layout_below="#id/my_toolbar"
android:gravity="top"
android:layout_alignTop="#id/my_toolbar"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<include
android:id="#+id/my_toolbar"
layout="#layout/my_toolbar"
></include>
</RelativeLayout>
</FrameLayout>
the toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:background="#7dca2c"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
You don't need the RelativeLayout, your FrameLayout will handle that just fine.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/my_toolbar"
layout="#layout/my_toolbar"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/splash"
android:adjustViewBounds="true"
android:layout_gravity="top|center_horizontally"/>
</FrameLayout>
By having the included layout as the first child, it will be the first layer - and the ImageView will be the second. Adding android:layout_gravity="top|center_horizontally" to the ImageView will then align it correctly within the ViewGroup.
Related
I want to display the logo at the centre of the Action Bar. Here's my layout code: the below code should work but it did not why? please help me
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:layout_gravity="center"
/>
</LinearLayout>
And in the onCreate()
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.custom_logo);
Your Toolbar is just like a ViewGroup that can hold other views.So an easier approach will be to place an ImageView in the Toolbar.For eg:-
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/ToolbarCustomIconColor" >
<RelativeLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_content" >
<ImageView
android:id="#+id/imgLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/your_icon" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
You can create a custom Toolbar like this and manipulate it as much as you want .
image to toolbar
The ImageView change it's position from centre of the screen(or centre of toolbar?) to the left of toolbar,I conceived a layout and stickup below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="?attr/colorPrimary"/>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_margin="60dp"
android:background="#android:color/white"
android:elevation="10dp"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/background">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_below="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/long_string"/>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
In my limited experience with android Animation,view's animation can not relevance with scroll,so I imagine a way that use scrollListener to set the height of backgroundView and the distance of Imageview & toolbar's left.
Wanted to know if it's good practice to do that and what would be the better way to implement that?tks.
I have an imageview which is displayed in center of the screen. In portrait mode it displays fine but when i rotate screen in horizontal mode then imageview is opelapping my toolbar and status bar like in screenshot attached below. I tried couple of settings but it didn't change anything. I tired below toolbar option but it will attach imagview after toolbar but i need to display imageview in center.So I need a help to fix this laypout.Here is my layout xml code.
Imageview layout:
<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"
tools:context=".DetailActivity"
>
<include android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:transitionName="photo_hero"
android:id="#+id/image"
/>
</RelativeLayout>
toobal layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark" >
</android.support.v7.widget.Toolbar>
screenshot:
http://s9.postimg.org/6lyxbaq27/landscape_problem.png
http://s9.postimg.org/n8ghkdizz/landscape_problem_2.png
Put this:
android:layout_below="#+id/toolbar"
inside of your <ImageView> tag.
It should look like:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:transitionName="photo_hero"
android:id="#+id/image"
/>
Instead of relative layout try to use Frame Layout like:-
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/main_parent_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:adjustViewBounds="true"
android:transitionName="photo_hero"
android:id="#+id/image"
/>
</LinearLayout>
<include layout="#layout/toolbar"/>
As Viktor suggested. I used linearlayout with orientation vertical and with few parameter changes in my imageview.Here is the final code:
<LinearLayout 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"
tools:context=".DetailActivity"
android:orientation="vertical"
>
<include android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:id="#+id/image"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
How do I set this action bar in a way even when scroll the long data screen it keeps visible on the top of the screen?
toolbar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
Guys please see my update:
I tried everything but it seems that next component after actionBar is not being set after actionBar but behind it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/background_telas"
android:orientation="vertical" >
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/actionBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/actionBarBackgroundColor"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp" >
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#A0A09F" />
Project (eclipse):
Screen stopped:
Screen scrolled up:
Java:
Toolbar actionBar = (Toolbar) findViewById(R.id.actionBar);
actionBar.setTitle("ProTaxi Passageiro");
actionBar.setSubtitle("Cadastro");
actionBar.setTitleTextColor(Color.parseColor("#846A1A"));
setSupportActionBar(actionBar);
If you don't want the Toolbar to scroll with the content, then you have to put it outside the ScrollView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<ScollView
...>
you content here..
</ScollView>
</LinearLayout>
You can also set the layout_scrollFlags to enterAlways to get rid of the toolbar scrolling.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
I had a similar problem with the layout behind the toolbar, setting fixed height to the Toolbar helped me, try android:layout_height="?attr/actionBarSize". Also use the layout #Floern adviced you.
To fix the layout above the bar, try doing the following. Wrap the whole activity in a relative layout. Then give an id to the Top Action Bar Relative layout. Afterwards on your scroll view, add this line layout_below/#id/top_profile_bar to have the layout scroll below the bar.
<RelativeLayout 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">
<!--Top Action Bar-->
<RelativeLayout
android:id="#+id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="50dp">
<include layout="#layout/top_actions_bar" />
</RelativeLayout>
<!--Add a layout_below/#id/top_profile_bar to have it below the bar-->
<ScrollView
android:layout_below="#id/topprofilebar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Some Content-->
</ScrollView>
then in your top_actions_bar.xml add app:layout_scrollFlags="enterAlways" to the tool bar.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/profileToolBar"
app:layout_scrollFlags="enterAlways"
android:background="#drawable/bg_white_grey_border_bottom">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivBack"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<TextView
android:layout_toRightOf="#+id/ivBack"
android:id="#+id/top_actions_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textSize="20sp"
android:textColor="#color/colorBlack"
android:layout_marginLeft="15dp"
android:text="Scoper Settings"
/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
Hope this helps!
For the life of me, I cannot get this Toolbar to layout on top (note: not above, but on top of) its sibling LinearLayout. The only way I can get the Toolbar to overlay its sibling is by specifying the Toolbar's elevation to be > 0, but this doesn't work for pre-5.0.
I am using a parent FrameLayout, and the child Toolbar is located after its sibling LinearLayout in the XML. What am I missing? Even the Android Studio preview pane shows the Toolbar on top of the LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
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:id="#+id/fragment_main_container"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame"
android:orientation="vertical"
>
<FrameLayout
android:layout_weight="4"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher"
/>
</FrameLayout>
<ListView
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:id="#+id/home_list_listview"
android:drawSelectorOnTop="true"
android:divider="#null"
android:dividerHeight="0dp"
tools:listitem="#layout/home_list_item"
>
</ListView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/slogan"
android:gravity="center"
android:textColor="#color/colorPrimaryDark"
/>
</LinearLayout>
<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/ThemeOverlay.AppCompat.Light"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
/>
</FrameLayout>
Turns out I had a fragment committing the linear layout over the main activity, which already contained it. Oops!
That's because of FrameLayout.
If you want to use FrameLayout, the views will not relate each other.
So all you need to do is ...
set "height of toolbar" to MarginTop of LinearLayout.
Hope, it will help.