I am trying to add a transparent button bars at the top and bottom of my activity, much like in the Android Gallery App.
I have been looking through the Gallery app source code, but I'm not able to see how they did it. When using some snippits of their code, I am able to produce a button bar, but it is a dark grey color with lighter grey buttons:
<LinearLayout android:id="#+id/gridView_multiSelectBar"
android:orientation="horizontal" android:visibility="gone"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:clickable="false"
android:paddingTop="5dp" android:paddingLeft="4dp"
android:paddingRight="4dp" android:paddingBottom="1dp"
android:background="#android:drawable/bottom_bar"
android:layout_alignParentBottom="true">
<Button android:id="#+id/gridView_multiSelectBar_button_share"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_share" />
<Button android:id="#+id/gridView_multiSelectBar_button_copy"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_copy" />
<Button android:id="#+id/gridView_multiSelectBar_button_delete"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_delete" />
<Button android:id="#+id/gridView_multiSelectBar_button_close"
android:layout_width="0dp" android:layout_height="match_parent"
android:layout_weight="1" android:text="#string/gridView_multiSelectBar_button_close" />
</LinearLayout>
The code implies that they are using Button widgets. The screenshot below almost looks like its using a menu for the bottom, but then I'm not sure how they are drawing the top area.
My app has a black background. I would like these buttons to a thin border to show the boundaries between them, as well as the main content.
Can anyone can point me in the right direction?
Thanks in advance,
Kevin
A similar question was asked and answered in
How to Set Opacity (Alpha) for View in Android.
It is a matter of setting the alpha content of your view. Hope that helps you.
Cheers!!!
nJoshi
Related
I want to make a button which has an indeterminate progress bar around it's outside, as we can see here.
Based upon the available widgets, I cannot see how to make a circular button with this progress bar on it's outside.
At this point, I have my floating action button:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="?android:attr/actionModeWebSearchDrawable" />
With no progress bar!
I found this example - but cannot get it to load correctly into my project.
Is there a 'native' simple way to achieve this design?
Update
Following help, now I have something like this:
Note the right hand is the suggested answer. Left hand is the style of button I am aiming for.
My code is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progress="50"
app:indicatorColor="#color/colorAccent"
app:trackColor="#color/colorPrimary"
app:trackThickness="2dp"
/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardBackgroundColor="?attr/colorSecondary"
app:cardCornerRadius="24dp"
android:layout_gravity="center"
app:cardPreventCornerOverlap="true">
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:src="?android:attr/actionModeWebSearchDrawable"/>
</androidx.cardview.widget.CardView>
</FrameLayout>
</LinearLayout>
Basically the left hand button is slightly larger with slightly smaller search image -- how can I edge closer to this? I have tried playing but can't quite get the sizing right. I thought adding padding would help but doesn't seem to make a difference. I wonder if there is a way to combine your solution with my floating action button - to perhaps get the best of both worlds more easily?
Instead of Floating button maybe you can try it this way with Frame Layout and CardView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progress="50"
app:indicatorColor="#color/colorAccent"
app:trackColor="#color/colorPrimary"
app:trackThickness="2dp"
/>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="25dp"
android:layout_gravity="center"
app:cardPreventCornerOverlap="true">
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:src="#drawable/app_top_logo"/>
</androidx.cardview.widget.CardView>
</FrameLayout>
</LinearLayout>
I am learning android programming and setting myself a task to get to grips with layouts. I am trying to create a virtual "Magic 8 Ball".
My aim is to have some random text appear in the white circle where the 8 would normally appear.
How do go about aligning the text so that on different devices the text always appears in the same relative position to the black ball, so is always within the white circle?
Here is an example of what I am trying to do
Here is my code so far
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal"
tools:context="uk.co.simoncarr.magic8ball.MainActivity">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="49dp"
android:layout_centerHorizontal="true"
android:text="#string/title"
android:textSize="36sp"
tools:layout_editor_absoluteX="107dp"
tools:layout_editor_absoluteY="10dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img8Ball"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center_vertical|center_horizontal"
app:srcCompat="#drawable/magic8ball"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/txtMessage"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="111dp"
android:layout_marginRight="111dp"
android:layout_marginTop="296dp"
android:text="The Anser is Yes"
android:textAlignment="center"
android:textSize="18sp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="447dp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Before answering the question I should comment on the fact that the elements inside you ConstraintLayout are not constrained in any way so when you run the app they will not keep the positions you have given them in the layout editor. You should fix this before doing anything else.
One approach you could look at could be to have 2 circle drawables, one with a black background and one with a white one and place one on top of the other. This way you could use the relatively new "Circular Positioning" feature in ConstraintLayout as outlined in this post. This will give you a lot of flexibility and power over choosing the positioning of the white circle in relation to the black.
There are plenty of explanation about how to get buttons to display like standard dialogue buttons - which I follow. I have this in my xml:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:divider="?android:attr/dividerVertical"
style="?android:attr/buttonBarStyle"
android:showDividers="middle"
android:measureWithLargestChild="true">
<Button
android:id="#+id/button_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/dialog_button"
android:text="#string/button_cancel" />
<Button
android:id="#+id/button_ok"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/dialog_button"
android:text="#string/button_ok" />
</LinearLayout>
This works perfectly well and produces the visual design I need. However when I touch the buttons, they don't highlight. This is rather annoying, as everything else is exactly as it should be. It seems that the buttonBarButtonStyle doesn't include the state drawables for different states of the button. Is there an easy way to get the highlight back?
Of course, I can just define my own state drawable defining different colours, but I want to use theme colours instead.
You need to apply the background:
android:background="?android:attr/selectableItemBackground"
to achieve the default "button bar" style and behavior.
I have this layout for my header:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<Button android:id="#+id/home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Home"
android:background="#drawable/ic_menu"
android:textSize="11dp"
/>
<Button android:id="#+id/questions"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Questions"
android:textSize="11dp"
android:background="#drawable/ic_menu"
android:layout_toRightOf="#+id/home" />
<Button android:id="#+id/businesses"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="11dp"
android:text="Businesses"
android:background="#drawable/ic_menu"
android:layout_toRightOf="#+id/questions"
/>
<Button android:id="#+id/learn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Learn"
android:textSize="11dp"
android:background="#drawable/ic_menu"
android:layout_toRightOf="#+id/businesses"
/>
</LinearLayout>
What I thought was that if I made the button backgrounds with images, then that would enable me to not have space between the buttons. Right now, the header buttons render nicely, but there is a thick whitespace background space between them. How could I get rid of that white space and make the space between them just 1px?
I just uploaded a photo of the emulator. See the 4 dark boxes on the top of the screen? That is the header with the spaces.
Thanks!
There is a potential solution in a similar question here, Is there a way to completely eliminate padding in a LinearLayout containing buttons?
Your drawable ic_menu could have padding, if you are using a 9-patch for that image, when you author it make sure the black lines along the right and bottom are as you intended, because this is for specifying the content area in your 9-patch and could contribute to padding.
Also, try adding 0dp for both margin and padding on the buttons.
Hope that helps.
The problem is that the image contains a border color. Remove the border from the image, or use a solid color #868686, which is the image center color.
I Have scoured the site and several others and I am having a problem finding a way to make a clarity nice icon styled image button. The image buttons I keep using fill the content and look just distorted, I want very nice looking icons styled image buttons, and instead its smudged stamps with little clarity. I want them spaced enough you can see the background behind them, Do i need to somehow make the src the image and the background clear?
heres some of my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/debface"
>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="4"
android:gravity="bottom"
>
<!-- Images coming out Blurry, I need to compress like a hires icon file -->
<TableRow>
<ImageButton
android:id="#+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/debraidcard"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
</TableRow>
I have used several different sizes on my images, i have switched between .jpg and .png. I follwed several tutorials, didn't like the outcomes. Any help pointing me in the right direction is greatly appreciated
Instead of setting your image to the background set it to src:
android:src="#drawable/cool_drawable"
that will give you your bitmap in the center of what looks like the default button.
If you don't like the button in the back set the background to #00000000 (transparent) and you will end up with only your Drawable as the button.