everyone, first of all, I'm with a problem in my android project. I set an image as a layout background with the appropriate width (5.5), and when I run the application it appears white background instead of the intended image. The image is in at the drawable folder, all normal.
The image has the same dimensions of the layout (5.5)
Code:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:animateLayoutChanges="true"
android:background="#drawable/fundo"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="200dp"
app:srcCompat="#drawable/logo_branco" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="450dp"
android:fontFamily="#font/advent_pro_thin"
android:text="O automóvel ideal para si!"
android:textColor="#E76C00"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
If you want to load a whole image, I'd use the approach of having an ImageView at the root ViewGroup of the layout with both dimensions set to match_parent.
This will solve the issue of the image not loading with an added benefit of being able to define scale type (like centerCrop) which enables you to have a picture with any side ratio and be sure it'll fill the screen both vertically and horizontally.
Edit:
Proposed solution:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:animateLayoutChanges="true"
tools:context=".MainActivity">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/fundo" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="200dp"
app:srcCompat="#drawable/logo_branco" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="450dp"
android:fontFamily="#font/advent_pro_thin"
android:text="O automóvel ideal para si!"
android:textColor="#E76C00"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
Related
A simple problem, I used a CardView to add elevation to a Button but when assigning cardElevation , then the CardView draws a box inside of itself, I tried switching the elevation and other attributes and I can minimize the effect of it by increasing the cardElevation but that is not a solution.
Here is the CardView from the XML.
<androidx.cardview.widget.CardView
android:layout_width="38sp"
android:layout_height="38sp"
app:cardElevation="5sp"
android:layout_gravity="end"
android:layout_marginTop="60sp"
android:layout_marginRight="12sp"
android:layout_marginEnd="12sp"
app:cardBackgroundColor="#97FFFFFF"></androidx.cardview.widget.CardView>
The CardView in the app. (The box in the upper right corner)
The whole XML file, the last CardView is the one on the image.
<?xml version="1.0" encoding="utf-8"?>
<com.flipboard.bottomsheet.BottomSheetLayout
android:id="#+id/bottomsheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.map.MapFragment">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="20dp"
android:layout_gravity="end"
android:layout_marginTop="60dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
app:cardBackgroundColor="#97FFFFFF">
<ImageButton
android:layout_width="38dp"
android:layout_height="38dp"
android:padding="1dp"
android:src="#drawable/ic_baseline_refresh_24"
android:background="#00FFFFFF"
android:elevation="10dp"
android:id="#+id/btn_reset_map"/>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="20dp"
android:layout_gravity="end"
android:layout_marginTop="10dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
app:cardBackgroundColor="#97FFFFFF">
<ImageButton
android:layout_width="38dp"
android:layout_height="38dp"
android:padding="1dp"
android:src="#drawable/ic_baseline_layers_24"
android:background="#00FFFFFF"
android:elevation="10dp"
android:id="#+id/btn_layer_map"/>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="38dp"
android:layout_height="38dp"
app:cardElevation="5dp"
android:layout_gravity="end"
android:layout_marginTop="40dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
app:cardBackgroundColor="#97FFFFFF"></androidx.cardview.widget.CardView>
</LinearLayout>
</fragment>
</com.flipboard.bottomsheet.BottomSheetLayout>
You can set the CardView background color programmatically to the same color as the color set with app:cardBackgroundColor
CardView cardview = findViewById(R.id.cardview);
cardview.setBackgroundColor(ContextCompat.getColor(this, R.color.cardview_color));
And create this color in colors.xml
<color name="cardview_color">#97FFFFFF</color>
And add this id to the xml:
<androidx.cardview.widget.CardView
android:id="#+id/cardview"
....
Note: For some reason android:background="#97FFFFFF" doesn't work
Setting android:outlineProvider="none" fixed the issue for me
I tried to create an actionBar like this one, "this is a website template "
so I created a file action_bar.xml which I'll inflate, A RelativeLayout which has a height of wrap_content & a width of match_parent , it has the gear icon and all other details except that I can't get a part of the round picture outside of the RelativeLayout like the picture.
I tried using margins but it doesn't get out of the RelativeLayout, The RelativeLayout gets extended instead. so, More margin in the picture results in more height in RelativeLayout.
Any suggestions?
<?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="wrap_content">
<ImageButton android:src="#drawable/roundPicture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/gearICON"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
No Libraries please, I'm not making an app, I'm just trying to understand.
quick recap. I want a part of the first ImageButton outside of the RelativeLayout
Check if it is this what you are looking for
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ImageButton
android:background="#android:drawable/ic_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="30sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>
First, I ran into a problem that my data appears under the ImageView, not behind it
but I fixed it by adding my data which is a listview, after the relativeLayout in the frameLayout, Thanks P.Juni for the idea btw
The XML which runs totally fine is
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000">
<ImageButton
android:id="#+id/gearIcon"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10sp"
/>
</RelativeLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<ImageButton android:id="#+id/imageButton"
android:background="#drawable/ic_launcher_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="60sp"
android:layout_marginLeft="30sp"
android:padding="0sp"/>
</FrameLayout>
I created an app and put Admob inside it. But the admob is overlapping the content in my relative layout (I think So).
My XML code is as follows
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="#+id/main_frag"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto">
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<com.orangegangsters.github.swipyrefreshlayout.library.SwipyRefreshLayout
android:id="#+id/activity_main_swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srl_direction="both">
<android.support.v7.widget.RecyclerView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#null"
android:scrollbars="none"/>
</com.orangegangsters.github.swipyrefreshlayout.library.SwipyRefreshLayout>
<com.exfileexplorer.filemanager.ui.views.FastScroller
android:id="#+id/fastscroll"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_gravity="right"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/nofilelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_insert_drive_file_white_36dp"/>
<TextView
style="#android:style/TextAppearance.Medium"
android:layout_width="wrap_content"
android:textColor="#666666"
android:id="#+id/nofiletext"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:fontFamily="sans-serif-medium"
android:layout_centerHorizontal="true"
android:text="#string/nofiles"/>
</RelativeLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_home_footer" />
</FrameLayout>
ScreenShot
I am attaching a screenshot how it looks like. As per the admob policy its clearly unethical. How to place the ad code in between them without violating ad policy.
put the admob block inside the relative layout and add this android:layout_below="#id/nofiletext" to the admob block, like this:
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_home_footer"
android:layout_below="#id/nofiletext"/>
</RelativeLayout>
My current layout looks the following:
MY XML layout looks like:
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical" >
<TextView
android:id="#+id/tvLetter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="3"
android:text=""
android:gravity="center"
android:textSize="#dimen/letter_size"
android:textColor="#FFFFFF"
android:background="#drawable/bd" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="1" >
<Button
android:id="#+id/colorButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:background ="#drawable/colors"
android:layout_alignParentLeft="true" />
<Button
android:id="#+id/soundButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:background="#drawable/sound" />
<Button
android:id="#+id/eraserButton"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/eraser" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
android:layout_weight="2" >
<ImageView
android:id="#+id/ivIcon"
android:layout_width="#dimen/letter_icon"
android:layout_height="#dimen/letter_icon"
android:scaleType="fitXY"
android:layout_alignParentLeft="true"
android:background="#drawable/zebra" />
<LinearLayout
android:id="#+id/actionHolder"
android:layout_toRightOf="#+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/wordSound"
android:layout_width="#dimen/btn_action"
android:layout_height="#dimen/btn_action"
android:background="#drawable/sound" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
My #dimen/letter_icon is being used for different sizes based on the screen size. I am trying to make it compatible with both phone and tablet (different size screen). How do I achieve the following in my layout:
Let's say the ZEBRA text is inside a textview and the sound is in a button.
I am thinking the bottom ImageView has to be inside another layout, linearleayout maybe? and take up 3/4 of the space of the screen width.
Put your ZEBRA and SPEAKER buttons in vertical LinearLayout. Set buttons' height to match_parent and layout_weight to 1 and you should have what you want
and if you want to distribute width among your buttons' container and ImageView, set them width to match_parent and play with layout_weight there.
I'm developing an Android smart watch application. The initial screen appears fine. But, when I go to next screen, the upper part pops up with the name of project something like this. In the below image, Watch is the name of the project.
I want to see the entire screen instead of white space which contains project's name. Does anyone know how to solve it and why is it appearing?
My XML file is
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout 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:orientation="vertical"
tools:deviceIds="wear">
<LinearLayout
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/black"
android:weightSum="1"
tools:ignore="UselessParent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<LinearLayout
android:id="#+id/sign_up_top_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:textAlignment="center"
android:textSize="18sp"
android:text="#string/text"
android:background="#color/black"
android:textColor="#color/white"
android:fontFamily="Century-Gothic.ttf" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="18dp"
android:layout_height="19dp"
android:layout_toRightOf="#+id/text"
android:src="#drawable/fingerprint" />
</LinearLayout>
<Button
android:layout_marginTop="10dp"
android:id="#+id/button"
android:background ="#drawable/roundedbutton"
android:text="#string/button_text"
android:layout_width="108dp"
android:textAlignment="center"
android:drawablePadding="20dp"
android:layout_gravity="center"
android:textColor="#color/white"
android:layout_height="75dp"
android:layout_weight="0.34" />
</LinearLayout>
</android.support.wear.widget.BoxInsetLayout>
Use a BoxInsetLayout for your root layout:
This class applies the required window insets depending on the screen
shape and lets you easily align views on the center or near the edges
of the screen.
And I would highly recommend you to read through this tutorial.
Edit 2:
You need to use:
android.support.wearable.view.BoxInsetLayout
not:
android.support.wear.widget.BoxInsetLayout
and add to the mainContainer:
app:layout_box="all"
<android.support.wearable.view.BoxInsetLayout
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:orientation="vertical"
tools:deviceIds="wear">
<LinearLayout
app:layout_box="all"
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/black"
android:weightSum="1"
tools:ignore="UselessParent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
The answer to the question was simple. I figured out after one day. I changed my theme from Theme.AppCompat.Light to Theme.AppCompat.Light.NoActionBar in Manifest file. The program name bar disappeared.