Really odd behaviour. I have a simple layout, 4 image views in one column that match up with 4 buttons on next column. I've used a gradient (subtle) background image - going from darker to lighter left to right.
The image view background image displays correctly, in that it has the darker color background as it's the left side of the background image. However the button background image is reversed with gradient going in the opposite direction.
Both the image and button views use the same background image. I can not understand why the background image is flipped on the button. Any ideas?
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".IndexMenuActivity">
<LinearLayout
android:layout_width="75dp"
android:layout_height="match_parent"
android:layout_marginLeft="0sp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/redbkg"
app:srcCompat="#drawable/i_ax" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/bluebkg"
app:srcCompat="#drawable/i_mx" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/greenbkg"
app:srcCompat="#drawable/i_ref" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/yellowbkg"
app:srcCompat="#drawable/i_cal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="75dp"
android:orientation="vertical">
<Button
android:id="#+id/imageButton1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/redbkg"
android:onClick="subjectListMx"
android:text="ASSESSMENT"
android:textAppearance="#style/TextAppearance.AppCompat.Title"
android:textColor="#FFFFFF"
android:textSize="34sp" />
<Button
android:id="#+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/bluebkg"
android:onClick="subjectListMx"
android:text="MANAGEMENT"
android:textColor="#FFFFFF"
android:textSize="34sp" />
<Button
android:id="#+id/imageButton3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/greenbkg"
android:onClick="subjectListRef"
android:text="REFERENCE"
android:textColor="#FFFFFF"
android:textSize="34sp"/>
<Button
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:background="#drawable/yellowbkg"
android:onClick="subjectListCal"
android:text="CALCULATOR"
android:textColor="#FFFFFF"
android:textSize="34sp"/>
</LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>
Using a color meter, it does not appear that there's any flipping going on; the gradient starts with a lighter color on the left and moves to a darker color on the right for both the background of the image and the background of the text.
The problem is that you have two different gradients, so you go from light to dark and then light to dark again. You probably want to apply a single gradient to both views.
Related
I want to create one screen where I can click image of card as shown in below given image.
I have created screen like this with code as given below and this code actually works but I'm just not sure how to add that card cutout layout on this.
<RelativeLayout
android:id="#+id/rlCamera"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible">
<androidx.camera.view.PreviewView
android:id="#+id/viewFinder"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.5"
android:background="#color/black" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="#dimen/_24sdp"
android:layout_height="#dimen/_24sdp"
android:layout_margin="#dimen/_15sdp">
<com.google.android.material.card.MaterialCardView
android:layout_width="#dimen/_34sdp"
android:layout_height="#dimen/_34sdp"
android:alpha="0.2"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/_50sdp" />
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="#dimen/_15sdp"
android:layout_height="#dimen/_15sdp"
android:layout_centerInParent="true"
android:src="#drawable/ic_close"
android:tint="#color/white" />
</RelativeLayout>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/_25sdp"
android:text="License"
android:textColor="#color/white"
android:textSize="#dimen/_14sdp"
android:textStyle="bold" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_120sdp"
android:gravity="center_horizontal"
android:orientation="vertical">
<androidx.camera.view.PreviewView
android:id="#+id/viewFinderCard"
android:layout_width="match_parent"
android:layout_height="#dimen/_150sdp"
android:layout_marginHorizontal="#dimen/_40sdp" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_40sdp"
android:text="Front of card"
android:textColor="#color/white"
android:textSize="#dimen/_14sdp"
android:textStyle="bold" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/_70sdp"
android:layout_marginTop="#dimen/_10sdp"
android:text="All 4 corners should be aligned to card given above."
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="#dimen/_12sdp" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imgCapture"
android:layout_width="#dimen/_54sdp"
android:layout_height="#dimen/_54sdp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/_40sdp"
android:src="#drawable/ic_capture" />
</RelativeLayout>
</RelativeLayout>
Result
But now I'm not sure how to add the transparent cutout for card image rectangle.
Can anyone help me with this?
I strongly recommend to use 9-patch bitmap for such cutout. if some ViewGroup have solid/semitransparent/image as a background then its hard to "cut out" some part of it from child side, you should override onDraw then and make some manual math and job on Canvas... it should be at least drawable, but your sample isn't easy to be made programmatically (especially colooured corners).
would be way easier to set 9-patch as background for whole layout in place of currently set "#color/black" and alpha. be aware of content and stretch areas and set some maxWidth and maxHeight (or fixed) for frame with card preview. 9-patch will wrap it nicely
I am creating an Android application for an RGBCCT LED strip controller. This application is basically a control panel that lets the user specify the colour of the RGB portion of the strip, as well as the colour temperature of the CCT portion. The problem here lies in the slider for selecting the hue of the RGB part. What I want it to be is a seekbar in the default Android style, except the background is a rainbow to reflect the hue spectrum in HSV colours. The problem is that I am unable to get the rainbow image to stretch along the length of the seekbar, such that it starts at red, runs through the entire spectrum, and ends at red. However, the scaling of the image causes it to tile, rather than stretch along the length.
Initially, I tried to create a seekbar style (progress drawable) that does the stretching by itself, but I was unsuccessful. I tried using bitmaps and scale drawables. As such, I resorted to visualizing the rainbow with an ImageView widget under the seekbar by using a FrameLayout. The ImageView uses the "fitXY" scale type. This seemed like a success, as the preview showed what I had in mind. However, on my phone, the rainbow does not stretch as intended at all, as it does the tiling exactly as it did in the seekbar progress drawable. What am I doing wrong? Could it be related to the way the layout_width parameters are handled?
Here is the XML code of the front page of the application. I collapsed the textview widgets as they are not of interest, at least I think, as they take up loads of lines. The actual seekbar implementation is at the bottom.
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context=".MainActivity">
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
android:layout_marginEnd="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:scrollbarStyle="outsideInset"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<nl.madmijk.rgbwwcontrolepaneel.ConnectionView
android:id="#+id/connection_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<!-- Top half of the sliders for the CCT portion -->
<LinearLayout ...>
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<!-- Bottom half of the sliders for the RGB portion -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<ImageView
android:id="#+id/RGB_accent"
android:layout_width="#dimen/spacing_accent"
android:layout_height="match_parent"
app:srcCompat="?attr/colorAccent" />
<Space
android:layout_width="#dimen/spacing_regular"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView .../>
<TextView .../>
</LinearLayout>
<SeekBar
android:id="#+id/RGB_bar_intensity"
android:layout_width="match_parent"
android:layout_height="#dimen/seekbar_height"
android:max="255"
android:progress="0" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView .../>
</LinearLayout>
<SeekBar
android:id="#+id/RGB_bar_sat"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="match_parent"
android:layout_height="#dimen/seekbar_height"
android:max="255"
android:progress="0" />
<Space
android:layout_width="match_parent"
android:layout_height="#dimen/spacing_regular" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView .../>
</LinearLayout>
<!-- Here is the portion of interest -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="#dimen/huebar_thickness"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
android:adjustViewBounds="false"
android:scaleType="fitXY"
android:src="#drawable/hue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<SeekBar
android:id="#+id/RGB_bar_hue"
android:layout_width="match_parent"
android:layout_height="#dimen/seekbar_height"
android:max="255"
android:progress="0"
android:progressDrawable="#drawable/hue_seekbar_progress" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Below are the preview of the layout in Android Studio and the resulting layout on my phone, respectively.
Expectations vs reality (I cannot embed images yet...)
Just as a test to make sure it is actually a stretching issue, I hard-coded the width of the image, and sure enough, it won't squeeze the image on my phone. Test preview, Test result.
I have a layout which contains a button and a text view. I want to apply a color (with some alpha) to that layout. I've already tried many solutions other suggested and I ended up with this:
<!-- Header -->
<RelativeLayout
android:id="#+id/header_container"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginLeft="1dp"
android:background="#color/app_dark_gray">
<Button
android:id="#+id/button"
android:layout_width="210dp"
android:layout_height="match_parent"
android:background="#drawable/button_background_image"
android:text=""
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/textinfobar"
style="#style/InfoBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:paddingBottom="3dp"
android:paddingTop="3dp"
android:text="" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DD000000"
android:clickable="true"
android:visibility="visible"/>
</RelativeLayout>
I appended a View to my relative layout and gave it the color I wanted.
The problem is that only the TextView gets that color. The button stays the same way. Is there any way I can solve this?
EDIT:
I need this to work on API 16 and higher
I have a simple action bar, It contains two ImageButtons and and a Button. The problem is The images in ImageButtons are not exactly in the centre of the bar. Without the Button, They seem to aligned because the action bar itself wraps perfectly around them. But when I introduce a Button the ImageButtons seem to stick to the ceiling of the bar.
Here is my .xml file
<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"
android:background="#0099cc"
tools:context="com.convo.imgfs.FullscreenActivity">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<ImageView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/bg_image"
android:scaleType = "centerCrop"/>
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout android:id="#+id/fullscreen_content_controls"
style="?metaButtonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/black_overlay"
android:orientation="horizontal"
tools:ignore="UselessParent">
<ImageButton
android:id="#+id/likes_button"
android:src="#drawable/likes_imgbutton"
android:background="#android:color/transparent"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitCenter"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/comments_button"
android:src="#drawable/comments_imgbutton"
android:background="#android:color/transparent"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitCenter"
android:layout_weight="1"/>
<Button
style="?metaButtonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:text="37 comments"
android:id="#+id/show_comments_button"
android:layout_weight="2"/>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Done"
android:id="#+id/done_button"
android:layout_gravity="right|top" />
</FrameLayout>
And here is a Screenshot of the activity (The 'Likes' and 'Comments' icons should be horizontally aligned with the the text "37 comments")
Use gravity in this imageButton tags as per my understanding your xml code is perfect for your requirement just you need to give gravity to it as centerVetical
<ImageButton
android:id="#+id/comments_button"
android:src="#drawable/comments_imgbutton"
android:background="#android:color/transparent"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitCenter"
android:layout_weight="1"/>
I have few buttons in my app that i have applied circular png images on them but the edges gets pixelated, i don't know how to nine patch a circular image. If anybody knows a different way of doing it
Plzzz help
here is the code
<LinearLayout
android:id="#+id/containerofbluefi"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="30dp"
android:layout_weight="70"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="100" >
<Button
android:id="#+id/b_Select_blue"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:background="#drawable/selector_bluetooth"
/>
<ImageView
android:id="#+id/b_Select_wifi"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="10dp"
android:background="#drawable/selector_wifi"
/>
</LinearLayout>
here is the screeshot:-
you can see the upper and lower portion is blured....