Hoe maak je een transparant demo-scherm voor een Android-app?

Ik probeer een semi-transparant demo-scherm te maken dat alleen wordt gelanceerd wanneer een gebruiker eerst mijn aanvraag installeert. Hier is een voorbeeld van de PULSE NIEUWS-app:

Galaxy Nexus

Nexus One

In plaats van een functie ‘Tap-to-Dext’, wil ik dat de gebruiker in staat is om door een paar van dergelijke transparante demo-pagina’s te vegen.

Voor mijn eerste poging heb ik een voorbeeld gewijzigd van de ViewPagerindicator Library. Ik gebruikte semi-transparante PNG’s in Imageviews in elk van de fragmenten van de weergave Pager. Ik lanceerde dit vervolgens als een ‘demo-activiteit’ in de oncreate-methode van mijn ‘hoofdactiviteit’.

Probleem: de ‘hoofdactiviteit’ kan niet op de achtergrond worden gezien – in plaats daarvan was het gewoon zwart. Ik probeerde de oplossingen hier , maar dat heeft het probleem niet opgelost .

Is er een betere benadering om iets dergelijks te maken, of ben ik op de goede weg?

Ik had ook een andere gerelateerde vraag die afhankelijk is van hoe dit wordt geïmplementeerd. Ik probeer tekst en pijlen te overheen, zodat ze op de achtergrond van de UI op de achtergrond wijzen. Door een PNG te gebruiken die de tekst en pijlen heeft, is het waarschijnlijk dat deze niet goed op verschillende apparaten zal opschalen. D.w.z. de pijlen wijzen niet noodzakelijkerwijs op de juiste UI-component op de achtergrond. Is er een manier om dit probleem ook aan te pakken?

Bedankt!

Hier is mijn code voor de eerste poging:

demoactivity.java

public class DemoActivity extends FragmentActivity {
    DemoFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.demo_activity);
        mAdapter = new DemoFragmentAdapter(getSupportFragmentManager());
        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);
        //mPager.setAlpha(0);
        UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(mPager);
        indicator.setFades(false);
        mIndicator = indicator;
    }
}

demofragmentAdapter.java

class DemoFragmentAdapter extends FragmentPagerAdapter {
    protected static final int[] CONTENT = new int[] { R.drawable.demo1, R.drawable.demo2, R.drawable.demo3, R.drawable.demo4};
    private int mCount = CONTENT.length;
    public DemoFragmentAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        return DemoFragment.newInstance(CONTENT[position % CONTENT.length]);
    }
    @Override
    public int getCount() {
        return mCount;
    }
    public void setCount(int count) {
        if (count > 0 && count <= 10) {
            mCount = count;
            notifyDataSetChanged();
        }
    } }

demofragment.java

public final class DemoFragment extends Fragment {
    private static final String KEY_CONTENT = "TestFragment:Content";
    public static DemoFragment newInstance(int content) {
        DemoFragment fragment = new DemoFragment();
        fragment.mContent = content;
        return fragment;
    }
    private int mContent;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            mContent = savedInstanceState.getInt(KEY_CONTENT);
        }
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ImageView image = new ImageView(getActivity());
        image.setBackgroundResource(mContent);
        LinearLayout layout = new LinearLayout(getActivity());
        layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        layout.setGravity(Gravity.CENTER);
        layout.addView(image);
        return layout;
    }
    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt(KEY_CONTENT, mContent);
    }
}

Antwoord 1, autoriteit 100%

Zet uw demo-informatie in een andere activiteit en geef het het volgende thema.

<style name="Transparent" parent="@android:style/Theme.NoTitleBar">
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowNoTitle">true</item>      
    <item name="android:backgroundDimEnabled">false</item>
</style>

Als je ActionBarSherlock gebruikt, verander dan parentin @style/Theme.Sherlock.

Dit geeft je een transparante activiteit, zodat je de activiteit eronder kunt zien.

Nu neem ik aan dat je ook een doorschijnende achtergrond wilt.

Voeg in de xml-lay-out (van uw transparante activiteit) toe:

android:background="#aa000000" 

De laatste 6 cijfers bepalen de kleur: 000000 is zwart.

De eerste 2 definiëren de dekking: 00 is 100% transparant, ff is 100% dekkend. Kies dus iets daar tussenin.

Antwoord 2, autoriteit 81%

Heb je ShowcaseView al bekeken? https://github.com/Espiandev/ShowcaseView.

Dit gebruiken:

View showcasedView = findViewById(R.id.view_to_showcase);
ViewTarget target = new ViewTarget(showcasedView);
ShowcaseView.insertShowcaseView(target, this, R.string.showcase_title, R.string.showcase_details);

Antwoord 3, autoriteit 14%

Pulse gebruikt een RelativeLayout met vier ImageView’s en vier TextView’s.
De tekst in de screenshot is allemaal TextView’s met hun eigen aangepaste lettertype.

Voeg in je manifest het volgende toe aan je activiteit:

android:theme=”@style/Theme.Transparent”>

Voeg toe aan je buitenste relatieve lay-out:

android:background=”#aa000000″

Naar je styles.xml-bestand:

<style name="Theme.Transparent" parent="android:Theme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>    

Een voorbeeld van het programmeren van het aangepaste lettertype vindt u op:

https://github.com/commonsguy/cw-android /tree/master/Fonts/FontSampler/

De lay-out van de hiërarchieviewer ziet er als volgt uit (het rode vak is de RelativeLayout-container):

Antwoord 4, autoriteit 8%

setContentView(R.layout.sample_main);
showOverLay();
private void showOverLay(){
    final Dialog dialog = new Dialog(context, android.R.style.Theme_Translucent_NoTitleBar);
    dialog.setContentView(R.layout.transparent);
    RelativeLayout layout = (RelativeLayout) dialog.findViewById(R.id.transparent);
    layout.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View arg0) {
            dialog.dismiss();
        }
    });
    dialog.show();
}

Antwoord 5, autoriteit 6%

Hiervoor moet u een hulplay-out maken onderaan uw hoofdlay-out
vb:(structuur)

<Parent layout>
<Layout 1>(Linear,Relative,....)
  Main layout
  your view...
</Layout 1>
<Layout help>
  set #70000000 as background of this layout 
  #70(transparent range can change) 000000(black)
  and height and width as fillparent
</Layout help>
</Parent layout>

Antwoord 6, autoriteit 2%

Wikkel je hoofdlay-out in een RelativeLayouten voeg daar een tweede lay-out aan toe, zoiets als:

<RelativeLayout
    .... >
    <LinearLayout
        .... >
        <!-- Contents of your main layout -->
    </LinearLayout>
    <LinearLayout
        ....
        android:background="#44000000" > <!-- This is alpha 68/255, black -->
        <!-- Contents of your overlay layout -->
    </LinearLayout>
</RelativeLayout>

Ik geloof dat de overlay-layout onder de hoofdlay-out in het XML-bestand komt (als geheugen dient). Je kunt dan je eigen lay-out maken, ViewFlipper, wat je maar wilt binnen deze tweede lay-out.

Antwoord 7

Maak een nieuwe activiteit (zeg zelfstudie).

Ga naar het lay-out xml-bestand van uw activiteit (activity_tutorial).
Voeg onder de bovenliggende lay-out “android:background= #000” en “android:alpha= “0.5”

toe

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Tutorial_Activity" 
    android:background="#000"
    android:alpha="0.5">
  ..................................................
  ....................................................
  .............................................
  ...............................................
  </RelativeLayout>