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>
Related
I'm trying to add the image view but when I do it has so much space between the top and bottom of the image. I'm using a bottom navigation with fragments. I would like to make the image close to the top with the space. What am I doing wrong with this layout?
Main Activity
<?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:design="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.gershpark.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/main_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:contentDescription="main image"
android:src="#drawable/fb_img_1497698892826" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/frame_layout"
android:layout_below="#id/main_image"
/>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="#drawable/shadow"
android:layout_above="#+id/bot_nav">
</View>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bot_nav"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_light"
design:itemIconTint='#f8f8f8'
design:menu='#menu/bot_menu'
/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Home Fragment
<FrameLayout 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="com.example.android.gershpark.HomeFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"/>
</FrameLayout>
Looks like by adding the following it removed the spacing that was there.
android:adjustViewBounds="true"
How can I align two views side-by-side in RelativeLayout? (Not Linearlayout)
I want to have ViewPager at 50dp width aligned at the right of the screen,
and have pink RelativeLayout take up the rest of the space.
I wish to avoid using 'weight' in Layouts.
Any solution, please?
<?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="120dp">
<RelativeLayout
android:id="#+id/dashboard_platform_view"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical">
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard_platform_viewpager"
android:layout_toRightOf="#id/dashboard_platform_view"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#color/colorPrimary"
android:minWidth="50dp">
</android.support.v4.view.ViewPager>
</RelativeLayout>
I've checked it. So, here you go:
<?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="120dp">
<RelativeLayout
android:id="#+id/dashboard_platform_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_toStartOf="#id/dashboard_platform_viewpager"
android:background="#color/colorAccent"
android:orientation="vertical"/>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard_platform_viewpager"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:background="#color/colorPrimary"
android:minWidth="50dp"/>
</RelativeLayout>
Change your layout as bellow, may help to resolve your issue
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="120dp">
<android.support.v4.view.ViewPager
android:id="#+id/dashboard_platform_viewpager"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:background="#color/colorPrimary"
android:minWidth="50dp" />
<RelativeLayout
android:id="#+id/dashboard_platform_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/dashboard_platform_viewpager"
android:layout_toStartOf="#id/dashboard_platform_viewpager"
android:background="#color/colorAccent"
android:orientation="vertical" />
</RelativeLayout>
Try to add android:layout_toLeftOf="#+id/dashboard_platform_viewpager" for RelativeLayout, and remove toRightOf for ViewPager
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 .
Here is my coordinator layout. Everything is ok, I can see everything.
But I can't see the ImageView. In code I am initializing ImageView correctly and have an object. I need Image view in center of screen.
If I change ImageView to button I see button in center of screen, but if I change to something other I can´t seen that element.
Please how Can I add ImageView to coordinatorLayout?
This code is in coordinatorlayout.
Thank you.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/status_btn"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center"
android:background="#color/red" />
<Button
android:id="#+id/delete_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Smazat"
android:visibility="gone" />
<include
layout="#layout/panel_camera_preview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<!--height a width se nastavuje dynamicky-->
<LinearLayout
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<RelativeLayout
android:id="#+id/bottom_sheet_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/header_vg"
android:layout_width="match_parent"
android:layout_height="#dimen/vision_bottom_sheet_header_height"
android:layout_alignParentTop="true"
android:background="#color/gray_header_vision"
android:gravity="center">
<TextView
android:id="#+id/header_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#color/white"
android:textSize="16sp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/vision_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header_vg"
android:background="#color/white"
android:scrollbars="vertical"
android:visibility="gone" />
<include
android:id="#+id/empty_vg"
layout="#layout/panel_vision_tutorial"
android:layout_width="match_parent"
android:layout_height="#dimen/vision_bottom_sheet_item_height"
android:layout_below="#+id/header_vg" />
</RelativeLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Here is my panel_camera_preview:
<my_package.CameraSourcePreview
android:id="#+id/camera_preview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray">
<my_package.GraphicOverlay
android:id="#+id/face_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</my_package.CameraSourcePreview>
CoordinatorLayout is a FrameLayout, thus the last View in order overlays the previous ones. Then Imageview results not visible because it is covered by your panel_camera_preview, while Button results visible, but only if is running on Lollipop or greater, cause its default elevation (2dp).
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.